Demo2 實現側滑菜單:DrawerLayout布局初涉

現在市面上的很多App都支持了側滑菜單功能，我就是非常喜歡這樣的效果，這里我們就不妨來學習下側滑菜單的使用。

首先，側滑菜單一般都是配合導航欄的Navigation來使用的，所以我們本篇的例程繼續引用上一個例程的工程，接下來是新的邏輯。在正式進入本例程的學習之前，我們先來了解下Android框架下關於側滑菜單的描述。以下圖為例，其中2是側滑出來的布局，1是我們Activity的主內容，3是關聯了側滑菜單之后的主按鍵。

要使用側滑菜單我們要用到DrawerLayout布局，這個布局允許我們在其上面創建側邊的菜單，其中，在DrawerLayout的子組件中設置其android:layout_gravity屬性，為left時，標識此組件為左側滑出的內容窗格。主布局代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include layout="@layout/toolbar" />
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/Main_DrawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--主內容-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                android:text="DrawerDemo"
                android:gravity="center"/>
        </LinearLayout>

        <!--側滑內容-->
        <!--左邊側滑-->
        <LinearLayout
            android:id="@+id/Main_LeftLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_gravity="left"
            android:background="#FF0000">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Left Drawer"
                android:textSize="30sp"
                android:layout_gravity="center_vertical"
                android:textColor="#000000"/>
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

 

現在我們已經在布局里面加入了左邊側滑內容，但是僅僅是這樣是還不能實現側滑功能的，接下來我們應該在Activity中這樣處理:
1.定義DrawerLayout和側滑組件的View或ViewGroup對象;
2.使用ActionBarDrawerToggle對象來管理側滑的各種行為，並傳入DrawerLayout對象的setDrawerListener方法中作為側滑監聽器；
3.重寫Activity的onPreparOptionsMenu方法，以實現側滑的邏輯；
對於以上步驟做如下說明: ActionBarDrawerToggle可以理解為側滑狀態(開關)的監聽器，如果你想正常的實現側滑功能，重寫其onDrawerOpened和onDrawerClosed方法是必須的，在這兩個方法當中調用invalidateOptionsMenu()方法，側滑菜單會在要顯示或者關閉時重繪側滑窗格內容，此時會調用Activity的onPreparOptionsMenu方法，本例程中我們在此方法中設置當側滑菜單打開時導航欄內的菜單項不可見，關閉時菜單項可見。好了，之后的事就交給代碼:
MainActivity.java:

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar = null;
    private DrawerLayout container = null;  //主內容窗格
    private LinearLayout content = null;    //側滑內容菜單
    private ActionBarDrawerToggle drawerToggle = null;  //側滑狀態監聽管理器

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);

        toolbar = (Toolbar)findViewById(R.id.toolbar);
        toolbar.setTitle("I am toolbar");
        toolbar.setTitleTextColor(Color.WHITE);
        toolbar.setSubtitle("toolbar");
        //對於ToolBar標題一類的設置要在 setSupportActionBar() 之前調用才會有效
        setSupportActionBar(toolbar);

        container = (DrawerLayout)findViewById(R.id.Main_DrawerLayout);
        content = (LinearLayout)findViewById(R.id.Main_LeftLayout);

        //構造函數的后面兩個參數是String資源的Id，用來標識開關狀態。
        drawerToggle = new ActionBarDrawerToggle(this, container, R.string.open, R.string.close){
            @Override
            public void onDrawerOpened(View drawerView) {
                invalidateOptionsMenu();        //在onDrawerOpened中的作用是打開側滑菜單並讓其可見
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                invalidateOptionsMenu();        //在onDrawerOpened中的作用是關閉側滑菜單並讓其不可見
            }
        };
        drawerToggle.syncState();   //這一步很重要，同步側滑菜單，側滑菜單才能正常使用
        container.setDrawerListener(drawerToggle);  //向DrawerLayout中加入側滑狀態監聽器

        //使主按鍵能夠關聯側滑菜單
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
    }

    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        boolean isOpen = container.isDrawerVisible(content);    //判斷側滑菜單是否可見
        menu.findItem(R.id.mToolBar_Message).setVisible(!isOpen);
        menu.findItem(R.id.mToolBar_Share).setVisible(!isOpen);
        return super.onPrepareOptionsMenu(menu);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar_menu, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        //官方建議用if(drawerToggle.onOptionsItemSelected(item))的方法獲取主按鍵的事件
        if(drawerToggle.onOptionsItemSelected(item)) {
            invalidateOptionsMenu();
        }
        switch(item.getItemId()) {
            case R.id.mToolBar_Message:
                Toast.makeText(this, "Message", Toast.LENGTH_SHORT).show();
                break;
            case R.id.mToolBar_Share:
                Toast.makeText(this, "Share", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
}

 

當我們在屏幕左側向右滑動時，會出現側滑菜單，我們點擊導航欄的主按鍵時效果也一樣:

Demo源碼下載地址:Demo2:DrawerLlayout