Tugas 4: Membuat Aplikasi Dice Roller

Jetpack Compose, sebagai toolkit UI modern untuk Android, beroperasi pada paradigma deklaratif. Artinya, kita mendeskripsikan tampilan UI untuk state tertentu, dan Compose akan menanganinya secara otomatis saat state berubah. Aplikasi pengocok dadu (dice roller) adalah contoh sempurna untuk membedah konsep fundamental ini dalam praktik.

Dalam analisis ini, kita akan mempelajari kode aplikasi pengocok dadu untuk memahami bagaimana manajemen state, penanganan event, dan animasi sederhana bekerja secara harmonis di Jetpack Compose.

Struktur Aplikasi

Titik masuk aplikasi ada di MainActivity, yang mengatur tema dan memanggil composable utama, DiceRollerApp.

@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(
        modifier = Modifier
            .fillMaxSize()
            .wrapContentSize(Alignment.Center)
    )
}
        

Composable DiceRollerApp ini berfungsi sebagai wadah penataan letak. Ia menggunakan Modifier.fillMaxSize() untuk memenuhi seluruh layar dan .wrapContentSize(Alignment.Center) untuk memposisikan kontennya, yaitu DiceWithButtonAndImage, tepat di tengah layar.

Komponen Inti: DiceWithButtonAndImage

Di sinilah seluruh logika dan elemen UI aplikasi berada. Mari kita analisis bagian-bagian utamanya.

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var result by remember { mutableIntStateOf(1) }

    val imageResource = when (result) {
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }

    Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
        // ... konten kolom ...
    }
}
        

1. Manajemen State dengan remember

State adalah data yang dapat berubah seiring waktu dan memengaruhi UI. Di sini, result adalah state yang menyimpan hasil kocokan dadu.

• var result by remember { mutableIntStateOf(1) }: Baris ini mendeklarasikan variabel state. mutableIntStateOf(1) menciptakan objek state yang dapat diobservasi dengan nilai awal 1. Penggunaan remember memastikan bahwa nilai result akan tetap ada (diingat) selama proses recomposition, sehingga UI tidak selalu di-reset ke nilai awalnya.

2. Logika Kondisional untuk Gambar

Berdasarkan nilai result saat ini, kita perlu menampilkan gambar dadu yang sesuai. Ekspresi when adalah cara yang sangat bersih dan mudah dibaca untuk melakukan pemetaan ini. Hasil dari blok when (sebuah ID resource drawable) disimpan dalam variabel imageResource.

3. Penanganan Interaksi dan Pembaruan State

Inti dari fungsionalitas aplikasi terletak pada Button dan aksi onClick-nya.

Button(
    onClick = { result = (1..6).random() },
) {
    Text(text = stringResource(R.string.roll), fontSize = 24.sp)
}
        

Ketika pengguna menekan tombol, lambda onClick dieksekusi. Di dalamnya, (1..6).random() menghasilkan angka acak baru yang kemudian ditugaskan ke variabel state result. Inilah momen krusialnya: setiap kali nilai result berubah, Jetpack Compose secara otomatis akan menjalankan ulang (recompose) semua composable yang membaca nilai tersebut.

4. Animasi Transisi Halus dengan Crossfade

Alih-alih membuat gambar dadu berubah secara tiba-tiba, kita dapat menambahkan sentuhan visual yang lebih baik dengan animasi. Crossfade adalah composable yang ideal untuk ini.

Crossfade(targetState = imageResource) { diceImage ->
    Image(
        painter = painterResource(diceImage),
        contentDescription = result.toString()
    )
}
        

Crossfade mengamati perubahan pada targetState-nya (dalam hal ini, imageResource). Ketika imageResource berubah akibat pembaruan result, Crossfade secara otomatis menganimasikan transisi dari konten lama (gambar dadu sebelumnya) ke konten baru (gambar dadu yang baru) dengan efek "fade" yang halus.

Alur Kerja Reaktif: Dari Klik Hingga Tampilan

Secara ringkas, alur kerja aplikasi ini adalah sebagai berikut:

1. Pengguna menekan tombol "Roll".
2. Event onClick terpicu, menghasilkan angka acak baru.
3. Nilai state result diperbarui dengan angka baru tersebut.
4. Compose mendeteksi perubahan state dan menjadwalkan recomposition.
5. Fungsi DiceWithButtonAndImage dieksekusi ulang.
6. Variabel imageResource dihitung ulang berdasarkan nilai result yang baru.
7. Crossfade melihat targetState telah berubah dan menganimasikan transisi ke gambar baru.
8. Composable Text juga diperbarui untuk menampilkan angka baru.
9. UI pada layar pengguna kini mencerminkan state aplikasi yang terbaru.

Kesimpulan

Aplikasi pengocok dadu ini, meskipun sederhana, secara efektif mendemonstrasikan kekuatan model UI reaktif dari Jetpack Compose. Dengan hanya beberapa baris kode deklaratif, kita dapat mengelola state, merespons interaksi pengguna, dan bahkan menambahkan animasi yang elegan. Ini menunjukkan bagaimana Compose menyederhanakan pengembangan UI dengan memungkinkan kita fokus pada "apa" yang harus ditampilkan dalam state tertentu, bukan "bagaimana" cara memperbarui tampilan secara manual.

Github

Referensi:

https://kuliahppb.blogspot.com/2024/03/komponen-button.html

https://developer.android.com/codelabs/basic-android-kotlin-compose-build-a-dice-roller-app#0