Tombol tersegmentasi

Gunakan tombol tersegmentasi untuk memungkinkan pengguna memilih dari serangkaian opsi, secara berdampingan. Ada dua jenis tombol tersegmentasi:

• Tombol pilihan tunggal: Memungkinkan pengguna memilih satu opsi.
• Tombol multi-pilihan: Memungkinkan pengguna memilih antara dua dan lima item. Untuk pilihan yang lebih kompleks, atau lebih dari lima item, gunakan chip.

Gambar 1. Tombol pilihan tunggal (1) dan tombol multi-pilihan (2).

Platform API

Gunakan tata letak SingleChoiceSegmentedButtonRow dan MultiChoiceSegmentedButtonRow untuk membuat tombol tersegmentasi. Tata letak ini memosisikan dan mengukur SegmentedButton dengan benar, serta memiliki parameter utama berikut:

• space: Menyesuaikan tumpang-tindih antar-tombol.
• content: Berisi konten baris tombol tersegmentasi, yang biasanya berupa urutan SegmentedButton.

Membuat tombol tersegmentasi pilihan tunggal

Contoh ini menunjukkan cara membuat tombol tersegmentasi pilihan tunggal:

@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

Poin penting tentang kode

• Melakukan inisialisasi variabel selectedIndex menggunakan remember dan mutableIntStateOf untuk melacak indeks tombol yang dipilih.
• Menentukan daftar options yang mewakili label tombol.
• SingleChoiceSegmentedButtonRow memungkinkan Anda memilih hanya satu tombol.
• Membuat SegmentedButton untuk setiap opsi, di dalam loop forEachIndexed:
  • shape menentukan bentuk tombol berdasarkan indeksnya dan jumlah total opsi menggunakan SegmentedButtonDefaults.itemShape.
  • onClick memperbarui selectedIndex dengan indeks tombol yang diklik.
  • selected menetapkan status pilihan tombol berdasarkan selectedIndex.
  • label menampilkan label tombol menggunakan composable Text.

Hasil

Gambar 2. Tombol pilihan tunggal dengan satu opsi yang dipilih.

Membuat tombol tersegmentasi multi-pilihan

Contoh ini menunjukkan cara membuat tombol tersegmentasi multi-pilihan dengan ikon yang memungkinkan pengguna memilih beberapa opsi:

@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

Poin penting tentang kode

• Kode ini menginisialisasi variabel selectedOptions menggunakan remember dan mutableStateListOf. Tindakan ini akan melacak status yang dipilih dari setiap tombol.
• Kode ini menggunakan MultiChoiceSegmentedButtonRow untuk menampung tombol.
• Di dalam loop forEachIndexed, kode akan membuat SegmentedButton untuk setiap opsi:
  • shape menentukan bentuk tombol berdasarkan indeksnya dan jumlah total opsi.
  • checked menetapkan status tombol yang dicentang berdasarkan nilai yang sesuai di selectedOptions.
  • onCheckedChange mengalihkan status yang dipilih dari item yang sesuai di selectedOptions saat tombol diklik.
  • icon menampilkan ikon berdasarkan SegmentedButtonDefaults.Icon dan status tombol yang dicentang.
  • label menampilkan ikon yang sesuai dengan label, menggunakan composable Icon dengan vektor gambar dan deskripsi konten yang sesuai.

Hasil

Gambar 3. Tombol tersegmentasi multi-pilihan dengan dua opsi yang dipilih.

Referensi lainnya

• Material 3: Tombol tersegmentasi