Android JetpackCompose で TopAppBar
に入れるべく「メニューボタン」をどうするか。
こんな感じになりました。
今現在は、この Box
+ DropDownMenu
でいこうかと思っています。
以下記事から。
A DropdownMenu behaves similarly to a Popup, and will use the position of the parent layout to position itself on screen. Commonly a DropdownMenu will be placed in a Box with a sibling that will be used as the 'anchor'.
DropdownMenu は Popup と同様の動作をし、親レイアウトの位置を利用して画面上に配置されます。DropdownMenu
は「アンカー」として使用される兄弟を持つ Box に配置されます。
👉 android - Jetpack compose popup menu - Stack Overflow
@Composable
fun MenuButton() {
val context = LocalContext.current
var expanded by remember { mutableStateOf(false) }
Box {
IconButton(onClick = { expanded = true }) {
Icon(Icons.Filled.MoreVert, null)
}
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
) {
DropdownMenuItem(
onClick = {
expanded = false
context.startActivity(
Intent(Intent.ACTION_VIEW, Uri.parse("https://platform.openai.com/account/usage"))
)
}
) {
Text(text = "Usage")
}
Divider()
DropdownMenuItem(onClick = {
expanded = false
context.startActivity(
Intent(Intent.ACTION_VIEW, Uri.parse("https://platform.openai.com/docs/api-reference"))
)
}) {
Text(text = "API reference")
}
}
}
}
こんなところでしょうか。
TopAppBar
にセットするなら、以下のように action
へ。
TopAppBar(
title = { Text("Simple TopAppBar") },
navigationIcon = {
IconButton(onClick = { /* doSomething() */ }) {
Icon(Icons.Filled.Menu, contentDescription = null)
}
},
actions = {
MenuButton()
}
)
汎用性を上げるなら引数を考慮して、label
と action
のペアのリストを渡してループ、などするとよいです。
👉 DropdownMenu | androidx.compose.material | Android Developers