Tugas PBB Pertemuan 5

Nathanael Valen Susilo

5025231099

Aplikasi Composable Button: Dice Roller

Aplikasi Dice Roller sederhana ini akan memanfaatkan komponen button untuk melakukan fungsi Roll Dice dimana akan mengubah tampilan dadu pada aplikasi sesuai dengan hasil yang didapatkan.

Kelas MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DiceRollerTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    DiceRollerApp()
                }
            }
        }
    }
}

Kelas ini akan memanggil fungsi onCreate dimana dijalankan pada saat aplikasi dibuka oleh pengguna. Fungsi tersebut akan menampilkan konten dengan DiceRollerTheme dan beberapa parameter tertentu seperti modifier ukuran dan juga warna background yang ditampilkan. Konten yang ditampilkan ini disesuaikan dengan konten pada fungsi DiceRollerApp.

Fungsi DiceRollerApp

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

Fungsi ini digunakan sebagai preview sekaligus juga composable untuk menampilkan konten dimana akan memanggil fungsi DiceWithButtonAndImage dengan tampilan yang disesuaikan secara ukuran dengan layar dan membungkus konten pada rata tengah.

Fungsi DiceWithButtonAndImage

@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) {
        Image(painter = painterResource(imageResource), contentDescription = result.toString())
        
        Button(
            onClick = { result = (1..6).random() },
        ) {
            Text(text = stringResource(R.string.roll), fontSize = 24.sp)
        }
    }

Secara keseluruhan, fungsi ini akan menampilkan (dibuat dalam Column) gambar dadu (dice_1 hingga dice_6) dan juga satu tombol dengan teks "Roll" untuk melakukan aksi melempar dadu. Alur logika fungsi dapat dijabarkan sebagai berikut :

• variabel result akan menyimpan nilai terakhir (remember) dadu. Nilai result pertama kali akan diset dengan nilai 1, tetapi dapat berubah jika pengguna menekan tombol "Roll". Gambar dadu ini ditampilkan berdasarkan nilai pada result yang kemudian akan digambar dengan resource gambar yang sesuai (dice_1 hingga dice_6).
• Tombol "Roll" disini akan mengubah nilai pada result dengan range 1-6 secara acak ketika tombol tersebut diklik. Nilai result yang berubah juga kemudian akan mengubah gambar yang ditampilkan karena sebelumnya sudah dilakukan mapping terhadap nilai result dan resource gambar dadunya.

Hasil Preview

Hasil Aplikasi