Android 深度实践

Appearance

停靠式工具栏 (Docked Toolbar) ​

源：Docked toolbar

停靠式工具栏提供了一种在页面底部展示与当前页面相关的操作的方式。

停靠式工具栏

建议说明

在 Material 3 的最新规范中，建议使用 Docked Toolbar 替代传统的 BottomAppBar。它高度更短，且布局更加灵活。

核心结构 (Anatomy) ​

结构图

  1. 容器 (Container) | 2. 元素 (Elements)

代码实现 ​

停靠式工具栏通常配合 OverflowLinearLayout 使用，以自动处理屏幕宽度不足时的溢出菜单。

xml
<com.google.android.material.dockedtoolbar.DockedToolbarLayout
    android:id="@+id/docked_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:layout_behavior="com.google.android.material.behavior.HideViewOnScrollBehavior">

    <!-- 使用 OverflowLinearLayout 处理溢出 -->
    <com.google.android.material.overflow.OverflowLinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal">

        <Button
            style="?attr/materialIconButtonStyle"
            app:icon="@drawable/ic_back"
            app:layout_overflowText="返回" />

        <Button
            style="?attr/materialIconButtonStyle"
            app:icon="@drawable/ic_add"
            app:layout_overflowText="添加项目" />

    </com.google.android.material.overflow.OverflowLinearLayout>

</com.google.android.material.dockedtoolbar.DockedToolbarLayout>

核心属性 ​

属性描述默认值
app:backgroundTint容器背景颜色?attr/colorSurfaceContainer
app:shapeAppearance容器形状直角 (0% rounded)
app:layout_behavior滚动行为 (如：滚动隐藏)无

变体样式 ​

  • Default: 标准样式，颜色较淡。
  • Vibrant: 鲜艳样式 (Widget.Material3.DockedToolbar.Vibrant)，使用 PrimaryContainer 颜色。