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