Material Design之侧滑

首先我在这里拿出一张图片来说一下这篇博客要说的内容。

这个功能也很常见，就是当你用手机左右滑动屏幕两端，会出现另外一个页面，一般情况下，这个页面都会放置自己的个人信息。
那么，这个功能该如何实现呢？

首先，我们要知道使用了Material Design中的哪几个控件。这里我们要说下DrawerLayout布局，这个布局里面可以放置两个直接控件。

<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">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>    <com.baidu.mapapi.map.MapView        android:id="@+id/bmapView"        android:layout_below="@id/toolbar"        android:layout_width="match_parent"        android:layout_height="550dp"         /></RelativeLayout>    <android.support.design.widget.NavigationView        android:id="@+id/nav_view"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="start"        app:menu="@menu/nav_menu"        app:headerLayout="@layout/nav_header"/>    </android.support.v4.widget.DrawerLayout>

这里，我们要好好说下是如何设置这个布局的。我们首先是在DrawerLayout布局里面放置了RelativeLayout子布局和NavigationView控件，其中Navigation控件就是我们左右滑动时出现的另一个页面。然后在RelativeLayout布局里面，放置了Toolbar控件和百度地图的MapView控件。

不过另外一个页面可不会平白无故的出现内容的，我们可以观察到：

app:menu="@menu/nav_menu"        app:headerLayout="@layout/nav_header"

这说明在Navigation里面我们放置了另外两个小的xml布局。

这样大家就明白了吧。
剩下的就是写这两个小布局了，我们首先写下面的布局，在menu下面新建一个nav_menu.xml.然后在这里再写几个item.

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">  <group android:checkableBehavior="single">      <item          android:id="@+id/nav_photo"          android:icon="@drawable/nav_call"          android:title="照相机"/>      <item          android:id="@+id/nav_friends"          android:icon="@drawable/nav_friends"          android:title="相册"/>      <item          android:id="@+id/nav_location"          android:icon="@drawable/nav_location"          android:title="位置"/>      <item          android:id="@+id/nav_mail"          android:icon="@drawable/nav_mail"          android:title="邮箱"/>      <item          android:id="@+id/nav_task"          android:icon="@drawable/nav_task"          android:title="Task"/>  </group></menu>

其中item放在了group里面，注意我们使用android:checkableBehavior=”single”来设置这里的item只能是单选状态。
另外一个布局我们在layout下面写，新建一个nav_header.xml
,在这个布局里，我们要注意使用了CircleImageView控件，这个控件可以把图片变成圆形，就是头像部分。不过要是用这个控件，我们需要添加依赖库，在build.gradle里面添加

compile 'de.hdodenhof:circleimageview:2.1.0'

这个说明完了之后，我们就直接贴出代码，毕竟没什么难点可说

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="180dp"    android:background="?attr/colorPrimary">    <de.hdodenhof.circleimageview.CircleImageView        android:layout_width="70dp"        android:layout_height="70dp"        android:src="@drawable/nav_icon"        android:layout_centerInParent="true"/>    <TextView        android:id="@+id/mail"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:text="1**08***[e-mail]"        android:textColor="#FFF"        android:textSize="18sp"        />    <TextView        android:id="@+id/nav_username"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/mail"        android:text="张**"        android:textColor="#FFF"        android:textSize="18sp"        /></RelativeLayout>

建议这里使用RelativeLayout布局。
布局到这里就可以结束了，剩下的就是在活动里面做修改了。
一，实例化DrawerLayout，NavigationView对象。
二，为Navigation添加点击事件。（这里我就先不说自己添加的点击事件了，毕竟我添加的点击事件，大多都是复习旧的知识点）

private DrawerLayout mDrawerLayout;mDrawerLayout=(DrawerLayout)findViewById(R.id.drawer_layout);NavigationView navigationView=(NavigationView)findViewById(R.id.nav_view);navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){            @Override            public boolean onNavigationItemSelected(MenuItem item){                switch (item.getItemId()){                case R.id.nav_photo:                ********                  break;               case R.id.nav_location:               *******                  break;               *******               *******               default:                        break;                 }                return true;            }        });

好了，到这里，我们就写完了，不过现在我们点击NavigationView里面的任何一项，都不会有响应事件。
后续我还会很根据自己的想法来写一些点击后的逻辑事件。鉴于本人目前仍是小白一枚，如果大家感觉我有那个地方写的不对，我们可以一起探讨。