メニュー

プルダウン メニューを使用すると、ユーザーはアイコン、テキスト フィールド、その他のコンポーネントをクリックして、一時的なサーフェス上のオプションのリストから選択できます。このガイドでは、基本的なメニューと、ディバイダとアイコンを使用したより複雑なメニューの両方を作成する方法について説明します。

2 つのオプションが表示されたプルダウン メニュー。縦に 3 つ並んだ点のアイコンは、クリックするとメニューが開くことを示します。
図 1. 2 つの項目がリスト表示された基本的なプルダウン メニュー。

API サーフェス

DropdownMenu、DropdownMenuItem、IconButton コンポーネントを使用して、カスタム プルダウン メニューを実装します。DropdownMenu コンポーネントと DropdownMenuItem コンポーネントはメニュー項目の表示に使用され、IconButton はプルダウン メニューの表示と非表示のトリガーです。

DropdownMenu コンポーネントの主なパラメータは次のとおりです。

  • expanded: メニューが表示されるかどうかを示します。
  • onDismissRequest: メニューの閉じを処理するために使用されます。
  • content: メニューのコンポーザブル コンテンツ。通常は DropdownMenuItem コンポーザブルが含まれています。

DropdownMenuItem の主なパラメータは次のとおりです。

  • text: メニュー項目に表示されるコンテンツを定義します。
  • onClick: メニュー内のアイテムの操作を処理するコールバック。

基本的なプルダウン メニューを作成する

次のスニペットは、最小限の DropdownMenu 実装を示しています。

@Composable
fun MinimalDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(
                text = { Text("Option 1") },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Option 2") },
                onClick = { /* Do something... */ }
            )
        }
    }
}
Menus.kt

コードに関する主なポイント

  • 2 つのメニュー項目を含む基本的な DropdownMenu を定義します。
  • expanded パラメータは、メニューの表示状態（展開または閉じている）を制御します。
  • onDismissRequest パラメータは、ユーザーがメニューを閉じたときに実行されるコールバックを定義します。
  • DropdownMenuItem コンポーザブルは、プルダウン メニューで選択可能な項目を表します。
  • IconButton は、メニューの展開と閉じをトリガーします。

結果

縦に 3 つ並んだ点のアイコンで開くプルダウン メニュー。メニューに、選択可能な 2 つのオプション（オプション 1 とオプション 2）が表示されます。
図 2. オプションが 2 つしかない最小限のプルダウン メニュー。

長いプルダウン メニューを作成する

すべてのメニュー項目を一度に表示できない場合、DropdownMenu はデフォルトでスクロール可能になります。次のスニペットは、長くてスクロール可能なプルダウン メニューを作成します。

@Composable
fun LongBasicDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    // Placeholder list of 100 strings for demonstration
    val menuItemData = List(100) { "Option ${it + 1}" }

    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            menuItemData.forEach { option ->
                DropdownMenuItem(
                    text = { Text(option) },
                    onClick = { /* Do something... */ }
                )
            }
        }
    }
}
Menus.kt

コードに関する主なポイント

  • コンテンツの合計高さが使用可能なスペースを超えると、DropdownMenu はスクロール可能になります。このコードは、100 個のプレースホルダ アイテムを表示するスクロール可能な DropdownMenu を作成します。
  • forEach ループは、DropdownMenuItem コンポーザブルを動的に生成します。アイテムは遅延作成されません。つまり、100 個のプルダウン アイテムがすべて作成され、コンポジション内に存在します。
  • IconButton は、クリックされたときに DropdownMenu の展開と閉じをトリガーします。
  • 各 DropdownMenuItem 内の onClick ラムダを使用すると、ユーザーがメニュー項目を選択したときに実行されるアクションを定義できます。

結果

上記のコード スニペットにより、次のスクロール可能なメニューが生成されます。

多くのオプションがあるプルダウン メニュー。すべての項目を表示するにはスクロールする必要があります。
図 3. 長いスクロール可能なプルダウン メニュー。

ディバイダを使用して長いプルダウン メニューを作成する

次のスニペットは、プルダウン メニューの高度な実装を示しています。このスニペットでは、先頭と末尾のアイコンがメニュー項目に追加され、分割線によってメニュー項目のグループが区切られています。

@Composable
fun DropdownMenuWithDetails() {
    var expanded by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            // First section
            DropdownMenuItem(
                text = { Text("Profile") },
                leadingIcon = { Icon(Icons.Outlined.Person, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Settings") },
                leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Second section
            DropdownMenuItem(
                text = { Text("Send Feedback") },
                leadingIcon = { Icon(Icons.Outlined.Feedback, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.Send, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Third section
            DropdownMenuItem(
                text = { Text("About") },
                leadingIcon = { Icon(Icons.Outlined.Info, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Help") },
                leadingIcon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.OpenInNew, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
        }
    }
}
Menus.kt

このコードは、Box 内に DropdownMenu を定義します。

コードに関する主なポイント

  • leadingIcon パラメータと trailingIcon パラメータは、DropdownMenuItem の開始点と終了点にアイコンを追加します。
  • IconButton はメニューの展開をトリガーします。
  • DropdownMenu には、選択可能なアクションを表す複数の DropdownMenuItem コンポーザブルが含まれています。
  • HorizontalDivider コンポーザブルは、水平線を挿入してメニュー項目のグループを分離します。

結果

上記のスニペットでは、アイコンと分割線を含むプルダウン メニューが生成されます。

[プロフィール]、[設定]、[フィードバックを送信]、[概要]、
図 4. 先頭と末尾にアイコンが付いたセクションに分割されたプルダウン メニュー。

参考情報