Skip to content

扩展悬浮按钮 (Extended FAB)

源:Extended FAB

扩展悬浮按钮 (Extended FAB) 是 FAB 的进阶版,它包含文本标签,可以提供更清晰的操作指向。

Extended FAB 示例


核心结构 (Anatomy)

结构图

  1. 容器 | 2. 文本标签 | 3. 图标 (可选)

代码实现

类名差异

ExtendedFloatingActionButton 实际上是 MaterialButton 的子类,而不是 FloatingActionButton 的子类。因此它的属性(如 app:icon)与 MaterialButton 一致。

xml
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:id="@+id/extendedFab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="开始撰写"
    app:icon="@drawable/ic_edit"
    app:layout_anchor="@id/recyclerView"
    app:layout_anchorGravity="bottom|end" />
kotlin
// 展开:显示图标和文字
extendedFab.extend()

// 折叠:只显示图标,变成圆形的 FAB
extendedFab.shrink()

最佳实践

自动缩放

一个常见的交互模式是:当列表向下滚动时调用 shrink(),当向上滚动或到达顶部时调用 extend()。这能平衡操作的可见性与内容的展示空间。


核心属性

属性描述默认值
app:icon按钮图标null
app:iconPadding图标与文字的间距12dp
app:collapsedSize折叠状态下的大小自动计算