Tugas 4 PPB F

 Nama    : Beryl

NRP      : 5025201029

Kelas     : Pemrograman Perangkat Bergerak F

Dice Roller App

Membuat project

1. Di Android Studio, klik File > New > New Project.
2. Dalam dialog New Project, pilih Empty Activity, lalu klik Next.
3. Di kolom Name, masukkan Dice Roller.
4. Di kolom Minimum SDK, pilih API level minimum 24 (Nougat) dari menu, lalu klik Finish.

Melihat pratinjau project

Klik Build & Refresh di panel Split atau Design untuk melihat pratinjau projek

Mengubah Struktur Kode Contoh

Untuk menyusun ulang kode contoh:

1. Hapus fungsi DefaultPreview().
2. Buat fungsi DiceWithButtonAndImage() dengan anotasi @Composable.

Fungsi composable ini mewakili komponen UI tata letak dan juga menampung logika klik tombol dan tampilan gambar.

3. Hapus fungsi Greeting(name: String).
4. Buat fungsi DiceRollerApp() dengan anotasi @Preview dan @Composable.

Aplikasi ini hanya terdiri dari tombol dan gambar. Jadi, anggap fungsi composable ini sebagai aplikasi itu sendiri. Itulah alasannya fungsi ini disebut fungsi DiceRollerApp().

5. Hapus semua kode di dalam lambda setContent{} yang ditemukan dalam metode onCreate().
6. Di bagian lambda setContent{}, panggil lambda DiceRollerTheme{}, lalu di dalam lambda DiceRollerTheme{}, panggil fungsi DiceRollerApp().

7. Di fungsi DiceRollerApp(), panggil fungsi DiceWithButtonAndImage().

Menambahkan pengubah

Compose menggunakan objek Modifier yang merupakan kumpulan elemen yang mendekorasi atau mengubah perilaku elemen UI Compose. Anda menggunakannya untuk menata gaya komponen UI dari komponen aplikasi Dice Roller.

1. Ubah fungsi DiceWithButtonAndImage() untuk menerima argumen modifier dari jenis Modifier dan tetapkan nilai default Modifier.

2. Setelah composable DiceWithButtonAndImage() memiliki parameter pengubah, teruskan pengubah saat composable dipanggil. Tanda tangan metode untuk fungsi DiceWithButtonAndImage() mengalami perubahan sehingga objek Modifier dengan dekorasi yang diinginkan harus diteruskan saat dipanggil. Class Modifier bertanggung jawab atas dekorasi, atau penambahan perilaku, pada composable di fungsi DiceRollerApp(). Dalam hal ini, ada beberapa dekorasi penting yang dapat ditambahkan ke objek Modifier yang diteruskan ke fungsi DiceWithButtonAndImage().

3. Buat rantai metode fillMaxSize() ke objek Modifier sehingga tata letak mengisi seluruh layar.

4. Buat rantai metode wrapContentSize() ke objek Modifier, lalu teruskan Alignment.Center sebagai argumen untuk memusatkan komponen. Alignment.Center menentukan bahwa komponen dipusatkan secara vertikal dan horizontal.

Membuat tata letak vertikal

Di Compose, tata letak vertikal dibuat dengan fungsi Column().

1. Dalam fungsi DiceWithButtonAndImage(), tambahkan fungsi Column().
2. Teruskan argumen modifier dari tanda tangan metode DiceWithImageAndButton() 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.

Menambahkan tombol

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.

Menambahkan gambar

Mendownload gambar dadu

1. Buka URL ini untuk mendownload file zip gambar dadu ke komputer, lalu tunggu download selesai.
2. Ekstrak file zip untuk membuat folder dice_images baru yang berisi enam file gambar dadu dengan nilai dadu dari 1 sampai 6.

Menambahkan gambar dadu ke aplikasi Anda

1. Di Android Studio, klik View > Tool Windows > Resource Manager.
2. Klik + > Import Drawables untuk membuka file browser.

