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

セグメント化されたボタンを使用すると、ユーザーが選択肢のセットから並べて選択できます。セグメント化されたボタンには次の 2 種類があります。

• 単一選択ボタン: ユーザーが 1 つのオプションを選択できるようにします。
• 複数選択ボタン: ユーザーが 2 ～ 5 個のアイテムを選択できます。選択肢が複雑な場合や、アイテムが 5 つを超える場合は、チップを使用します。

図 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 コンポーザブルを使用して、ラベルに対応するアイコンを表示します。

結果

図 2. 2 つのオプションが選択された複数選択セグメント ボタン。

参考情報

• マテリアル 3: セグメント化されたボタン