Jetpack Compose, Android • 17 Mei 2024

Jetpack Compose - IconButton

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

IconButton pada Jetpack Compose

IconButton adalah komponen UI di Jetpack Compose yang menampilkan sebuah ikon yang dapat ditekan untuk menanggapi interaksi pengguna. IconButton biasanya digunakan untuk aksi atau operasi yang terkait dengan ikon tertentu.

Kapan Harus Menggunakan IconButton:

Aksi atau Operasi dengan Ikon: IconButton cocok digunakan untuk aksi atau operasi yang terkait dengan ikon tertentu, seperti aksi cepat atau akses ke menu.

Perbedaan dengan Button, TextButton, dan OutlinedButton:

Button: Memiliki latar belakang berwarna dan biasanya digunakan untuk aksi utama dalam aplikasi.
TextButton: Teks yang dapat ditekan dengan latar belakang yang transparan atau tidak ada.
OutlinedButton: Memiliki border luar tanpa latar belakang.
IconButton: Ikon yang dapat ditekan dengan latar belakang yang transparan atau tidak ada.

Anda dapat menggunakan IconButton untuk menambahkan aksi interaktif dengan ikon dalam aplikasi Anda.

Parameter/Atribut

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
)

Parameter IconButton:

onClick: () -> Unit

Sebuah lambda yang akan dipanggil ketika pengguna mengklik IconButton. Anda harus menentukan aksi atau fungsi yang akan dijalankan ketika IconButton ditekan.

modifier: Modifier = Modifier

Modifier untuk menyesuaikan tampilan dan perilaku dari IconButton. Dengan menggunakan modifier, Anda dapat mengatur hal-hal seperti padding, margin, ukuran, warna latar belakang, dan tata letak dari IconButton.

enabled: Boolean = true

Menentukan apakah IconButton dapat digunakan atau tidak. Jika true, IconButton dapat ditekan (aktif). Jika false, IconButton tidak dapat ditekan (non-aktif).

colors: IconButtonColors = IconButtonDefaults.iconButtonColors()

Warna dari IconButton dalam berbagai keadaan, seperti warna ikon dan efek hover. Anda dapat menggunakan nilai bawaan IconButtonDefaults.iconButtonColors() atau menyediakan warna kustom sesuai kebutuhan desain aplikasi Anda.

interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }

Objek untuk menangani interaksi pengguna seperti sentuhan, klik, dan hover. Anda dapat menggunakan nilai bawaan MutableInteractionSource() atau menyediakan objek interaksi kustom.

content: @Composable () -> Unit

Lambda untuk mendefinisikan konten dari IconButton. Ini memungkinkan Anda untuk menambahkan komponen-komponen ke dalam IconButton, seperti ikon atau elemen UI lainnya, dan mengatur tata letak serta perilaku mereka dalam IconButton.

Contoh

@Composable
fun DemoIconButton(modifier: Modifier = Modifier) {
    IconButton(onClick = {
        Log.d("Tag", "DemoButton: The Ngoding")
    }) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
    }
}