Android使用DrawerLayout和NavigationView实现侧滑效果

Android退出design包后，有很多新型的控件，为开发一些UI效果提供了方便。
可以先来看下效果图

首先要导入design包

compile 'com.android.support:design:25.3.1'

其次是搭布局，在主界面activity_main中搭建DrawerLayout 和NavigationView，界面布局很简单，直接上代码

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_na"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal">
            <ImageView
                android:id="@+id/main_menu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher_round"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="我是标题"
                android:textColor="#000000"
                android:textSize="20sp"
                android:layout_marginLeft="16dp" />
        </LinearLayout>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="主页"
            android:textSize="22sp"
            android:gravity="center"/>
    </LinearLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav"
        android:layout_gravity="left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:headerLayout="@layout/activity_head"
        app:menu="@menu/my_menu">

    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

大家可以看到，在NavigationView中有两个属性

 app:headerLayout="@layout/activity_head"
 app:menu="@menu/my_menu"

这两个属性便是侧滑布局中的头布局和菜单，接下来我们需要搭建头布局和菜单。代码一样很简单
头布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="#66ccff">
    <ImageView
        android:id="@+id/person"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:layout_marginTop="42dp"
        android:src="@mipmap/ic_launcher_round"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:layout_marginTop="24dp"
        android:textColor="#fff"
        android:text="我是昵称"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:layout_marginTop="12dp"
        android:textColor="#fff"
        android:layout_marginBottom="18dp"
        android:text="别人在等伞，而你等雨停"/>

</LinearLayout>

menu的代码：

<?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/favorite"
            android:checkable="true"
            android:title="会员"/>
    </group>
    <item
        android:id="@+id/collection"
        android:title="收藏"/>
    <item
        android:id="@+id/setting"
        android:title="设置"/>
    <item
        android:id="@+id/mine"
        android:title="我的"/>
    <item
        android:id="@+id/file"
        android:title="文件"/>

</menu>

搭建好布局后，开始在activity中进行功能实现

public class MainActivity extends AppCompatActivity implements View.OnClickListener  {

    private DrawerLayout drawerLayout;
    private NavigationView navigationView;
    private ImageView menu;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        drawerLayout = (DrawerLayout) findViewById(R.id.activity_na);
        navigationView = (NavigationView) findViewById(R.id.nav);
        menu= (ImageView) findViewById(R.id.main_menu);
        View headerView = navigationView.getHeaderView(0);//获取头布局
        menu.setOnClickListener(this);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                Toast.makeText(MainActivity.this,item.getTitle().toString(), Toast.LENGTH_SHORT).show();
                drawerLayout.closeDrawer(navigationView);
                return true;
            }
        });
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.main_menu://点击菜单，跳出侧滑菜单
                if (drawerLayout.isDrawerOpen(navigationView)){
                    drawerLayout.closeDrawer(navigationView);
                }else{
                    drawerLayout.openDrawer(navigationView);
                }
                break;
        }
    }

这样就可以实现一个简单的侧滑效果啦。