Segmentlere ayrılmış düğme

Kullanıcıların yan yana bir dizi seçenek arasından seçim yapmasına olanak tanımak için segmentli düğme kullanın. İki tür segmentlenmiş düğme vardır:

• Tek seçim düğmesi: Kullanıcıların tek bir seçenek belirlemesine olanak tanır.
• Çoklu seçim düğmesi: Kullanıcıların iki ila beş öğe arasında seçim yapmasına olanak tanır. Daha karmaşık seçimler veya beşten fazla öğe için çipleri kullanın.

1. Şekil. Tekli seçim düğmesi (1) ve çoklu seçim düğmesi (2).

API yüzeyi

Segmentli düğmeler oluşturmak için SingleChoiceSegmentedButtonRow ve MultiChoiceSegmentedButtonRow düzenlerini kullanın. Bu düzenler, SegmentedButtons doğru şekilde konumlandırıp boyutlandırır ve aşağıdaki temel parametreleri paylaşır:

• space: Düğmeler arasındaki çakışmayı ayarlar.
• content: Segmentli düğme satırının içeriğini içerir. Bu içerik genellikle SegmentedButton dizisidir.

Tek seçimlik segmentli düğme oluşturma

Bu örnekte, tek seçimlik bir segment düğmesinin nasıl oluşturulacağı gösterilmektedir:

@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

Kodla ilgili önemli noktalar

• Seçilen düğme dizinini izlemek için remember ve mutableIntStateOf kullanarak bir selectedIndex değişkenini başlatır.
• Düğme etiketlerini temsil eden options listesini tanımlar.
• SingleChoiceSegmentedButtonRow yalnızca bir düğme seçmenize olanak tanır.
• forEachIndexed döngüsünde her seçenek için bir SegmentedButton oluşturur:
  • shape, SegmentedButtonDefaults.itemShape kullanılarak düğmenin şeklini dizinine ve toplam seçenek sayısına göre tanımlar.
  • Tıklanan düğmenin diziniyle onClick güncellenir. selectedIndex
  • selected, düğmenin seçim durumunu selectedIndex'ye göre ayarlar.
  • label, Text composable'ını kullanarak düğme etiketini gösterir.

Sonuç

Şekil 2. Tek bir seçeneğin belirlendiği tek seçimli düğme.

Çoklu seçim yapılabilen segmentli düğme oluşturma

Bu örnekte, kullanıcıların birden fazla seçenek belirlemesine olanak tanıyan simgeler içeren çoktan seçmeli bir segment düğmesinin nasıl oluşturulacağı gösterilmektedir:

@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

Kodla ilgili önemli noktalar

• Kod, remember ve mutableStateListOf kullanarak selectedOptions değişkenini başlatır. Bu işlev, her düğmenin seçili durumunu izler.
• Kod, düğmeleri içermek için MultiChoiceSegmentedButtonRow kullanır.
• forEachIndexed döngüsünde kod, her seçenek için bir SegmentedButton oluşturur:
  • shape, düğmenin şeklini dizinine ve toplam seçenek sayısına göre tanımlar.
  • checked, düğmenin işaretli durumunu selectedOptions içindeki ilgili değere göre ayarlar.
  • onCheckedChange düğmesi tıklandığında selectedOptions içindeki ilgili öğenin seçili durumunu değiştirir.
  • icon, SegmentedButtonDefaults.Icon ve düğmenin işaretli durumuna göre bir simge gösterir.
  • label, uygun resim vektörleri ve içerik açıklamaları içeren Icon composable'larını kullanarak etikete karşılık gelen bir simge gösterir.

Sonuç

3. şekil. İki seçeneğin belirlendiği çoklu seçim segmentli düğme.

Ek kaynaklar

• Material 3: Segmentli düğmeler