Android Material Design 之 DrawerLayout 的使用

Android Material Design

概述

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

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

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

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 中引用

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

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

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

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

抽屉式导航栏设计

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