Android 深度实践

Appearance

FAB 菜单 (FAB Menu) ​

源：FAB menu

FAB 菜单允许一个悬浮操作按钮展开显示多个相关的辅助操作。

FAB 菜单示例

核心交互 ​

当用户点击主 FAB 时，菜单展开并显示子 FAB 列表，同时通常伴有遮罩层 (Scrim) 以突出显示操作。

代码实现 ​

xml
<com.google.android.material.floatingactionbutton.FloatingActionButtonMenu
    android:id="@+id/fabMenu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_child_1"
        style="?attr/floatingActionButtonSmallStyle"
        app:srcCompat="@drawable/ic_image"
        android:contentDescription="上传图片" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_main"
        app:srcCompat="@drawable/ic_add"
        android:contentDescription="添加" />

</com.google.android.material.floatingactionbutton.FloatingActionButtonMenu>

状态管理 ​

kotlin
// 展开菜单
fabMenu.open()

// 关闭菜单
fabMenu.close()

// 监听状态
fabMenu.addOnMenuStateChangedListener { isOpen ->
    // 响应菜单状态变化
}

最佳实践 ​

  • 限制数量: 子菜单建议不要超过 3-5 个项目。
  • 语义清晰: 主 FAB 在展开后通常会旋转 45 度（变成叉号）以表示关闭操作。