qq侧滑界面的实现（DreawerLayout）

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

所用到的控件：DrawerLayout

DrawerLayout

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

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayoutxmlns: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"><FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.Toolbarandroid: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><FrameLayoutandroid:layout_width="250dp"android:layout_height="match_parent"android:layout_gravity="start"android:background="#ffffff"><TextViewandroid: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"><itemandroid:id="@+id/b1"android:title="了解会员特权"/><itemandroid:id="@+id/b2"android:title="QQ钱包"/><itemandroid:id="@+id/b3"android:title="个性装扮"/><itemandroid:id="@+id/b4"android:title="我的收藏"/><itemandroid: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.CircleImageViewandroid:id="@+id/p1"android:layout_width="70dp"android:layout_height="70dp"android:src="@mipmap/qwe"android:layout_centerInParent="true"/><TextViewandroid: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"/><TextViewandroid: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控件

<FrameLayoutandroid:layout_width="250dp"android:layout_height="match_parent"android:layout_gravity="start"android:background="#ffffff"><android.support.design.widget.NavigationViewandroid: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() {@Overridepublic boolean onNavigationItemSelected(@NonNull MenuItem item) {mDrawerLayout.closeDrawers();return false;}
});

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

整体布局已经搭建好了！

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