DrawableLayout实现仿QQ侧滑菜单

由于移动设备的屏幕限制，在主界面同时显示很多东西是不大显示的事，因而很多时候我们都会把一些功能选项放在菜单。但传统的菜单界面比较单调，而且交互体验并不是很好，因此，侧滑菜单也因此应运而生。

实现侧滑菜单的方式有很多种，包括自定义控件，使用开源库SlideMenu等，但Google在MaterialUI中推出使用DrawableLayout实现侧滑菜单的功能。

既然市面上已经有了不少侧滑菜单的实现方式，那DrawableLayout又有什么优势呢？笔者在使用的时候觉得有以下几点值得我们去使用DrawableLayout。

1、界面美观。这也是很多人觉得MaterialUI推出后Android界面并不比IOS差的原因了。

2、使用简单。相比自定义一个侧滑菜单的成本低很多。

那下面我们就来看一下怎么使用DrawableLayout

1、布局。在界面中放入两个子的布局，第一个子布局是主界面，第一个子布局是左侧滑菜单，当然我们也可以在右边也放一个侧滑菜单，不过目前市面上似乎没见过有左右侧滑菜单的APP，这个视实际情况决定。下面是activity_main.xml的代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout     
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/activity_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include layout="@layout/title_bar" />

            <FrameLayout
                android:id="@+id/fl_main"
                android:layout_width="match_parent"
                android:layout_height="match_parent"> 
            </FrameLayout>
        </LinearLayout>
    </FrameLayout>

    <ListView
        android:id="@+id/list_view_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#ffffff"
        android:divider="#ffffff"></ListView>


</android.support.v4.widget.DrawerLayout>

以上是笔者使用DrawableLayout实现的一个仿知乎日报侧滑菜单的主界面。从代码可以清楚的看到最外层布局使用的是DrawableLayout，然后多了xmlns:app=”http://schemas.android.com/apk/res-auto”这么一行代码，关于命名空间的这里不去讲解，有兴趣的读者可以自行搜索，只有加了这一行代码后我们才可以使用MaterialUI的新属性。然后就是第二个子布局笔者使用了一个ListView控件，当然也可以使用其他控件。细心的读者可能会发现多了这么一行代码android:layout_gravity=”start”。这个属性是必须制定的，如果去掉，第二个子控件就会覆盖在第一个控件上了。这样子就完成了侧滑菜单就完成了。

细心的读者肯恩贵发现，QQ点击左侧头像的时候也可以调出侧滑菜单，下面我们就在Java中实现这一功能。

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;
    private ImageButton menu_title_bar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        menu_title_bar = (ImageButton)findViewById(R.id.menu_title_bar);
        menu_title_bar.setOnClickListener(new MyOnClickListener());
    }
    class MyOnClickListener implements View.OnClickListener{

        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case  R.id.menu_title_bar:
                  drawer_layout.openDrawer(GravityCompat.START);
                    break;
            }
        }
    }
}

这里为了简洁，笔者把其他代码删去了，只留下调用侧滑菜单的方法。这关键的就是这一句

drawer_layout.openDrawer(GravityCompat.START);

传进去的参数要跟在布局文件中定义的一致。

以下是笔者根据知乎日报API做的一个界面效果图。