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.

    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.
    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

Popular posts from this blog