Jetpack Compose で３点ボタンのドロップダウンメニュー

成果物

今回は、Jetpack Compose で以下のようなものを作りたいと思います。

• 縦に３つ点の並んだアイコンを表示
  • MoreVert と言うらしいです
    • More read, vertical ??
• クリック時にそこからメニューを表示させる

写真

クリック時の挙動

環境

- build:gradle:7.0.4
- compose_version = '1.0.1'

実装

色々と頑張って作ったのですが、きちんとドキュメントに書いてありました。。。そのため説明は割愛します。。。

また、どんなアイコンが利用可能かは fonts.google.com をみると良いです。

// メニューの開閉をコントロールするため
var expanded by remember { mutableStateOf(false) }
Box(
    modifier = Modifier
        .wrapContentSize(Alignment.TopStart)
) {
    IconButton(
        onClick = {
            expanded = true
        }
    ) {
        Icon(
            Icons.Filled.MoreVert,
            contentDescription = Constants.DESCRIPTION_MORE_VERT_ICON,
            tint = MaterialTheme.colors.surface,
        )
    }
    DropdownMenu(
        modifier = Modifier
            .background(MaterialTheme.colors.background)
            // タップされた時の背景を円にする
            .clip(RoundedCornerShape(16.dp))
            .background(MaterialTheme.colors.onSurface),
        expanded = expanded,
        // メニューの外がタップされた時に閉じる
        onDismissRequest = { expanded = false }
    ) {
        DropdownMenuItem(
            onClick = {
                // Do something
            }
        ) {
            Text(
                text = "1",
                fontSize = 24.sp,
                color = Color.White,
            )
        }
        DropdownMenuItem(
            onClick = {}
        ) {
            Text(
                text = "2",
                fontSize = 24.sp,
                color = Color.White,
            )
        }
        DropdownMenuItem(
            onClick = {}
        ) {
            Text(
                text = "3",
                fontSize = 24.sp,
                color = Color.White,
            )
        }
    }
}

おわりに

Jetpack Compose で実装できる範囲が広がってきてとても楽しいです。

今後もできることが増えたら発信していけたらと思います！