Android 中使用 Material Design 风格的 DrawerLayout 菜单详解

在 Android 应用开发中，DrawerLayout 是一个常用的布局控件，它可以实现侧边栏菜单的展示和隐藏。而在 Material Design 设计风格中，DrawerLayout 菜单的样式和交互方式得到了进一步优化和改进，更加符合用户体验的要求。本文将详细介绍 Android 中如何使用 Material Design 风格的 DrawerLayout 菜单，包括布局、样式、交互等方面的内容，帮助读者更好地掌握该控件的使用方法。

一、DrawerLayout 布局

DrawerLayout 是一个布局容器，它可以包含两个子 View，一个是主界面的内容，另一个是侧边栏菜单的内容。在布局中，我们可以使用如下的代码来定义 DrawerLayout：

// www.javascriptcn.com code example
<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">

    <!-- 主界面内容 -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 侧边栏菜单 -->
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#fff" />

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

在上述代码中，我们定义了一个 DrawerLayout 容器，其中包含了一个 FrameLayout 和一个 ListView。FrameLayout 用于显示主界面的内容，ListView 用于显示侧边栏菜单的内容。在 ListView 的布局中，我们使用了 android:layout_gravity 属性来指定菜单的位置，start 表示菜单从左侧滑出，end 表示菜单从右侧滑出。

二、DrawerLayout 样式

在 Material Design 中，DrawerLayout 的样式得到了进一步优化和改进，使得菜单的交互更加自然、流畅。其中，最重要的一个改进是引入了滑动手势，用户可以通过在屏幕上滑动手指来展开或隐藏侧边栏菜单。此外，菜单的样式和布局也得到了调整，更加符合 Material Design 的设计风格。

要实现 Material Design 风格的 DrawerLayout 样式，我们需要在 styles.xml 文件中定义一个主题，并在其中指定 DrawerLayout 的样式。具体代码如下：

// www.javascriptcn.com code example
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- ... -->

    <!-- Material Design 风格的 DrawerLayout 样式 -->
    <item name="android:drawerStyle">@style/DrawerLayoutStyle</item>
</style>

<style name="DrawerLayoutStyle">
    <item name="android:background">@android:color/white</item>
    <item name="android:elevation">20dp</item>
    <item name="android:fitsSystemWindows">true</item>
    <item name="android:paddingTop">24dp</item>
    <item name="android:paddingBottom">24dp</item>
    <item name="android:paddingStart">16dp</item>
    <item name="android:paddingEnd">16dp</item>
</style>

在上述代码中，我们定义了一个 DrawerLayoutStyle 的样式，用于指定 DrawerLayout 的样式。其中，android:background 属性用于设置菜单的背景色，android:elevation 属性用于设置菜单的高度，android:fitsSystemWindows 属性用于让菜单占据整个屏幕，android:paddingTop、android:paddingBottom、android:paddingStart、android:paddingEnd 属性则用于设置菜单的内边距。此外，我们还需要在主题中指定 android:drawerStyle 属性，将 DrawerLayout 的样式指定为我们刚刚定义的 DrawerLayoutStyle。

三、DrawerLayout 交互

在 Material Design 风格的 DrawerLayout 中，最重要的交互方式就是滑动手势。用户可以通过在屏幕上滑动手指，展开或隐藏侧边栏菜单。为了实现这一交互方式，我们需要在 Java 代码中添加如下的代码：

// www.javascriptcn.com code example
private ActionBarDrawerToggle mDrawerToggle;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // ...

    // 设置 DrawerLayout 滑动手势
    mDrawerToggle = new ActionBarDrawerToggle(
            this,                  // 当前 Activity
            mDrawerLayout,         // DrawerLayout 容器
            R.string.drawer_open,  // 打开菜单的描述
            R.string.drawer_close  // 关闭菜单的描述
    );
    mDrawerLayout.setDrawerListener(mDrawerToggle);
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    mDrawerToggle.onConfigurationChanged(newConfig);
}

在上述代码中，我们首先定义了一个 ActionBarDrawerToggle 对象，用于监听 DrawerLayout 的滑动手势。在 onCreate() 方法中，我们将 ActionBarDrawerToggle 对象作为参数传递给 DrawerLayout 容器，并设置打开和关闭菜单的描述。然后，我们调用 setDrawerListener() 方法，将 ActionBarDrawerToggle 对象设置为 DrawerLayout 容器的监听器。

在 onPostCreate() 和 onConfigurationChanged() 方法中，我们调用 ActionBarDrawerToggle 对象的 syncState() 和 onConfigurationChanged() 方法，以确保 DrawerLayout 的状态正确地同步到 ActionBar 中。

四、示例代码

最后，我们来看一下完整的示例代码，包括布局、样式、交互等方面的内容：

// www.javascriptcn.com code example
<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">

    <!-- 主界面内容 -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 侧边栏菜单 -->
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#fff" />

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

// www.javascriptcn.com code example
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- ... -->

    <!-- Material Design 风格的 DrawerLayout 样式 -->
    <item name="android:drawerStyle">@style/DrawerLayoutStyle</item>
</style>

<style name="DrawerLayoutStyle">
    <item name="android:background">@android:color/white</item>
    <item name="android:elevation">20dp</item>
    <item name="android:fitsSystemWindows">true</item>
    <item name="android:paddingTop">24dp</item>
    <item name="android:paddingBottom">24dp</item>
    <item name="android:paddingStart">16dp</item>
    <item name="android:paddingEnd">16dp</item>
</style>

// www.javascriptcn.com code example
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // 初始化 DrawerLayout
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

    // 设置 DrawerLayout 滑动手势
    mDrawerToggle = new ActionBarDrawerToggle(
            this,                  // 当前 Activity
            mDrawerLayout,         // DrawerLayout 容器
            R.string.drawer_open,  // 打开菜单的描述
            R.string.drawer_close  // 关闭菜单的描述
    );
    mDrawerLayout.setDrawerListener(mDrawerToggle);

    // 显示 ActionBar 左上角的菜单按钮
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    mDrawerToggle.onConfigurationChanged(newConfig);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // 处理 ActionBar 左上角的菜单按钮点击事件
    if (mDrawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

通过上述代码的学习，相信读者已经掌握了 Android 中使用 Material Design 风格的 DrawerLayout 菜单的方法和技巧，可以在实际应用开发中灵活应用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d14d5ca941bf71342bd8cb