セグメント化されたボタン

セグメント ボタンを使用すると、ユーザーは一連のオプションを並べて表示し、その中から選択できます。セグメント ボタンには次の 2 種類があります。

  • 単一選択ボタン: ユーザーが 1 つのオプションを選択できます。
  • 複数選択ボタン: ユーザーが 2 ～ 5 個のアイテムを選択できます。複雑な選択肢や 5 つを超えるアイテムの場合は、チップを使用します。
セグメント化されたボタン コンポーネントが表示されます。1 つ目のボタンでは 1 つの選択のみが可能ですが、2 つ目のボタンでは複数の選択が可能です。
図 1. 単一選択ボタン（1）と複数選択ボタン（2）。

API サーフェス

SingleChoiceSegmentedButtonRow レイアウトと MultiChoiceSegmentedButtonRow レイアウトを使用して、セグメント化されたボタンを作成します。これらのレイアウトは、SegmentedButton を正しい位置に配置して正しいサイズに設定し、次のキーパラメータを共有します。

  • space: ボタン間の重複を調整します。
  • content: 通常は SegmentedButton のシーケンスである、セグメント化されたボタン行のコンテンツが含まれます。

単一選択のセグメント化されたボタンを作成する

次の例は、単一選択のセグメント化されたボタンを作成する方法を示しています。

@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val options = listOf("Day", "Month", "Week")

    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex,
                label = { Text(label) }
            )
        }
    }
}
SegmentedButton.kt

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

  • remember と mutableIntStateOf を使用して selectedIndex 変数を初期化し、選択されたボタンのインデックスをトラッキングします。
  • ボタンラベルを表す options のリストを定義します。
  • SingleChoiceSegmentedButtonRow を使用すると、ボタンを 1 つだけ選択できます。
  • forEachIndexed ループ内で、各オプションの SegmentedButton を作成します。
    • shape は、インデックスと SegmentedButtonDefaults.itemShape を使用したオプションの合計数に基づいて、ボタンの形状を定義します。
    • onClick は、クリックされたボタンのインデックスで selectedIndex を更新します。
    • selected は、selectedIndex に基づいてボタンの選択状態を設定します。
    • label は Text コンポーザブルを使用してボタンラベルを表示します。

結果

[日]、[月]、[週] のオプションを含むセグメント化されたボタン コンポーネントが表示されます。現在、[日] オプションが選択されています。
図 2. 1 つのオプションが選択された単一選択ボタン。

複数選択のセグメント化されたボタンを作成する

この例では、ユーザーが複数のオプションを選択できるアイコン付きの多肢選択式セグメント ボタンを作成する方法を示します。

@Composable
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
    val selectedOptions = remember {
        mutableStateListOf(false, false, false)
    }
    val options = listOf("Walk", "Ride", "Drive")

    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                checked = selectedOptions[index],
                onCheckedChange = {
                    selectedOptions[index] = !selectedOptions[index]
                },
                icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },
                label = {
                    when (label) {
                        "Walk" -> Icon(
                            imageVector =
                            Icons.AutoMirrored.Filled.DirectionsWalk,
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsBus,
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsCar,
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}
SegmentedButton.kt

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

  • このコードでは、remember と mutableStateListOf を使用して selectedOptions 変数を初期化します。これにより、各ボタンの選択状態が追跡されます。
  • このコードでは、MultiChoiceSegmentedButtonRow を使用してボタンを格納しています。
  • forEachIndexed ループ内で、コードは各オプションの SegmentedButton を作成します。
    • shape は、インデックスとオプションの合計数に基づいてボタンの形状を定義します。
    • checked は、selectedOptions の対応する値に基づいてボタンのチェック状態を設定します。
    • onCheckedChange は、ボタンがクリックされたときに selectedOptions 内の対応するアイテムの選択状態を切り替えます。
    • icon は、SegmentedButtonDefaults.Icon とボタンのチェック状態に基づいてアイコンを表示します。
    • label は、適切な画像ベクトルとコンテンツの説明を含む Icon コンポーザブルを使用して、ラベルに対応するアイコンを表示します。

結果

[徒歩]、[自転車]、[車] のオプションを含むセグメント化されたボタン コンポーネントが表示されています。現在、[徒歩] と [乗車] のオプションが選択されています。
図 3. 2 つのオプションが選択された複数選択のセグメント ボタン。

参考情報