Android Material Design 之 Drawer

Android Material Design

概述

抽屉式导航栏是一个面板，它将应用的主要导航选项显示在屏幕左边缘。大多数情况下，它处于隐藏状态，但是如果用户从屏幕左边缘滑动手指，同时在应用顶层触摸操作栏中的应用图标，它将会显示出来。

0.创建 MainActivity 和对应的布局文件 activity_main

要创建抽屉式导航栏，必须要保证使用抽屉式导航栏的 Activity 的布局文件的根视图为 DrawerLayout 视图。举例说明：MainActivity 想要使用抽屉式导航栏，MainActivity 对应的布局文件应该为如下格式

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">
    
    <!-- The main content view -->
    <include
        layout="@layout/activity_main_nav_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
        
    <!-- The navigation drawer -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/activity_drawer_header_layout"
        app:menu="@menu/drawer_menu" />
        
</android.support.v4.widget.DrawerLayout>

The main content view

即表示当抽屉视图隐藏时，会展现给用户的布局文件的内容。一般建议以 include 的形式载入布局以提高代码可读性。



The navigation drawer

表示抽屉式导航栏的布局文件内容。

1.创建内容布局文件

首先创建 activity_main_nav_layout.xml 的布局文件，该文件主要用于存放 Toolbar 和主题内容布局，用于在 The main content view 处显示

然后创建名为 activity_main_content.xml 的布局文件，在 activity_main_nav_layout.xml 中引用

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

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

2.创建抽屉式导航栏布局文件

创建名为 activity_drawer_header_layout.xml，用于存放抽屉式导航栏顶部的布局

在 menu 文件夹下创建 drawer_menu.xml，将抽屉式导航栏中的菜单项均存放至此

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="navigation_view">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="Import" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery" />
    </group>

    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send" />
        </menu>
    </item>

</menu>

3.编写 MainAcitivity 中的代码

• 先获取 toolbar，替换当前系统的 toolbar
• 获取 DrawerLayout，同时创建 DrawerToggle
• 获取 NavigationView，用于监听菜单点击事件

代码片段

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_menu);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

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

    NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(this);
}

override fun onBackPressed() {
    if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
        drawerLayout.closeDrawer(GravityCompat.START)
    } else {
        super.onBackPressed()
    }
}

效果图

Preview

抽屉式导航栏设计

决定在应用中使用抽屉式导航栏之前， 您应了解抽屉式导航栏设计 指南中定义的用例和设计原则。