Tugas 4 - Pemrograman Perangkat Bergerak G - Membuat Aplikasi DIce Roller

Berikut adalah penjelasan kode tugas membuat dice roller

---

1. Struktur Utama Aplikasi

Aplikasi ini memiliki satu aktivitas utama (MainActivity) yang menggunakan Jetpack Compose untuk membangun UI.

MainActivity (Entry Point)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DiceRoller_RakhaTheme {
                DiceRollerApp()
            }
        }
    }
}

• enableEdgeToEdge() mengaktifkan tampilan layar penuh.
• setContent { DiceRoller_RakhaTheme { DiceRollerApp() } } menentukan bahwa UI aplikasi akan mengikuti tema yang telah dibuat dan akan menampilkan fungsi DiceRollerApp().

---

2. Fungsi DiceRollerApp

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

• Fungsi ini adalah Composable function, yang berarti dapat digunakan untuk membangun UI dengan Jetpack Compose.
• Fungsi ini memanggil DiceWithButtonAndImage() dengan modifier untuk mengisi layar penuh dan menempatkan kontennya di tengah.

---

3. Fungsi DiceWithButtonAndImage

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

• var result by remember { mutableStateOf(1) }
  • Variabel result menyimpan angka dadu (1 sampai 6).
  • remember digunakan agar nilai tetap tersimpan selama rekomposisi (misalnya, saat tombol ditekan).
  • mutableStateOf(1) memastikan nilai dapat berubah dan memicu pembaruan UI.

Menentukan Gambar Dadu

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
}

• imageResource dipilih berdasarkan nilai result, yang menentukan gambar dadu mana yang akan ditampilkan.

Membuat Tata Letak (Layout)

Column (
    modifier = modifier,
    horizontalAlignment = Alignment.CenterHorizontally
) {

• Column digunakan untuk menata elemen UI secara vertikal.
• horizontalAlignment = Alignment.CenterHorizontally memastikan elemen sejajar di tengah.

---

4. Komponen Button dan Logikanya

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

• Button adalah tombol yang bisa ditekan oleh pengguna.
• onClick: Ketika tombol ditekan, result diubah menjadi angka acak dari 1 hingga 6 menggunakan (1..6).random().
• Perubahan nilai result otomatis memperbarui UI karena Compose mendeteksi perubahan status.

---

5. Komponen Image

Image(
    painter = painterResource(imageResource),
    contentDescription = result.toString()
)

• Image menampilkan gambar dadu berdasarkan imageResource.
• painterResource(imageResource): Mengambil gambar dari res/drawable sesuai nilai result.
• contentDescription = result.toString(): Memberikan teks deskripsi gambar untuk aksesibilitas.

---

Kode

package com.example.diceroller_rakha

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.diceroller_rakha.ui.theme.DiceRoller_RakhaTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DiceRoller_RakhaTheme {
                DiceRollerApp()
            }
        }
    }
}

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

@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
    }
    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), fontSize = 24.sp)
        }
    }
}

Hasil