Tugas 4 - Pemrograman Perangkat Bergerak
Nama : James Silaban
NRP : 5025201169
kelas : PBB F
Pembuatan aplikasi Roll the Dice
1. Import Gambar
Berbagai gambar yang diperlukan akan diimport untuk melakukan penugasan ini. Dilakukan import 6 gambar dadu dengan menampilkan nomor yang berbeda. Gambar ini nantinya akan ditampilkan setiap kali akan dilakukan pengacakan dadu.
2. Percabangan untuk Setiap Gambar
Sebelum gambar dadu dan tombol ditampilkan pada UI, diperlukan percabangan untuk memanggil setiap gambar yang berbeda. Akan tetapi, sebelum membuat percabangan, terlebih dahulu, kita membuat sebuah state dengan nama result.
Saat tombol ditekan, makan tombol tersebut akan menghasilkan angka acak dari 1-6. Hasil nomor yang didapatkan setelah pengacakan akan disimpan di state result. Setiap perubahan nilai pada state result akan menyebabkan re-render pada componen tersebut. Untuk mempertahankan nilai dari state saat dilakukan re-render, kita perlu menggunakan fungsi remember untuk menyimpan data state saat dilakukan re-render.
Saat tombol ditekan, makan tombol tersebut akan menghasilkan angka acak dari 1-6. Hasil nomor yang didapatkan setelah pengacakan akan disimpan di state result. Setiap perubahan nilai pada state result akan menyebabkan re-render pada componen tersebut. Untuk mempertahankan nilai dari state saat dilakukan re-render, kita perlu menggunakan fungsi remember untuk menyimpan data state saat dilakukan re-render.
Setiap kali state result mendapatkan nilai baru yang berisi angka yang ditampilkan, akan dilalui proses percabangan yang akan menentukan gambar yang ditampilkan sesuai dengan nilai state result.
Segala proses tersebut akan dilakukan pada fungsi DiceWithButtonAndImage().
@Composable
fun DiceWithButtonAndImage(
modifier: Modifier = Modifier
) {
var result by remember { mutableStateOf(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
}
// ...
}
3. Menampilkan Gambar dan Tombol
Setelah itu, akan dilakukan penampilan gambar dan tombol dengan komponen Image() dan Button(). Image yang ditampilkan sesuai dengan hasil dari percabangan yang telah dilakukan pada proses sebelumnya.
Kemudian, ketika komponen Button() dipanggil, akan ditambahkan parameter fungsi yang berguna untuk melakukan pengacakan nilai state result.
Kemudian, ketika komponen Button() dipanggil, akan ditambahkan parameter fungsi yang berguna untuk melakukan pengacakan nilai state result.
Proses tetap dilakukan pada fungsi DiceWithButtonAndImage().
@Composable
fun DiceWithButtonAndImage(
modifier: Modifier = Modifier
) {
// ...
Column (
modifier = modifier,
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
painter = painterResource(imageResource),
contentDescription = result.toString()
)
Spacer(modifier = Modifier.height(16.dp))
Button(onClick = { result = (1..6).random() }) {
Text(text = stringResource(R.string.roll))
}
}
}
4. Tampilan Akhir
Berikut adalah tampilan akhir dari aplikasi
Kode pada Penugasan 4 dapat dilihat pada link github berikut.
Comments
Post a Comment