Material 3 Expressive実装例 : FAB menu

Material 3 Expressive の実装例の紹介シリーズです。
今回は新たに追加されたコンポーネントである FAB menu (Floating action bar menu)を紹介します。
(androidx.compose.material3:material3:1.4.0-alpha15 時点での内容になります。)

FAB menu とは

FAB から開き、画面上に 2～6 個の関連アクションを表示するコンポーネントです。
この menu は Extended FAB からは開かれない点に注意です。

実装

FloatingActionButtonMenu が標準で用意されています。
ここで使われる FAB は ToggleFloatingActionButton を使う形になります。
Menu 部分は FloatingActionButtonMenuItem を使います。

Scaffold(
    floatingActionButton = {
        var fabMenuExpanded by rememberSaveable { mutableStateOf(false) }

        BackHandler(fabMenuExpanded) { fabMenuExpanded = false }

        FloatingActionButtonMenu(
            expanded = fabMenuExpanded,
            button = {
                ToggleFloatingActionButton(
                    modifier = Modifier
                        .semantics {
                            traversalIndex = -1f
                            stateDescription = if (fabMenuExpanded) "Expanded" else "Collapsed"
                            contentDescription = "Toggle menu"
                        },
                    checked = fabMenuExpanded,
                    onCheckedChange = { fabMenuExpanded = !fabMenuExpanded }
                ) {
                    val icon by remember {
                        derivedStateOf {
                            if (checkedProgress > 0.5f) R.drawable.ic_close else R.drawable.ic_add
                        }
                    }
                    Icon(
                        painter = painterResource(icon),
                        contentDescription = null,
                        modifier = Modifier.animateIcon({ checkedProgress })
                    )
                }
            }
        ) {
            items.forEachIndexed { index, (icon, label) ->
                FloatingActionButtonMenuItem(
                    modifier = Modifier.semantics {
                        isTraversalGroup = true
                        if (index == items.size - 1) {
                            customActions =
                                listOf(
                                    CustomAccessibilityAction(
                                        label = "Close menu",
                                        action = {
                                            fabMenuExpanded = false
                                            true
                                        }
                                    )
                                )
                        }
                    },
                    onClick = { fabMenuExpanded = false },
                    icon = { Icon(painterResource(icon), contentDescription = null) },
                    text = { Text(text = label) },
                )
            }
        }
    }
) { ... }

FloatingActionButtonMenuItem はガイドラインで Shape は変更すべきでないとなっており、実際にコード上からも Shape を変更する引数は受け付けていません。