Pertemuan 4 - Dice Roller

pada tanggal

 Naufal Khairul Rizky - 5025221127

Dice Roller

Aplikasi ini merupakan implementasi aplikasi android sederhana menggunakan Jetpack Compose untuk membuat aplikasi Dice Roller. Aplikasi ini memungkinkan pengguna untuk mengocok dadu dengan menekan tombol, lalu menampilkan gambar dadu sesuai hasil yang diacak.

1. MainActivity.kt

Saat aplikasi dijalankan, metode onCreate() akan dipanggil untuk menginisialisasi tampilan. Fungsi enableEdgeToEdge() digunakan agar tampilan memenuhi layar sepenuhnya, dan setContent {} digunakan untuk menetapkan UI aplikasi dengan tema yang sudah dibuat.

2. DiceRollerApp()

Fungsi ini adalah Composable function yang bertanggung jawab untuk menampilkan antarmuka utama aplikasi. Fungsi ini memastikan elemen UI berada di tengah layar dan memanggil fungsi utama yang menangani logika pengocokan dadu. Selain itu, terdapat @Preview yang memungkinkan tampilan UI dapat dilihat dalam mode pratinjau tanpa harus menjalankan aplikasi di emulator atau perangkat fisik.

2. DiceWithButtonAndImage()

Fungsi ini merupakan inti dari aplikasi, yang mencakup:

  • State Management: Menyimpan hasil lemparan dadu dengan nilai awal 1.

  • Dice Image: Menyesuaikan tampilan gambar dadu berdasarkan hasil yang diacak.

  • Dice Roller Button: Mengacak angka antara 1 hingga 6 setiap kali ditekan.

Tampilan UI disusun menggunakan Column, sehingga elemen ditampilkan secara vertikal. Terdapat komponen Image untuk menampilkan gambar dadu yang sesuai dengan angka hasil lemparan, Spacer untuk memberikan jarak, serta Button yang berfungsi untuk roll dadu saat ditekan.




Source code:

package com.example.diceroller

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

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

@Preview
@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(stringResource(R.string.roll))
        }
    }
}

Komentar

Posting Komentar