Tombol ikon

Tombol ikon menampilkan tindakan yang dapat dilakukan pengguna. Tombol ikon harus menggunakan ikon dengan makna yang jelas, dan biasanya mewakili tindakan umum atau yang sering digunakan.

Ada dua jenis tombol ikon:

• Default: Tombol ini dapat membuka elemen lain, seperti menu atau penelusuran.
• Tombol alih: Tombol ini dapat mewakili tindakan biner yang dapat diaktifkan atau dinonaktifkan, seperti "favorit" atau "bookmark".

Gambar 1. Tombol ikon, beberapa di antaranya diisi (menunjukkan pilihan) dan digarisbatasi.

Platform API

Gunakan composable IconButton untuk menerapkan tombol ikon standar. Untuk membuat gaya visual yang berbeda seperti diisi, diisi tonal, atau digarisbatasi, gunakan FilledIconButton, FilledTonalIconButton, dan OutlinedIconButton.

Parameter utama untuk IconButton mencakup:

• onClick: Fungsi lambda yang dijalankan saat pengguna mengetuk tombol ikon.
• enabled: Boolean yang mengontrol status tombol yang diaktifkan. Jika false, tombol tidak akan merespons input pengguna.
• content: Konten composable di dalam tombol, biasanya Icon.

Contoh dasar: Tombol ikon tombol

Contoh ini menunjukkan cara menerapkan tombol ikon tombol. Tombol ikon tombol akan mengubah tampilannya berdasarkan apakah tombol tersebut dipilih atau tidak dipilih.

@Preview
@Composable
fun ToggleIconButtonExample() {
    // isToggled initial value should be read from a view model or persistent storage.
    var isToggled by rememberSaveable { mutableStateOf(false) }

    IconButton(
        onClick = { isToggled = !isToggled }
    ) {
        Icon(
            painter = if (isToggled) painterResource(R.drawable.favorite_filled) else painterResource(R.drawable.favorite),
            contentDescription = if (isToggled) "Selected icon button" else "Unselected icon button."
        )
    }
}
IconButton.kt

Poin-poin penting tentang kode

• Composable ToggleIconButtonExample menentukan IconButton yang dapat diaktifkan.
  • mutableStateOf(false) membuat objek MutableState yang menyimpan nilai boolean, awalnya false. Hal ini menjadikan isToggled sebagai holder status, yang berarti Compose mengomposisi ulang UI setiap kali nilainya berubah.
  • rememberSaveable memastikan status isToggled tetap ada di seluruh perubahan konfigurasi, seperti rotasi layar.
• Lambda onClick dari IconButton menentukan perilaku tombol saat diklik, yang mengalihkan status antara true dan false.
• Parameter painter composable Icon memuat painterResource yang berbeda secara kondisional berdasarkan status isToggled. Tindakan ini akan mengubah tampilan visual ikon.
  • Jika isToggled adalah true, kode ini akan memuat drawable hati yang terisi.
  • Jika isToggled adalah false, isToggled akan memuat drawable hati yang digarisbatasi.
• contentDescription dari Icon juga diperbarui berdasarkan status isToggled untuk memberikan informasi aksesibilitas yang sesuai.

Hasil

Gambar berikut menampilkan tombol ikon tombol dari cuplikan sebelumnya dalam status yang tidak dipilih:

Gambar 2. Tombol ikon tombol "favorit" dalam status tidak dipilih.

Contoh lanjutan: Tindakan berulang saat ditekan

Bagian ini menunjukkan cara membuat tombol ikon yang terus memicu tindakan saat pengguna menekan dan menahannya, bukan hanya memicu sekali per klik.

