無需SherlockActionbar的SlidingMenu使用詳解（一）——通過SlidingMenu設置容器並解決滑動卡頓的問題

 

　　想必很多人都聽過這個開源框架，一年前真的是風靡一時。只是它的配置較為繁瑣，還需要sherlockActionbar的支持，我這里下載了最新的開源庫，並且在實際用套用了AppCompat的官方庫，這樣就完全不用sherlockActionbar的支持啦~ 

SlidingMenu官方下載地址：https://github.com/jfeinstein10/SlidingMenu

先大概講解下配置：

下載庫library，然后倒入到編譯器中，並且添加依賴。這里可能會出現v4包不同的問題，總之換為最新的即可！

本篇講解的是這個項目的簡單配置，為以后做准備。咱們先來看看怎么來初步使用這個控件。

 

一、思路

1. 建立一個主界面的布局和菜單界面的布局

1.1 主界面

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content_frame_id"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 

1.2 菜單界面

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/menu_frame_id"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

可以看出都是超級簡單的布局，這兩個就是為以后放fragment做准備的容器。

 

二、在Actiivity或者主布局文件中設置SlidingMenu控件

這里我不推薦在xml文件中定義，原因是有bug。

2.1 在activity中初始化slidingmenu

　　private SlidingMenu menu;

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 設置正文容器
        setContentView(R.layout.content_frame);
// 用代碼來設置抽屜菜單
        setSlidingMenu();

    }

    /**
     * slidingMenu屬性詳解
     */
    protected void setSlidingMenu() {
        // configure the SlidingMenu
        menu = new SlidingMenu(this);
        menu.setMode(SlidingMenu.LEFT);
        menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        // 設置邊緣陰影的寬度，通過dimens資源文件中的ID設置
        menu.setShadowWidthRes(R.dimen.slidingmenu_shadow_width);
        // 設置陰影的圖片
        menu.setShadowDrawable(R.drawable.shadow);
        // 設置偏移量。說明：設置menu全部打開后，主界面剩余部分與屏幕邊界的距離，值寫在dimens里面:60dp
        menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
        // 設置是否淡入淡出
        menu.setFadeEnabled(true);
        // 設置淡入淡出的值，只在setFadeEnabled設置為true時有效
        menu.setFadeDegree(0.5f);
        // 全屏：TOUCHMODE_FULLSCREEN ；邊緣：TOUCHMODE_MARGIN ；不打開：TOUCHMODE_NONE
        menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        // 設置滑動時actionbar是否跟着移動，SLIDING_WINDOW=跟着移動;SLIDING_CONTENT=不跟着移動
        menu.attachToActivity(this, SlidingMenu.SLIDING_WINDOW);
        // 設置滑動方向
        menu.setMode(SlidingMenu.LEFT);
        // 設置menu的背景
        // menu.setBackgroundColor(getResources().getColor(android.R.color.background_dark));
        // 設置菜單容器，注意這里只是容器，而不是菜單的界面
        menu.setMenu(R.layout.menu_frame);
    }

    public SlidingMenu getMySlidingMenu() {
        return menu;
    }

 

附上官網的example：

public class SlidingExample extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setTitle(R.string.attach);
        // set the content view
        setContentView(R.layout.content);
        // configure the SlidingMenu
        SlidingMenu menu = new SlidingMenu(this);
        menu.setMode(SlidingMenu.LEFT);
        menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        menu.setShadowWidthRes(R.dimen.shadow_width);
        menu.setShadowDrawable(R.drawable.shadow);
        menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
        menu.setFadeDegree(0.35f);
        menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
        menu.setMenu(R.layout.menu);
    }

}

這里initSlidingMenu做的事情就是在主布局文件中建立一個SlidingMenu控件，並且這個控件通過setMenu方法擴展了一個Menu的容器。

這樣你的布局文件中其實是有兩個布局了，一個是通過setContentView(R.layout.content_frame);正常設置的布局，一個是通過slidingMenu.setMenu(R.layout.menu_frame);設置的菜單布局。這里的兩個布局就是我們上面定義的布局。OK，現在我們擁有了兩個布局容器，就可以往里面放Fragment了。

 

2.2 通過xml文件設置，雖然有bug，但我還是注釋下。

官網：

If you decide to use SlidingMenu as a view, you can define it in your xml layouts like this:

<com.jeremyfeinstein.slidingmenu.lib.SlidingMenu
    xmlns:sliding="http://schemas.android.com/apk/res-auto"
    android:id="@+id/slidingmenulayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    sliding:viewAbove="@layout/YOUR_ABOVE_VIEW"
    sliding:viewBehind="@layout/YOUR_BEHIND_BEHIND"
    sliding:touchModeAbove="margin|fullscreen"
    sliding:behindOffset="@dimen/YOUR_OFFSET"
    sliding:behindWidth="@dimen/YOUR_WIDTH"
    sliding:behindScrollScale="@dimen/YOUR_SCALE"
    sliding:shadowDrawable="@drawable/YOUR_SHADOW"
    sliding:shadowWidth="@dimen/YOUR_SHADOW_WIDTH"
    sliding:fadeEnabled="true|false"
    sliding:fadeDegree="float"
    sliding:selectorEnabled="true|false"
    sliding:selectorDrawable="@drawable/YOUR_SELECTOR"/>

NOTE : you cannot use both behindOffset and behindWidth. You will get an exception if you try.

 

