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做的一个界面效果图。