メニュー

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

図 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 は、メニューの展開と折りたたみをトリガーします。

結果

図 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. 先頭アイコンと末尾アイコンを含むセクションに分割されたプルダウン メニュー。

参考情報

• マテリアル デザイン: メニュー