Membuat penggeser untuk rentang nilai

Composable Slider memungkinkan pengguna membuat pilihan dari rentang nilai. Anda dapat menggunakan penggeser untuk mengizinkan pengguna melakukan hal berikut:

  • Sesuaikan setelan yang menggunakan rentang nilai, seperti volume, dan kecerahan.
  • Memfilter data dalam grafik, seperti saat menetapkan rentang harga.
  • Input pengguna, seperti menetapkan rating dalam ulasan.

Penggeser berisi jalur, thumb, label nilai, dan tanda centang:

  • Jalur: Jalur adalah batang horizontal yang mewakili rentang nilai yang dapat diambil penggeser.
  • Thumb: Thumb adalah elemen kontrol yang dapat ditarik pada penggeser yang memungkinkan pengguna memilih nilai tertentu dalam rentang yang ditentukan oleh jalur.
  • Tanda centang: Tanda centang adalah penanda atau indikator visual opsional yang muncul di sepanjang jalur penggeser.

Topik ini menunjukkan implementasi penggeser berikut:

Kompatibilitas versi

Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau yang lebih tinggi.

Dependensi

Membuat penggeser dasar

Contoh berikut adalah penggeser sederhana. Hal ini memungkinkan pengguna memilih nilai dari 0.0 hingga 1.0. Karena pengguna dapat memilih nilai apa pun dalam rentang tersebut, penggeser bersifat kontinu.

Hasil

Komponen penggeser dengan nilai yang dipilih kira-kira tiga perempat di sepanjang jalur.
Gambar 1. Implementasi dasar penggeser.

Membuat penggeser lanjutan

Cuplikan berikut menerapkan penggeser yang memiliki tiga langkah, dengan rentang dari 0.0 hingga 50.0. Karena tombol penggeser akan terkunci ke setiap langkah, penggeser ini diskret.

Hasil

Tulis teks alternatif Anda di sini
Gambar 2. Penggeser dengan langkah dan rentang nilai yang ditetapkan.

Penggeser rentang

Anda juga dapat menggunakan composable RangeSlider khusus. Hal ini memungkinkan pengguna memilih dua nilai. Hal ini dapat berguna dalam kasus seperti saat pengguna ingin memilih harga minimum dan maksimum.

Contoh berikut adalah contoh yang relatif mudah dari penggeser rentang berkelanjutan:

Hasil

Komponen penggeser rentang dengan dua nilai yang dipilih. Label menampilkan batas atas dan bawah pilihan.
Gambar 3. Implementasi penggeser rentang.

Poin utama

Lihat referensi Slider untuk mengetahui definisi API lengkap. Beberapa parameter utama untuk composable Slider adalah sebagai berikut:

  • value: Nilai penggeser saat ini.
  • onValueChange: Lambda yang dipanggil setiap kali nilai berubah.
  • enabled: Nilai boolean yang menunjukkan apakah pengguna dapat berinteraksi dengan penggeser.

Saat menerapkan penggeser yang lebih kompleks, Anda juga dapat menggunakan parameter berikut.

  • colors: Instance SliderColors yang memungkinkan Anda mengontrol warna penggeser.
  • valueRange: Rentang nilai yang dapat diambil penggeser.
  • steps: Jumlah takik pada penggeser yang ditekan ibu jari.

Anda juga dapat meneruskan Slider composable thumb dan track untuk menyesuaikan tampilan komponen secara lebih menyeluruh.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:

Pelajari cara fungsi composable dapat memudahkan Anda membuat komponen UI yang menarik berdasarkan sistem desain Desain Material.
Koleksi panduan cepat

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum (FAQ) dan pelajari panduan singkat atau hubungi kami dan beri tahu kami pendapat Anda.
Buka FAQ Berikan masukan