Skip to content

悬浮工具栏 (Floating Toolbar)

源:Floating toolbar

悬浮工具栏提供了一种在页面内容上方显示操作的方式。它可以是水平或垂直排列的。

悬浮工具栏变体

变体对比

  1. Horizontal (水平型): 浮动在内容下方,适合放置常用操作。
  2. Vertical (垂直型): 浮动在侧边,适合大屏设备或编辑场景。

代码实现

悬浮工具栏本质上是一个 FrameLayout 的变体,通常配合 OverflowLinearLayout 使用。

xml
<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
    android:id="@+id/floatingToolbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center"
    android:layout_margin="16dp"
    style="?attr/floatingToolbarStyle">

    <com.google.android.material.overflow.OverflowLinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            style="?attr/materialIconButtonFilledStyle"
            app:icon="@drawable/ic_bold" />

        <Button
            style="?attr/materialIconButtonFilledStyle"
            app:icon="@drawable/ic_italic" />

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

</com.google.android.material.floatingtoolbar.FloatingToolbarLayout>

滚动行为

悬浮工具栏通常与内容列表联动,可以通过 layout_behavior 实现滚动隐藏。

xml
<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
    ...
    app:layout_behavior="com.google.android.material.behavior.HideViewOnScrollBehavior" />

核心属性

属性描述默认值
app:backgroundTint容器背景颜色?attr/colorSurfaceContainer
app:shapeAppearance容器形状50% 全圆角 (Pill)

视觉风格

  • Standard: 使用 Surface 颜色。
  • Vibrant: 鲜艳样式 (Widget.Material3.FloatingToolbar.Vibrant),使用 PrimaryContainer 颜色。