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***279@163.com"
        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里面的任何一项，都不会有响应事件。
后续我还会很根据自己的想法来写一些点击后的逻辑事件。鉴于本人目前仍是小白一枚，如果大家感觉我有那个地方写的不对，我们可以一起探讨。