Segmentlere ayrılmış düğme

Kullanıcıların bir dizi seçenek arasından yan yana seçim yapmasına izin vermek için segmentli bir düğme kullanın. İki tür segmentli 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.
Segmentlere ayrılmış bir düğme bileşeni gösterilir. İlk düğme tek bir seçime, ikinci düğme ise birden fazla seçime izin verir.
Şekil 1. Tekli seçim düğmesi (1) ve çoklu seçim düğmesi (2).

API yüzeyi

Segmentlere ayrılmış düğmeler oluşturmak için SingleChoiceSegmentedButtonRow ve MultiChoiceSegmentedButtonRow düzenlerini kullanın. Bu düzenler, SegmentedButton'ların doğru şekilde konumlandırılmasını ve boyutlandırılmasını sağlar ve aşağıdaki temel parametreleri paylaşır:

  • space: Düğmeler arasındaki örtüşmeyi ayarlar.
  • content: Segmentlere ayrılmış düğme satırının içeriğini içerir. Bu içerik genellikle SegmentedButton'lardan oluşan bir sıradır.

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

Bu örnekte, tek seçimli segmentli bir düğmenin 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

  • Geçerli olarak seçili düğme dizesini izlemek için remember ve mutableIntStateOf kullanarak bir selectedIndex değişkeni başlatır.
  • Düğme etiketlerini temsil eden options öğelerinin listesini tanımlar.
  • SingleChoiceSegmentedButtonRow, yalnızca bir düğmenin seçilmesini sağlar.
  • forEachIndexed döngüsü içinde her seçenek için bir SegmentedButton oluşturur:
    • shape, SegmentedButtonDefaults.itemShape kullanarak düğmenin şeklini dizine ve seçeneklerin toplam sayısına göre tanımlar.
    • onClick, tıklanan düğmenin dizini ile selectedIndex değerini günceller.
    • selected, düğmenin seçim durumunu selectedIndex'a göre ayarlar.
    • label, Text bileşenini kullanarak düğme etiketini gösterir.

Sonuç

Gün, Ay ve Hafta seçeneklerini içeren segmentlere ayrılmış bir düğme bileşeni gösterilir. Şu anda Gün seçeneği seçili.
Şekil 2. 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 simgelerle çoklu seçim segmentli düğmenin 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, selectedOptions değişkenini remember ve mutableStateListOf kullanarak başlatır. Bu, her düğmenin seçili durumunu izler.
  • Kodda, düğmeleri içeren MultiChoiceSegmentedButtonRow kullanılır.
  • forEachIndexed döngüsü içinde kod, her seçenek için bir SegmentedButton oluşturur:
    • shape, düğmenin şeklini dizine ve toplam seçenek sayısına göre tanımlar.
    • checked, selectedOptions içindeki ilgili değere göre düğmenin işaretli durumunu ayarlar.
    • onCheckedChange, düğme tıklandığında selectedOptions içindeki ilgili öğenin seçili durumunu değiştirir.
    • icon, SegmentedButtonDefaults.Icon'a 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ı kullanarak etikete karşılık gelen bir simge gösterir.

Sonuç

Yürüyüş, Bisiklet ve Araba seçeneklerini içeren segmentli bir düğme bileşeni gösterilir. Şu anda Yürüyüş ve Bisiklet seçenekleri seçili.
Şekil 2. İki seçeneğin belirlendiği çoklu seçim segmentli düğme.

Ek kaynaklar