@Composable
fun MomentaryIconButton(
    unselectedImage: Int,
    selectedImage: Int,
    contentDescription: String,
    modifier: Modifier = Modifier,
    stepDelay: Long = 100L, // Minimum value is 1L milliseconds.
    onClick: () -> Unit
) {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()
    val pressedListener by rememberUpdatedState(onClick)

    LaunchedEffect(isPressed) {
        while (isPressed) {
            delay(stepDelay.coerceIn(1L, Long.MAX_VALUE))
            pressedListener()
        }
    }

    IconButton(
        modifier = modifier,
        onClick = onClick,
        interactionSource = interactionSource
    ) {
        Icon(
            painter = if (isPressed) painterResource(id = selectedImage) else painterResource(id = unselectedImage),
            contentDescription = contentDescription,
        )
    }
}
IconButton.kt

Poin-poin penting tentang kode

• MomentaryIconButton menggunakan unselectedImage: Int, ID resource drawable untuk ikon saat tombol tidak ditekan, dan selectedImage: Int, ID resource drawable untuk ikon saat tombol ditekan.
• Fungsi ini menggunakan interactionSource untuk melacak interaksi "tekan" secara khusus dari pengguna.
• isPressed bernilai benar jika tombol ditekan secara aktif dan salah jika tidak. Jika isPressed adalah true, LaunchedEffect akan memasuki loop.
  • Di dalam loop ini, loop menggunakan delay (dengan stepDelay) untuk membuat jeda di antara tindakan pemicu. coerceIn memastikan penundaan minimal 1 md untuk mencegah loop tanpa henti.
  • pressedListener dipanggil setelah setiap penundaan dalam loop. Tindakan ini akan membuat tindakan diulang.
• pressedListener menggunakan rememberUpdatedState untuk memastikan bahwa lambda onClick (tindakan yang akan dilakukan) selalu yang terbaru dari komposisi terbaru.
• Icon mengubah gambar yang ditampilkan berdasarkan apakah tombol saat ini ditekan atau tidak.
  • Jika isPressed bernilai benar, selectedImage akan ditampilkan.
  • Jika tidak, unselectedImage akan ditampilkan.

Selanjutnya, gunakan MomentaryIconButton ini dalam contoh. Cuplikan berikut menunjukkan dua tombol ikon yang mengontrol penghitung:

@Preview()
@Composable
fun MomentaryIconButtonExample() {
    var pressedCount by remember { mutableIntStateOf(0) }

    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        MomentaryIconButton(
            unselectedImage = R.drawable.fast_rewind,
            selectedImage = R.drawable.fast_rewind_filled,
            stepDelay = 100L,
            onClick = { pressedCount -= 1 },
            contentDescription = "Decrease count button"
        )
        Spacer(modifier = Modifier)
        Text("advanced by $pressedCount frames")
        Spacer(modifier = Modifier)
        MomentaryIconButton(
            unselectedImage = R.drawable.fast_forward,
            selectedImage = R.drawable.fast_forward_filled,
            contentDescription = "Increase count button",
            stepDelay = 100L,
            onClick = { pressedCount += 1 }
        )
    }
}
IconButton.kt

Poin-poin penting tentang kode

• Composable MomentaryIconButtonExample menampilkan Row yang berisi dua instance MomentaryIconButton dan composable Text untuk mem-build UI guna menambahkan dan mengurangi penghitung.
• Fungsi ini mempertahankan variabel status pressedCount yang dapat diubah menggunakan remember dan mutableIntStateOf, yang diinisialisasi ke 0. Saat pressedCount berubah, setiap composable yang mengamatinya (seperti composable Text) akan merekomposisi untuk mencerminkan nilai baru.
• MomentaryIconButton pertama akan mengurangi pressedCount saat diklik atau ditahan.
• MomentaryIconButton kedua akan meningkatkan pressedCount saat diklik atau dipegang.
• Kedua tombol menggunakan stepDelay 100 milidetik, yang berarti tindakan onClick diulang setiap 100 md saat tombol ditekan.

Hasil

Video berikut menampilkan UI dengan tombol ikon dan penghitung:

Gambar 3. UI penghitung dengan dua tombol ikon (plus dan minus) yang menambah dan mengurangi penghitung.

Referensi lainnya

• Material 3 - Tombol ikon