滑动菜单DrawerLayout详解（实时更新，未完待续...)

前言：目前所写代码都是参照第一行代码所写，但日后项目发现新的应用一定会实时更新。



一，在布局中引入DrawerLayout

activity_main.xml

<?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.support.v4.widget.DrawerLayout
android:id="@+id/myFirstDrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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="#1EB9FD"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="滑动有惊喜"
android:layout_gravity="start"
android:background="#1EB9FD"/>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>

这段代码还加入了toolbar,不熟悉可以点我上篇博文，我们来解释其它部分。我在DrawerLayout内部还加了一个简单的textView，里面最重要的一点是layout_gravity属性，它决定了drawerLayout从哪一边划出来。

二，在activity中引入DrawerLayout

先贴整体代码

MainActivity.class

package com.example.slidingmenu;

import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
private Toolbar mToolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar=(Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);//用toolbar替代acitonbar
ActionBar actionBar=getSupportActionBar();
if(actionBar!=null){
actionBar.setDisplayHomeAsUpEnabled(true);//让导航按钮显示
actionBar.setHomeAsUpIndicator(R.mipmap.navigation);//用自己定义的导航栏图标代替默认的箭头图标
}
mDrawerLayout=(DrawerLayout)findViewById(R.id.myFirstDrawerLayout);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case android.R.id.home://HomeAsUp按钮默认固定的名称
mDrawerLayout.openDrawer(GravityCompat.START);//传入你在layout_gravity所填值，我这里是填了start
}
return true;
}
}

注意这里的onOptionsItemSelected方法

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case android.R.id.home://HomeAsUp按钮默认固定的名称
mDrawerLayout.openDrawer(GravityCompat.START);//传入你在layout_gravity所填值，我这里是填了start
}
return true;
}

这个是为了实现点击导航按钮，菜单从侧面滑出的功能。android.R.id.home是HomeAsUp(即图中那个图片按钮）的默认固定名称。接着我们向openDrawerf方法中传入gravity类型参数，注意这里必须传入你在布局文件中一致的属性。因为我在activty_main.xml文件中填的是layout_gravity:”start”，所以这里保持一致。

这样我们已经实现了一个最简单的滑动菜单。

当然我们可以自定以布局，丰富其中的内容，让它如qq那样美观，不过google的大神们已经帮我们铺好了路。使用NavigationView控件可以轻松实现qq侧滑菜单。

三，利用NavigationView定制漂亮的侧滑菜单



A，添加依赖库

NavigatonVie
4000
w是Design Support库所提供，所以我们要在app/build.gradle中引入依赖库：

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

第一行依赖库就是Design Support，注意sdk版本问题，如果是24则填：24.2.1；25则填：25.3.1；26则填：26.0.2,这些在google官网都可以查到的。第二行依赖库是一个将任何形状图片变为圆形图片的一个开源库。

B ,定义menu和headerlayout文件

NavigationView的使用需要menu和headerlayout两个布局文件，headerlayout即是我们qq的上半部分，通常用来放头像，menu既是下半部分，提供一些选项。

首先在res中建立menu文件夹，再在menu文件夹中新建menu.xml

menu.xml

<?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/setting"
android:icon="@mipmap/setting_item"
android:title="Setting"/>
<item
android:id="@+id/telephone"
android:icon="@mipmap/call_item"
android:title="Telephone"/>
</group>
</menu>

其中checkableBehavior=”single”代表item为单选，title代表item的内容。

再在layout文件夹中新建headerlayout.xml

headlayout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="180dp"
android:padding="10dp"
android:orientation="vertical"
android:background="#1EB9FD">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/headPortrait"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/head_portrait"
android:layout_centerInParent="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="吃着冰淇凌望着蓝天"
android:layout_alignParentBottom="true"/>
</RelativeLayout>

这个很简单，放入头像图片和一段文字。

C，在布局中引入NavigationView

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:id="@+id/myFirstDrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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="#1EB9FD"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="@+id/mFirstNavigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/menu"
app:headerLayout="@layout/headlayout"/>

</android.support.v4.widget.DrawerLayout>
</LinearLayout>

其中menu和headerlayout分别对应我们之前建立的两个布局文件。

D，可以在activity中为NavigationView的item添加点击事件

MainActivity.class

package com.example.slidingmenu;

import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
private Toolbar mToolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar=(Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);//用toolbar替代acitonbar
ActionBar actionBar=getSupportActionBar();
if(actionBar!=null){
actionBar.setDisplayHomeAsUpEnabled(true);//让导航按钮显示
actionBar.setHomeAsUpIndicator(R.mipmap.navigation);//用自己定义的导航栏图标代替默认的箭头图标
}
mDrawerLayout=(DrawerLayout)findViewById(R.id.myFirstDrawerLayout);
NavigationView mNavigationView=(NavigationView)findViewById(R.id.mFirstNavigationView);
mNavigationView.setCheckedItem(R.id.setting);
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
mDrawerLayout.closeDrawers();//关闭侧滑菜单
return true;
}
});
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case android.R.id.home://HomeAsUp按钮默认固定的名称
mDrawerLayout.openDrawer(GravityCompat.START);//传入你在layout_gravity所填值，我这里是填了start
}
return true;
}
}

主要看如下代码

mNavigationView.setCheckedItem(R.id.setting);

设置默认选中的item。

mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
mDrawerLayout.closeDrawers();//关闭侧滑菜单
return true;
}
});

为每个item添加监听，点击Item后关闭侧滑菜单，这部分可以类比button等控件点击事件来理解。

E，为NavigationView的headerLayout添加点击事件

很奇怪官方为什么不写个headerLayout监听事件的封装，但即使这样我们还是有办法做到。

下面是一种可行的方法：

MainActivity.class

View headerLayout=mNavigationView.inflateHeaderView(R.layout.headlayout);
CircleImageView headPortrait=(CircleImageView)headerLayout.findViewById(R.id.headPortrait);
headPortrait.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View view){
Toast.makeText(MainActivity.this, "你点击了头像", Toast.LENGTH_SHORT).show();
}
});

注意这样写，headerLayout会加载两遍，因为其中的inflate方法。所以要在activity_main.xml先去除headerlayout：

app:headerlayout="@layout/headlayout"

还有另一种方法，不用去除，只需把`

View headerLayout=mNavigationView.inflateHeaderView(R.layout.headlayout);

换成

View headerLayout=mNavigationView.getHeaderView(0);

经过以上步骤相信大家都能做出一个漂亮的侧滑菜单。