Android侧滑控件DrawableLayout以及NavigationView的使用

这一篇文章接着来了解google提供的Material Design的控件

• DrawableLayout （相信很多人都使用过Github上特别火爆的一个侧滑控件SlidingMenu，而DrawableLayout就是google官方提供的一个侧滑控件，相当于一个自定义容器 extends ViewGroup ,可以看出是一个有侧滑效果的帧布局，其中包含两个部分：1）内容布局；2）侧滑出来的菜单布局）

下面我们来看一下如何使用：在布局里把DrawableLayout作为父容器，第一个子view为内容页，第二个子view为侧滑菜单页（注意：作为侧滑菜单的view需要设置android:layout_gravity属性，start为从左向右滑动，end为从右向左滑动）

<?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/drawerlayout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            app:title="我是toolbar"            app:titleTextColor="@color/colorText" />        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:gravity="center"            android:text="我是内容页" />    </LinearLayout>    <LinearLayout        android:layout_width="200dp"        android:layout_height="match_parent"        android:background="@color/colorPrimary"        android:layout_gravity="start">        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:gravity="center"            android:text="我是侧滑页" />    </LinearLayout></android.support.v4.widget.DrawerLayout>

看一下效果图：

• NavigationView（google为了标准化侧滑菜单推出的）

和普通的侧滑菜单一样，首先所有的布局都放在一个DrawableLayout中，面我们来看一下如何使用：在布局里把DrawableLayout作为父容器，只不过这次我们把侧滑菜单的布局用NavigationView来代替，代码如下：

<?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/drawerlayout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            app:title="我是toolbar"            app:titleTextColor="@color/colorText" />        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:gravity="center"            android:text="我是内容页" />    </LinearLayout>    <android.support.design.widget.NavigationView        android:id="@+id/navigtion"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        app:elevation="5dp"        app:headerLayout="@layout/navigation_header"        app:menu="@menu/main">    </android.support.design.widget.NavigationView></android.support.v4.widget.DrawerLayout>

app:headerLayout="@layout/header_layout"表示引用一个头布局文件

<!--navigation_header--><?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_marginTop="10dp"    android:layout_marginBottom="10dp"    android:orientation="vertical">    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:src="@mipmap/ic_launcher_round" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:text="jason" /></LinearLayout>

app:menu="@menu/main"表示引用一个menu作为下面的点击项

<menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    tools:context="com.ricky.md.theme.MainActivity" >    <item        android:id="@+id/action_settings"        android:orderInCategory="100"        android:icon="@android:drawable/ic_menu_set_as"        android:title="设置"/>    <item        android:id="@+id/action_share"        android:orderInCategory="101"        android:icon="@android:drawable/ic_menu_share"        android:title="分享"/>    <item        android:id="@+id/action_new"        android:orderInCategory="102"        android:icon="@android:drawable/ic_menu_add"        android:title="添加"/></menu>

好了，我们来看一下效果：

在v7包里有一个ActionBarDrawerToggle可以跟DrawableLayout以及Toolbar配合使用

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,drawerlayout,toolbar,R.string.drawer_open,R.string.drawer_close);toggle.syncState();drawerlayout.addDrawerListener(toggle);

如下：