滑动布局DrawerLayout

滑动菜单-DrawerLayout

滑动菜单可以说是Material Design中最常见的效果之一了， 在许多著名的应用（如Gmail、Google+等） 中， 都有滑动菜单的功能。 虽说这个功能看上去好像挺复杂的， 不过借助谷歌提供的各种工具， 我们可以很轻松地实现非常炫酷的滑动菜单效果。

所谓的滑动菜单就是将一些菜单选项隐藏起来， 而不是放置在主屏幕上， 然后可以通过滑动的方式将菜单显示出来。 这种方式既节省了屏幕空间， 又实现了非常好的动画效果， 是Material Design中推荐的做法。

谷歌提供了一个DrawerLayout控件， 借助这个控件， 实现滑动菜单简单又方便。

先来简单介绍一下DrawerLayout的用法吧。 首先它是一个布局， 在布局中允许放入两个直接子控件， 第一个子控件是主屏幕中显示的内容， 第二个子控件是滑动菜单中显示的内容。 因此，我们就可以对activity_main.xml中的代码做如下修改：

<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_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </FrameLayout>
    <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>Code language: HTML, XML (xml)

可以看到， 这里最外层的控件使用了DrawerLayout， 这个控件是由support-v4库提供的。DrawerLayout中放置了两个直接子控件， 第一个子控件是FrameLayout， 用于作为主屏幕中显示的内容， 当然里面还有我们刚刚定义的Toolbar。 第二个子控件这里使用了一个TextView， 用于作为滑动菜单中显示的内容， 其实使用什么都可以， DrawerLayout并没有限制只能使用固定的控件。

但是关于第二个子控件有一点需要注意， layout_gravity 这个属性是必须指定的， 因为我们需要告诉DrawerLayout滑动菜单是在屏幕的左边还是右边， 指定left表示滑动菜单在左边， 指定right表示滑动菜单在右边。 这里我指定了start， 表示会根据系统语言进行判断， 如果系统语言是从左往右的， 比如英语、 汉语， 滑动菜单就在左边， 如果系统语言是从右往左的， 比如阿拉伯语， 滑动菜单就在右边。