Kaydırma çubuğu

Slider composable'ı, kullanıcıların bir değer aralığından seçim yapmasına olanak tanır. Kullanıcının aşağıdakileri yapmasına olanak tanımak için kaydırma çubuğu kullanabilirsiniz:

  • Ses düzeyi ve parlaklık gibi bir değer aralığı kullanan ayarları düzenleme
  • Grafikteki verileri filtreleme (ör. fiyat aralığı belirleme)
  • Kullanıcı girişi (ör. yorumda puan verme)

Kaydırıcıda bir çubuk, tutma yeri, değer etiketi ve onay işaretleri bulunur:

  • Yol: Yol, kaydırıcının alabileceği değer aralığını temsil eden yatay çubuktur.
  • Kaydırma düğmesi: Kaydırma düğmesi, kaydırma çubuğu üzerinde bulunan ve kullanıcının, çubuk tarafından tanımlanan aralıkta belirli bir değer seçmesine olanak tanıyan sürüklenebilir bir kontrol öğesidir.
  • Ölçek çizgileri: Ölçek çizgileri, kaydırma çubuğunun yolu boyunca görünen isteğe bağlı görsel işaretler veya göstergelerdir.
Kaydırma düğmesi, iz ve onay işaretleri içeren bir kaydırma çubuğu.
Şekil 1. Kaydırma çubuğu uygulaması.

Temel uygulama

Tam API tanımı için Slider referansına bakın. Slider composable'ının temel parametrelerinden bazıları şunlardır:

  • value: Kaydırma çubuğunun mevcut değeri.
  • onValueChange: Değer her değiştiğinde çağrılan bir lambda.
  • enabled: Kullanıcının kaydırma çubuğuyla etkileşimde bulunup bulunamayacağını belirten bir Boole değeridir.

Aşağıdaki örnekte basit bir kaydırma çubuğu gösterilmektedir. Kullanıcının 0.0 ile 1.0 arasında bir değer seçmesine olanak tanır. Kullanıcı bu aralıktaki herhangi bir değeri seçebileceği için kaydırma çubuğu sürekli bir bileşendir.

@Preview
@Composable
fun SliderMinimalExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it }
        )
        Text(text = sliderPosition.toString())
    }
}

Bu uygulama aşağıdaki gibi görünür:

Değeri, çubuğun yaklaşık dörtte üçü olarak seçilmiş bir kaydırma çubuğu bileşeni.
Şekil 2. Kaydırma çubuğunun temel bir uygulaması.

Gelişmiş uygulama

Daha karmaşık bir kaydırma çubuğu uygularken aşağıdaki parametrelerden de yararlanabilirsiniz.

  • colors: Kaydırma çubuğunun renklerini kontrol etmenizi sağlayan bir SliderColors örneği.
  • valueRange: Kaydırma çubuğunun alabileceği değer aralığı.
  • steps: Kaydırma çubuğunda, kaydırıcının tutturulduğu çentik sayısı.

Aşağıdaki snippet, 0.0 ile 50.0 arasında üç adımlı bir kaydırma çubuğu uygular. Kaydırma çubuğu her adımda durduğu için ayrık bir kaydırma çubuğudur.

@Preview
@Composable
fun SliderAdvancedExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it },
            colors = SliderDefaults.colors(
                thumbColor = MaterialTheme.colorScheme.secondary,
                activeTrackColor = MaterialTheme.colorScheme.secondary,
                inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer,
            ),
            steps = 3,
            valueRange = 0f..50f
        )
        Text(text = sliderPosition.toString())
    }
}

Uygulama aşağıdaki gibi görünür:

0 ile 50 arasında bir aralığa sahip, eşit aralıklarla beş onay işareti gösteren özel bir kaydırma çubuğu. Kaydırma çubuğu, ikinci onay işaretinin yanında konumlandırılmış ve seçilen değerin 16 olduğunu gösteriyor.
Şekil 3. Adımları ve belirli bir değer aralığı olan kaydırma çubuğu.

Aralık kaydırma çubuğu

Özel RangeSlider composable'ını da kullanabilirsiniz. Bu sayede kullanıcı iki değer seçebilir. Bu, kullanıcının minimum ve maksimum fiyat seçmek istediği durumlarda yararlı olabilir.

Aşağıdaki örnek, sürekli aralık kaydırma çubuğunun nispeten basit bir örneğidir.

@Preview
@Composable
fun RangeSliderExample() {
    var sliderPosition by remember { mutableStateOf(0f..100f) }
    Column {
        RangeSlider(
            value = sliderPosition,
            steps = 5,
            onValueChange = { range -> sliderPosition = range },
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
                // viewModel.updateSelectedSliderValue(sliderPosition)
            },
        )
        Text(text = sliderPosition.toString())
    }
}

İki değerin seçildiği bir aralık kaydırma çubuğu bileşeni. Seçimin üst ve alt sınırlarını gösteren bir etiket görüntülenir.
Şekil 4. Aralık kaydırma çubuğu uygulaması.

Ek kaynaklar