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

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

  • 単一選択ボタン: ユーザーが 1 つのオプションを選択できるようにします。
  • 複数選択ボタン: ユーザーが 2 ～ 5 個のアイテムを選択できるようにします。選択肢が複雑な場合や、アイテムが 5 つを超える場合は、チップを使用します。
セグメント化されたボタン コンポーネントが表示されます。最初のボタンは 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 コンポーザブルを使用して、ラベルに対応するアイコンを表示します。

結果

ウォーキング、乗車、ドライブのオプションが設定されたセグメント化されたボタン コンポーネントが表示されています。現在、徒歩と乗車のオプションが選択されています。
図 2. 2 つのオプションが選択された複数選択セグメント ボタン。

参考情報