Kaydırma çubuğu

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

  • Ses ve parlaklık gibi bir değer aralığı kullanan ayarları düzenleyin.
  • Fiyat aralığı belirlerken olduğu gibi, grafikteki verileri filtreleme
  • Kullanıcı girişi (ör. yorumda puan verme)

Kaydırma çubuğu; iz, başparmak, değer etiketi ve işaretler içerir:

  • Parça: Parça, kaydırıcının alabileceği değer aralığını temsil eden yatay çubuktur.
  • Başparmak: Başparmak, kaydırıcı üzerinde sürükleyebileceğiniz bir kontrol öğesidir. Kullanıcı, bu öğe sayesinde iz tarafından tanımlanan aralıkta belirli bir değer seçebilir.
  • Onay işaretleri: Onay işaretleri, kaydırma çubuğunun yolu boyunca görünen isteğe bağlı görsel işaretler veya göstergelerdir.
Başparmak, parça ve onay işaretleri içeren bir kaydırma çubuğu.
1. Şekil. Kaydırma çubuğu uygulaması.

Temel uygulama

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

  • value: Kaydırma çubuğunun geçerli 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şime girip giremeyeceğini belirten bir Boole değeri.

Aşağıdaki örnekte basit bir kaydırma çubuğu gösterilmektedir. Bu, 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çebildiğinden kaydırma çubuğu sürekli olur.

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

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

Parça boyunca yaklaşık dörtte üçü seçilmiş bir değer içeren kaydırma çubuğu bileşeni.
Şekil 2. Kaydırma çubuğunun temel 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, başparmağın oturduğu çentik sayısı.

Aşağıdaki snippet, 0.0 ile 50.0 arasında bir aralığa sahip üç adımlı bir kaydırma çubuğu uygular. Başparmak her adıma oturduğu için bu kaydırma çubuğu ayrıktır.

@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())
    }
}
Slider.kt

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

0 ile 50 arasında değişen ve eşit aralıklarla beş onay işareti gösteren özel bir kaydırma çubuğu. Başparmak, ikinci işaretin yakınına yerleştirilmiş. Bu, 16'lık bir seçimi gösteriyor.
3.şekil Adımları ve ayarlanmış bir değer aralığı olan kaydırma çubuğu.

Aralık kaydırma çubuğu

Ayrıca özel RangeSlider composable'ı da kullanabilirsiniz. Bu, kullanıcının iki değer seçmesine olanak tanır. Bu, kullanıcının minimum ve maksimum fiyat seçmek istediği gibi durumlarda faydalı 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())
    }
}
Slider.kt

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

Ek kaynaklar