Segmentlere ayrılmış düğme

Kullanıcıların yan yana gösterilen seçenekler arasından seçim yapmasına olanak tanımak için segmentlere ayrılmış düğme kullanın. İki tür segmentlere ayrılmış düğme vardır:

  • Tek seçim düğmesi: Kullanıcıların 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 çipler kullanın.
Segmentlere ayrılmış düğme bileşeni gösteriliyor. İlk düğme tek bir seçim yapılmasına izin verirken ikinci düğme birden fazla seçim yapılmasına olanak tanır.
Ş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, SegmentedButtons öğelerini 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: Parçalı düğme satırının içeriğini barındırır. Bu içerik genellikle bir SegmentedButton dizisidir.

Tek seçimli segmentlere ayrılmış düğme oluşturma

Bu örnekte, tek seçimli segmentlere ayrılmış 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) }
            )
        }
    }
}

Kodla ilgili önemli noktalar

  • Seçilen düğme dizinini izlemek için remember ve mutableIntStateOf kullanarak bir selectedIndex değişkeni başlatır.
  • Düğme etiketlerini temsil eden bir options listesi tanımlar.
  • SingleChoiceSegmentedButtonRow yalnızca bir düğme seçmenize olanak tanır.
  • forEachIndexed döngüsünün içinde her seçenek için bir SegmentedButton oluşturur:
    • shape, SegmentedButtonDefaults.itemShape kullanarak düğmenin şeklini dizinine ve toplam seçenek sayısına göre tanımlar.
    • onClick, tıklanan düğmenin diziniyle selectedIndex değerini günceller.
    • selected, düğmenin seçim durumunu selectedIndex değerine göre ayarlar.
    • label, Text composable'ını 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österiliyor. Şu anda Gün seçeneği belirlidir.
Şekil 2. Tek bir seçeneğin belirlendiği tekli seçim düğmesi.

Çoklu seçim segmentli düğmesi oluşturma

Bu örnekte, kullanıcıların birden fazla seçenek belirlemesine olanak tanıyan simgeler içeren çoktan seçmeli bir segmentlere ayrılmış 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(
                            painter = rememberVectorPainter(AppIcons.DirectionsWalk),
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            painter = rememberVectorPainter(AppIcons.DirectionsBus),
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            painter = rememberVectorPainter(AppIcons.DirectionsCar),
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}

Kodla ilgili önemli noktalar

  • Kod, remember ve mutableStateListOf kullanarak selectedOptions değişkenini başlatır. Bu, 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.
    • Düğme tıklandığında onCheckedChange, 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ü, Sür ve Sürüş seçeneklerini içeren parçalı bir düğme bileşeni gösterilir. Yürüme ve Sürüş seçenekleri belirlenmiş.
Şekil 3. İki seçeneğin belirlendiği çoklu seçim segmentli düğme.

Ek kaynaklar