Tugas Pertemuan ke-4 [Memodifikasi App dengan Button Component]

Berikut merupakan dokumentasi dari hasil membangun aplikasi Dice Roller interaktif sederhana yang memungkinkan pengguna melempar dadu dengan composable button yang telah saya buat dengan mengacu pada tutorial dokumentasi tentang Membuat aplikasi dice roller interaktif.

Mengatur Tata Letak

Fungsi Column() adalah tata letak composable yang menempatkan turunannya dalam urutan vertikal. Di desain aplikasi yang diharapkan, Anda dapat melihat bahwa gambar dadu ditampilkan secara vertikal di atas tombol lempar:

1. Dalam fungsi DiceWithButtonAndImage(), tambahkan fungsi Column().
2. Teruskan argumen modifier dari tanda tangan metode DiceWithButtonAndImage() ke argumen pengubah Column().

Argumen modifier memastikan bahwa composable dalam fungsi Column() mematuhi batasan yang dipanggil pada instance modifier.

3. Teruskan argumen horizontalAlignment ke fungsi Column(), lalu tetapkan ke nilai Alignment.CenterHorizontally.

fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ) 
}

Menambahkan Component Button

1. Di file strings.xml, tambahkan string dan tetapkan ke nilai Roll.
2. Dalam isi lambda Column(), tambahkan fungsi Button().
3. Di file MainActivity.kt, tambahkan fungsi Text() ke Button() dalam isi lambda fungsi.
4. Teruskan ID resource string dari string roll ke fungsi stringResource() dan teruskan hasilnya ke composable Text.

Column(
    modifier = modifier,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Button(onClick = { /*TODO*/ }) {
        Text(stringResource(R.string.roll))
    }
}

Menambahkan Composable Image

Dalam aplikasi ini, Anda menggunakan Column untuk menumpuk Composable secara vertikal sehingga Composable mana pun yang dideklarasikan pertama dalam fungsi Column() akan ditampilkan sebelum composable dideklarasikan setelah itu dalam fungsi Column() yang sama.

1. Pada isi fungsi Column(), buat fungsi Image() sebelum fungsi Button().

Column(
    modifier = modifier,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Image()
    Button(onClick = { /*TODO*/ }) {
      Text(stringResource(R.string.roll))
    }
}

2. Teruskan argumen painter ke fungsi Image(), lalu tetapkan nilai painterResource yang menerima argumen ID resource drawable. Untuk saat ini, teruskan ID resource berikut: argumen R.drawable.dice_1.

Mengatur Logika Pelemparan Dadu

Composable bersifat stateless secara default, yang berarti bahwa composable tersebut tidak memiliki nilai dan dapat disusun ulang oleh sistem kapan saja sehingga mengakibatkan nilai tersebut direset. Namun, Compose menyediakan cara yang praktis untuk menghindari hal ini. Fungsi composable dapat menyimpan objek dalam memori menggunakan composable remember.

1. Ubah variabel result menjadi composable remember.

Composable remember memerlukan fungsi yang diteruskan.

2. Dalam isi composable remember, teruskan fungsi mutableStateOf(), lalu teruskan argumen 1 ke fungsi tersebut.

3. Di bawah pembuatan instance variabel result, buat variabel imageResource tetap yang ditetapkan ke ekspresi when yang menerima variabel result, lalu tetapkan setiap kemungkinan hasil ke drawable-nya.

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
}

4. Ubah ID yang diteruskan ke parameter painterResource composable Image dari drawable R.drawable.dice_1 ke variabel imageResource.
5. Ubah parameter contentDescription composable Image untuk mencerminkan nilai variabel resultdengan mengonversi variabel result menjadi string dengan toString() dan meneruskannya sebagai contentDescription.

Hasil Modifikasi Aplikasi

Video Demo

Github