qq侧滑界面的实现（DreawerLayout）

所谓的滑动菜单就是将一些菜单选型隐藏起来，而不是放在主屏幕上，而是通过滑动的方式将菜单显示出来。

所用到的控件：DrawerLayout

---

DrawerLayout

一种布局，此布局中放入两个直接子控件，第一个是显示主屏幕的所显示的内容；第二个是滑动菜单中现实的内容

<?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:layout_height="match_parent"
    android:layout_width="match_parent"
    android:id="@+id/a4"
    >
    <FrameLayout
        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" />
    </FrameLayout>
    <FrameLayout
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#ffffff">
      <TextView
          android:layout_gravity="start"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:id="@+id/nav_view"
       />
    </FrameLayout>
</android.support.v4.widget.DrawerLayout>

由以上代码我们可以看出两个子控件都是FrameLayout

其中第二个控件中我们需要注意Android：layout_gravirty是必须要设置的，以为它决定了侧滑界面的方向。它有三个属性：

Start：根据语言自定决定

Right：右

Lift：左

---

给侧滑界面加一个导航键，改动MainActivity中的代码：

  mDrawerLayout=(DrawerLayout)findViewById(R.id.a4);
    ActionBar actionBar=getSupportActionBar();
    if(actionBar!=null)
    {
        actionBar.setDisplayHomeAsUpEnabled(true);
    }
...........
public boolean onOptionsItemSelected(MenuItem item)
{
    switch (item.getItemId())//判断点击那一个菜单
    {
        case android.R.id.home:
            mDrawerLayout.openDrawer(GravityCompat.START);
            break;
.............

分析以上代码：

首先得到DrawerLayout实例，然后调用getSupportActionBar()得到ActionBar实例，

然后调用ACtionBar的setDisplayHomeAsUpEnable()方法让导航栏显示出来

接下来在onOptionsItemSelected()方法为其设置点击事件，HomeAsUp按钮的id永远都是android.R.id.home,

在调用用DrawableLayout的openDrawable()方法，这里传入一个gravirty的参数，为了保持一致，我们传入Start

---

NavigationView：

谷歌为我们提供了一种可以将滑动菜单页面的实现变得简单的控件——NavigationView

此控件是Design Support库中提供的，所以我们要将这个库引入到项目中

compile 'com.android.support:design:25.3.1'
compile 'de.hdodenhof:circleimageview:2.1.0'

第一个是Design Support库，

第二个是将图片圆形化的功能

---

除此之外

还需要准备一个菜单文件与一个头布局

新建nav_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
    <item
        android:id="@+id/b1"
        android:title="了解会员特权"
        />
    <item
        android:id="@+id/b2"
        android:title="QQ钱包"
        />
    <item
        android:id="@+id/b3"
        android:title="个性装扮"
        />
    <item
        android:id="@+id/b4"
        android:title="我的收藏"
        />
    <item
        android:id="@+id/b5"
        android:title="我的相册"
        />
</group>
</menu>

我们在<menu>中嵌套了一个<group>,并将group的checkableBehavior属性指定为single，表示内容只可单选

接下来看头布局，新建一个nav_header.xml,并准备一张图片作为头像

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="@mipmap/bk">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/p1"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@mipmap/qwe"
        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="ID:1399663177"
        android:background="#FFF"
        android:textSize="14sp"
        />
    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="辫儿哥哥"
        android:layout_above="@id/mail"
        android:textColor="#FFF"
        android:textSize="14sp"/>

</RelativeLayout>

这里需要注意的是CircleImageView，将传入的图片圆形化，用法和ImageView相同

准备工作完成，接下来使用NavigationView，修改activity_Main.xml中代码，原理是将Dreamweaver布局的第二个子布局换为NavigationView控件

<FrameLayout
    android:layout_width="250dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="#ffffff">
  <android.support.design.widget.NavigationView
      android:layout_gravity="start"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:id="@+id/nav_view"
      app:menu="@menu/nav_menu"
      app:headerLayout="@layout/nav_header"/>
</FrameLayout>

通过将app:menu与app:headerLayout设置进来

整体布局已经搭建好了，最后我们再为其添加一个简单的点击事件

在MainActivity中的onCreate()方法中添加

NavigationView navigationView=(NavigationView)findViewById(R.id.nav_view);
navigationView.setCheckedItem(R.id.b1);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        mDrawerLayout.closeDrawers();
        return false;
    }
});

首先获得NavigationView实例，再调用setCheckItem()方法选中菜单第一个参数，再调用监听器。。。

整体布局已经搭建好了！

为了美观，我们将以前写的登录界面也加进来 如下：