• viewAbove - a reference to the layout that you want to use as the above view of the SlidingMenu
• viewBehind - a reference to the layout that you want to use as the behind view of the SlidingMenu
• touchModeAbove - an enum that designates what part of the screen is touchable when the above view is showing. Margin means only the left margin. Fullscreen means the entire screen. Default is margin.
• behindOffset - a dimension representing the number of pixels that you want the above view to show when the behind view is showing. Default is 0.
• behindWidth - a dimension representing the width of the behind view. Default is the width of the screen (equivalent to behindOffset = 0).
• behindScrollScale - a float representing the relationship between the above view scrolling and the behind behind view scrolling. If set to 0.5f, the behind view will scroll 1px for every 2px that the above view scrolls. If set to 1.0f, the behind view will scroll 1px for every 1px that the above view scrolls. And if set to 0.0f, the behind view will never scroll; it will be static. This one is fun to play around with. Default is 0.25f.
• shadowDrawable - a reference to a drawable to be used as a drop shadow from the above view onto the below view. Default is no shadow for now.
• shadowWidth - a dimension representing the width of the shadow drawable. Default is 0.
• fadeEnabled - a boolean representing whether or not the behind view should fade when the SlidingMenu is closing and "un-fade" when opening
• fadeDegree - a float representing the "amount" of fade. 1.0f would mean fade all the way to black when the SlidingMenu is closed. 0.0f would mean do not fade at all.
• selectorEnabled - a boolean representing whether or not a selector should be drawn on the left side of the above view showing a selected view on the behind view.
• selectorDrawable - a reference to a drawable to be used as the selector NOTE : in order to have the selector drawn, you must call SlidingMenu.setSelectedView(View v) with the selected view. Note that this will most likely not work with items in a ListView because of the way that Android recycles item views.

我自己的注釋：

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <!-- 
    mode：設置抽屜的打開方向，可以設置左右或同時left|right
    behindOffset：設置打開抽屜后主界面距離屏幕的距離
    fadeEnabled：允許淡入淡出
    fadeDegree：淡入淡出的度數，這個在fadeEnable = true時有效
    shadowDrawable：陰影的圖片
    shadowWidth：陰影寬度，這里要在dimen中設置
    touchModeAbove：滑動打開抽屜的范圍，可以選擇："fullscreen"=全屏，"margin"=邊緣打開
    viewAbove：在主頁面上方的圖片 
    viewBehind：在抽屜界面上方顯示的圖片。example:sliding:viewBehind="@layout/above_layout" 
     -->
    <com.jeremyfeinstein.slidingmenu.lib.SlidingMenu
        xmlns:sliding="http://schemas.android.com/apk/res-auto"
        android:id="@+id/slidingmenulayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        sliding:viewBehind="@layout/menu_frame"
        sliding:viewAbove="@layout/content_frame"
        sliding:mode="left"
        sliding:behindOffset="@dimen/slidingmenu_offset"
        sliding:fadeEnabled="true"
        sliding:fadeDegree="0.5"
        sliding:shadowDrawable="@drawable/shadow"
        sliding:shadowWidth="@dimen/slidingmenu_shadow_width"
        sliding:touchModeAbove="fullscreen"/>

</RelativeLayout>

這里可以明確的看到在xml文件中有這個布局，並且這個布局通過viewBehind、viewAbove設置兩個布局。其實就是一個主布局，主布局中include了兩個其他的布局文件。

在Activity中獲取到控件，就可以使用啦。注意：這里setContentView設置的布局是有slidingmenu的main_activity.xml

setContentView(R.layout.activity_main);
//在主界面的布局文件中設置slidingMenu
initSlidingMenu();

    private void initSlidingMenu() {
        menu = (SlidingMenu) findViewById(R.id.slidingmenulayout);
    }

三、加載Fragment

現在我們可以往里面加載Fragment了，這里有用到個小技巧來存放當前的fragment對象

    //通過數字來標識當前是哪個fragment，這樣用於加載頂部的menu
    public static int NOW_FRAGMENT_NO = 0;
    
    private Fragment nowFragment; private SlidingMenu menu;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 設置正文容器
        setContentView(R.layout.content_frame);
        // 設置左上角的按鈕可以點擊
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.bar_color));
        // 用代碼來設置抽屜菜單
        setSlidingMenu();
        /*setContentView(R.layout.activity_main);
        //在主界面的布局文件中設置slidingMenu
        initSlidingMenu();*/

 if (savedInstanceState != null) { nowFragment = getSupportFragmentManager().getFragment( savedInstanceState, "mContent"); } // 默認載入的fragment else { nowFragment = new FirstFragment(); } initFragment();
    }

@Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        getSupportFragmentManager().putFragment(outState, "mContent", nowFragment);
    }

　　 /**
     * 填入主界面和菜單的Fragment
     */
    private void initFragment() {
        // 設置正文容器
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.content_frame_id, nowFragment).commit();

        // 設置菜單容器，這里用到了AppMenuFragment()
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.menu_frame_id, new MenuFragment()).commit();
    }

 

四、切換Fragment的方法

因為我們通常是隨着menu菜單的點擊來切換fragment的，所以切換的方法需要寫到activity才能對slidingmenu進行完全的控制。此外，我們一般對Menu界面是不需要進行切換的，主要是切換正文的fragment。

    /**
     * 切換正文fragment
     * 
     * @param fragment
     */
    public void switchContent(Fragment fragment) {
        // 切換回默認樣式
        getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
        // 切換界面前清空tab
        getSupportActionBar().removeAllTabs();
        // 切換回默認的觸控范圍（全屏滑動有效）
        getMySlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        
        nowFragment = fragment;
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.content_frame_id, fragment).commit();
        /**
         * 優化的代碼，通過handler來避免滑動卡頓的情況。方法：延遲加載抽屜
         * 如果不優化也可以運行，就是將下面的代碼改為：menu.showContent();
         */ Handler h = new Handler(); h.postDelayed(new Runnable() { public void run() { menu.showContent(); } }, 50);
    }

 

下篇：http://www.cnblogs.com/tianzhijiexian/p/3994329.html