Android DrawerLayout和NavigationView

Android DrawerLayout是一个实现侧滑非常好用的布局，使用也非常简单，DrawerLayout默认效果如下：

我们可以看到默认效果是菜单覆盖在主页面上，这里我们希望实现qq的侧滑内容跟随向右移动效果，思路也非常简单，只需要在setDrawerListener中设置主页面的布局位置即可。

首先看布局文件，我们在activity_main.xml中用一个DrawerLayout作为父布局，其中包含一个NavigationView和引入的app_bar_main布局，NavigationView即为侧滑显示控件，可以通过设置headerLayout和menu来定义布局。

<?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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#fdfdfe"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

在app_bar_main.xml中，我们使用CoordinatorLayout作为父布局，其中APPBarLayout包含我们自己定义的工具栏，include为页面主要内容。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    android:id="@+id/coordinator"
    tools:context="com.sdu.runningsdu.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:contentInsetStart="0dp"
            app:popupTheme="@style/toolbar_action_menu_overflow"
            android:background="@drawable/title_bar">

            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:singleLine="true"
                android:textColor="@android:color/white"
                android:textSize="20sp" />

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

</android.support.design.widget.CoordinatorLayout>

在Activity中，我们定义一个DrawerLayout，分别获取左右布局以便后面操作，新建一个ActionBarDrawerToggle用来管理布局和工具栏

DrawerLayout drawer = findViewById(R.id.drawer_layout);
right = findViewById(R.id.coordinator);
left = findViewById(R.id.navigation_view);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
        this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.addDrawerListener(toggle);
toggle.syncState();

设置点击事件来完成收起侧滑栏操作和实现右边跟随移动效果

right.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        if(isDrawer){
            return left.dispatchTouchEvent(motionEvent);
        }else{
            return false;
        }
    }
});

drawer.addDrawerListener(new DrawerLayout.DrawerListener() {
    @Override
    public void onDrawerSlide(View drawerView, float slideOffset) {
        isDrawer=true;
        // 获取屏幕的宽高
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        // 设置右面的布局位置
        // 根据左面菜单的right作为右面布局的left
        // 左面的right+屏幕的宽度（或者right的宽度这里是相等的）为右面布局的right
        right.layout(left.getRight(), 0, left.getRight() + dm.widthPixels, dm.heightPixels);
    }

    @Override
    public void onDrawerOpened(View drawerView) {}

    @Override
    public void onDrawerClosed(View drawerView) {}

    @Override
    public void onDrawerStateChanged(int newState) {}
});

看一下实现效果

 

这里需要注意如果我们想获取NavigationView的HeaderLayout中的控件，需要先获取HeaderView再调用findViewById来获取控件

// 获取NavigationView的HeaderLayout
View navigationHeader = navigationView.getHeaderView(0);
LinearLayout userInfo = navigationHeader.findViewById(R.id.user_info);

在下篇博客中我将详细介绍如何自定义工具栏以及实现左上角圆形头像点击按钮