DrawerLayout是Android中实现了Navigation Drawer模式的组件。DrawerLayout分为侧滑导航菜单和主内容区两部分内容,菜单可以根据手势展开与隐藏(DrawerLayout自身特性),主内容区的内容可以随着菜单的点击而变化。如下图所示:

注:有兴趣的同学可以在Navigation Drawer详细了解。

环境准备

Google发布的Android最新版本Android M中,又新增加了一些支持Material Design的支持库(Support Library),全面支持Material Design风格的UI。其实在官方库没有出现之前,Github上已经有非常非常多的开发者提供了功能各异的库能够实现类似效果,只不过在最新的版本中Google将他们作为组件加入进了Support Library中,便于开发者直接使用。为了能够使用最新的Design Support Library,请在SDK Manager中更新对应的组件:

alter-text

更新完毕后,在build.gradle中引入依赖:

dependencies {
    compile 'com.android.support:design:22.2.0'
}

Navigation Drawer结构

假设现在已经新建好MainActivity,对应的布局文件为activity_main.xml,首先我们编辑activity_main.xml

<?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"
    android:id="@+id/drawer_layout"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view"/>

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

其中android.support.v4.widget.DrawerLayout是整体的布局,它包含的android.support.design.widget.NavigationView也就是从左向右滑动的Drawer,相比于在Android M之前我们都必须自己来实现Drawer中的布局,android.support.design.widget.NavigationView为我们提供了一种更简洁的方式——app:headerLayoutapp:menu能够分别定义Drawer中的上下两块布局。

headerLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:background="?attr/colorPrimaryDark"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:orientation="vertical"
    android:gravity="bottom">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Username"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

</LinearLayout>

上面代码描述的是layout/nav_header.xml的内容,它仅仅包含Drawer上面的紫色部分区域,中间有一个TextView显示Username。

导航菜单项

app:menu定义的则是Drawer下面部分的ListView显示各个导航选项,开发者完全不需要自己用代码实现它,只需要简单的在menu资源文件中定义好结构即可:

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_dashboard"
            android:title="Home" />
        <item
            android:id="@+id/nav_messages"
            android:icon="@drawable/ic_event"
            android:title="Messages" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/ic_headset"
            android:title="Friends" />
        <item
            android:id="@+id/nav_discussion"
            android:icon="@drawable/ic_forum"
            android:title="Discussion" />
    </group>

    <item android:title="Sub items">
        <menu>
            <item
                android:icon="@drawable/ic_dashboard"
                android:title="Sub item 1" />
            <item
                android:icon="@drawable/ic_forum"
                android:title="Sub item 2" />
        </menu>
    </item>

</menu>

menu中的每一个item就是导航菜单中的一项,它即可以定义名称title,也可以定义图标icon,使用起来非常方便。同时,还能够使用<group>标签进行分组,以及嵌套使用<menu>标签实现二级导航项。

运行效果

保存所有工作,并构建运行App。App启动后,竟然是一片空白?没关系,因为DrawerLayout中仅仅只包含了一个NavigationDrawer,主体内容区没有任何内容。所以当我们在屏幕的左侧向右滑动后,就可以看到一个美观、大方的抽屉浮动出来:

登录发表评论 注册

反馈意见