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
抽屉式导航栏设计
决定在应用中使用抽屉式导航栏之前， 您应了解抽屉式导航栏设计 指南中定义的用例和设计原则。
