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.
Segmentli bir düğme bileşeni gösterilir. İlk düğme tek seçime, ikinci düğme ise birden fazla seçime izin verir.
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ç

Gün, Ay ve Hafta seçeneklerinin bulunduğu bir segment düğmesi bileşeni gösterilir. Şu anda Gün seçeneği belirlenmiş durumda.
Şekil 2. Tek bir seçeneğin belirlendiği tek seçimli düğme.

Çoklu seçim 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üğme 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ç

Yürüyüş, Bisiklet ve Araba seçeneklerinin bulunduğu segmentli bir düğme bileşeni gösteriliyor. Yürüyüş ve yolculuk seçenekleri şu anda seçili.
3. şekil. İki seçeneğin belirlendiği çoklu seçim segmentli düğme.

Ek kaynaklar