3. Temukan dan pilih enam folder gambar dadu, lalu lanjutkan untuk menguploadnya.

Gambar yang diupload akan muncul sebagai berikut.

4. Klik Next.

Dialog Import Drawables akan muncul dan menampilkan lokasi file resource berada di struktur file.

5. Klik Import untuk mengonfirmasi bahwa Anda ingin mengimpor enam gambar.

Gambar akan muncul di panel Resource Manager.

Menambahkan composable Image

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

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.

3. Setiap kali membuat Gambar di aplikasi, Anda harus memberikan apa yang disebut dengan "deskripsi konten". Deskripsi konten adalah bagian penting dari pengembangan Android. Gambar menyediakan deskripsi ke komponen UI masing-masing untuk meningkatkan aksesibilitas. Untuk informasi deskripsi konten selengkapnya, lihat Menjelaskan setiap elemen UI. Anda dapat meneruskan deskripsi konten ke gambar sebagai parameter.
   

Kini semua komponen UI yang diperlukan sudah ada. Namun, Button dan Image sedikit saling bersinggungan.

1. Untuk memperbaikinya, tambahkan composable Spacer di antara composable Button dan Image. Spacer menggunakan Modifier sebagai parameter. Dalam hal ini, Image berada di atas Button sehingga harus ada spasi vertikal di antara keduanya. Oleh karena itu, tinggi Modifier dapat disetel agar berlaku untuk Spacer. Coba tetapkan tinggi ke 16.dp. Biasanya, dimensi dp diubah dengan kelipatan 4.dp.

2. Di panel Preview, klik Build & Refresh.

Membuat logika pelemparan dadu

Membuat tombol menjadi interaktif

1. Pada fungsi DiceWithButtonAndImage() sebelum fungsi Column(), buat variabel result dan tetapkan agar sama dengan nilai 1.
2. Lihat composable Button. Anda akan melihat parameter onClick yang ditetapkan ke sepasang tanda kurung kurawal dengan komentar /*TODO*/ di dalam kurung kurawal. Dalam hal ini kurung kurawal mewakili lambda, area di dalam kurung kurawal yang menjadi badan lambda. Jika diteruskan sebagai argumen, fungsi juga dapat disebut sebagai " callback".
3. Dalam fungsi Button(), hapus komentar /*TODO*/ dari nilai isi lambda parameter onClick.
4. Lemparan dadu bersifat acak. Untuk menunjukkan hal itu dalam kode, Anda perlu menggunakan sintaksis yang benar untuk menghasilkan angka acak. Di Kotlin, Anda dapat menggunakan metode random() pada rentang nomor. Dalam isi lambda onClick, tetapkan variabel result ke rentang antara 1 hingga 6, lalu panggil metode random() pada rentang tersebut. Ingat bahwa dalam Kotlin, rentang ditentukan oleh dua titik antara angka pertama dalam rentang dan angka terakhir dalam rentang.

Menambahkan kondisional ke aplikasi dice roller

Nilai variabel result akan direset saat tombol Roll diketuk dan akan menentukan gambar yang ditampilkan. 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.

Fungsi mutableStateOf() akan menampilkan objek yang dapat diamati. Anda akan mempelajari observable lebih lanjut nanti. Namun, untuk saat ini, pada dasarnya ini berarti bahwa saat nilai variabel result berubah, rekomposisi akan dipicu, nilai hasilnya akan tercermin, dan UI akan di-refresh.

Sekarang, saat tombol diketuk, variabel result akan diupdate dengan nilai angka acak.

Sekarang, variabel result dapat digunakan untuk menentukan gambar yang akan ditampilkan.

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.

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 result dengan mengonversi variabel result menjadi string dengan toString() dan meneruskannya sebagai contentDescription.

6. Jalankan aplikasi.

Tampilan Akhir

Source Code

package com.example.tugasppb4

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
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 com.example.tugasppb4.ui.theme.TugasPPB4Theme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TugasPPB4Theme {
                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))
        }
    }
}