#iOS | #Android Fashion News

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