Android学习笔记之滑动菜单

一、DrawerLayout的简单使用

1.DrawerLayout是一个布局，它允许在布局中放入两个直接子控件，第一个子控件就是主屏幕中的内容，第二个子控件就是滑动菜单中显示的内容。其中第二个子控件必须设置layout_gravity属性，它表示滑动菜单在屏幕的左边还是右边。

<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"
    tools:context=".MainActivity">
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="0dp"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </android.support.constraint.ConstraintLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:text="This is menu"
        android:textSize="30sp"
        android:background="#fff"/>
</android.support.v4.widget.DrawerLayout>

PS：第二个子控件的layout_gravity属性值设置为start，表示根据系统语言进行判断，如果系统语言是从左往右的，那么滑动菜单就在左边，如果系统语言是从右往左的，那么滑动菜单就在右边。类似的，设置成end的话，则是系统语言的结尾处。 

2.设置导航栏按钮实现点击按钮弹出抽屉。先获取到ActionBar的实例，然后为HomeAsUp按钮设置一个合适的图标（默认是返回键）

ActionBar actionBar = getSupportActionBar();
if(actionBar!=null){
    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setHomeAsUpIndicator(R.drawable.list);
}

然后在重写的onOptionsItemSelected()方法中为HomeAsUp按钮添加点击事件，打开抽屉

case android.R.id.home:
    drawerLayout.openDrawer(GravityCompat.START);
    break;

PS：这里的openDrawer()方法接收一个Gravity参数，与XML中定义的一致，传入GravityCompat.START 

二、NavigationView的简单使用

1.在app/build.gradle中添加design库的依赖

implementation 'com.android.support:design:27.1.1'

2.编写NavigationView中的菜单项：在res/menu目录下新建一个目录资源文件nav_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_call"
            android:icon="@drawable/call"
            android:title="Call"/>
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/friends"
            android:title="Friends"/>
        <item
            android:id="@+id/nav_location"
            android:icon="@drawable/location"
            android:title="Location"/>
        <item
            android:id="@+id/nav_mail"
            android:icon="@drawable/mail"
            android:title="Mail"/>
    </group>
</menu>

group标签表示一个组，组和组之间的Item有明显的分隔。group的checkableBehavior属性设置为single表示该组中的所有菜单项只能单选。

3.编写NavigationView的headerLayout，这是一个可以随意定制的布局，示例中就简单的放一张图片两段文本：在res/layout目录下新建一个布局资源文件nav_header.xml

<android.support.constraint.ConstraintLayout
    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:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary"
    >

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/timg"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_username"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:text="Tony Green"
        android:textColor="#fff"
        android:textSize="14sp"
        app:layout_constraintBottom_toTopOf="@+id/tv_mail"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_mail"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:text="[email protected]"
        android:textColor="#fff"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>

4.将滑动菜单DrawerLayout的第二个子控件设置为NavigationView

<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"
    tools:context=".MainActivity">
......
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"
        />
</android.support.v4.widget.DrawerLayout>

5.为NavigationView的菜单项设置点击事件监听器

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        drawerLayout.closeDrawers();
        return true;
    }
});

PS：上述示例代码运行时，会发现点击一个滑动菜单中的Item之后，下次打开滑动菜单时会发现上次被点击的Item被选中了。如果不需要这种效果，可以在nav_menu.xml文件中将对应的菜单组的选择模式设置为none

<group android:checkableBehavior="none">