Kondisional di Kotlin—bagian 2

Di codelab ini, Anda akan menambahkan gambar dadu ke aplikasi Android Dice Roller yang sudah ada. Pastikan Anda sudah menyelesaikan codelab sebelumnya terlebih dahulu dalam pembuatan dasar aplikasi Dice Roller.

Alih-alih menampilkan nilai lemparan dadu dalam TextView, aplikasi Anda akan menampilkan gambar dadu yang sesuai untuk jumlah sisi yang dilempar. Aplikasi akan menjadi lebih visual dan menyempurnakan pengalaman pengguna. aplikasi Anda.

Anda akan disediakan link untuk mendownload gambar dadu, lalu menambahkannya sebagai resource di aplikasi Anda. Anda akan menggunakan when pernyataan di Kotlin untuk menulis kode gambar dadu yang akan digunakan.

Prasyarat

• Menyelesaikan codelab Membuat aplikasi Android Dice Roller dengan Tombol.
• Dapat menulis pernyataan alur kontrol (pernyataan if / else, when).
• Dapat mengupdate UI dari aplikasi berdasarkan input pengguna (mengubah file MainActivity.kt).
• Dapat menambahkan pemroses klik ke Button.
• Dapat menambahkan resource gambar ke aplikasi Android.

Yang akan Anda pelajari

• Cara mengupdate ImageView saat aplikasi berjalan.
• Cara menyesuaikan perilaku aplikasi berdasarkan kondisi yang berbeda (menggunakan pernyataan when).

Yang akan Anda buat

• Aplikasi Android Dice Roller yang memiliki Button untuk melempar dadu dan mengupdate gambar di layar.

Yang Anda perlukan

• Komputer yang dilengkapi Android Studio.
• Koneksi internet untuk mendownload gambar dadu.

Dalam tugas ini, Anda akan mengganti TextView di tata letak dengan ImageView yang menampilkan gambar hasil lempar dadu.

Membuka aplikasi Dice Roller

1. Buka dan jalankan aplikasi Dice Roller dari aplikasi Create a Dice Roller Android with a Button di Android Studio.
   Aplikasi akan terlihat seperti ini.

2. Buka activity_main.xml (app > res > layout > activity_main.xml).
   Langkah ini akan membuka Layout Editor.

Menghapus TextView

1. Di Layout Editor, pilih TextView di Component Tree.
   

Tips: Saat Anda memperbanyak komponen UI dan menambah serta menghapus batasan, Anda mungkin menemukan satu View yang tumpang-tindih dengan komponen lainnya untuk sementara, sehingga sulit untuk memilih komponen di belakangnya. Dalam kasus ini, Anda dapat memilih View sebagai pengganti di Component Tree.

2. Klik kanan dan pilih Hapus atau tekan tombol Delete.
3. Abaikan peringatan di Button untuk saat ini. Anda akan memperbaikinya di langkah berikutnya.

Menambahkan ImageView ke tata letak

1. Tarik ImageView dari Palette ke tampilan Desain, lalu posisikan gambar di atas Button.

2. Dalam dialog Pilih Resource, pilih avatar di bagian data Sampel. Ini adalah gambar sementara yang akan Anda gunakan sampai Anda menambahkan gambar dadu di tugas berikutnya.

3. Tekan Oke. Tampilan Desain dari aplikasi akan terlihat seperti ini.

4. Dalam Component Tree, Anda akan melihat dua tanda error. Button tidak dibatasi secara vertikal, dan ImageView tidak dibatasi baik secara vertikal maupun horizontal.

Button tidak dibatasi secara vertikal karena Anda menghapus TextView di bawahnya yang merupakan posisi asli. Sekarang Anda perlu memosisikan ImageView dan Button di bawahnya.

Memosisikan ImageView dan Tombol

Anda perlu memusatkan ImageView secara vertikal di layar, di mana pun lokasi Button.

1. Tambahkan batasan horizontal ke ImageView. Hubungkan sisi kiri ImageView ke tepi kiri induk ConstraintLayout.
2. Hubungkan sisi kanan ImageView ke tepi kanan induk.
   Tindakan ini akan memusatkan ImageView secara horizontal dalam induk.

3. Tambahkan batasan vertikal ke ImageView yang menghubungkan bagian atas ImageView ke bagian atas induk.
   ImageView akan bergeser ke atas ConstraintLayout.
   
4. Tambahkan batasan vertikal ke Button yang menghubungkan bagian atas Button ke bagian bawah ImageView.
   Button akan bergeser ke atas di bawah ImageView.
   
5. Pilih lagi ImageView dan tambahkan batasan vertikal yang menghubungkan bagian bawah ImageView ke bagian bawah induk.
   Tindakan ini akan memusatkan ImageView secara vertikal di ConstraintLayout.

Semua peringatan terkait batasan seharusnya kini sudah hilang.

Setelah itu, tampilan Desain akan terlihat seperti ini, dengan ImageView berada di tengah dan Button tepat berada di bawahnya.

Anda mungkin melihat notifikasi peringatan di ImageView pada Component Tree mengenai penambahan deskripsi konten ke ImageView. Untuk saat ini, jangan khawatir tentang peringatan tersebut karena nanti dalam codelab, Anda akan menyetel deskripsi konten ImageView berdasarkan gambar dadu yang akan ditampilkan. Perubahan ini akan dibuat di kode Kotlin.

Dalam tugas ini, Anda akan mendownload beberapa gambar dadu dan menambahkannya ke aplikasi.

Mendownload gambar dadu

1. Buka URL ini untuk mendownload file zip gambar dadu ke komputer. Tunggu download selesai.
2. Temukan file di komputer Anda (mungkin di folder Downloads).
3. Klik dua kali pada file zip untuk mengekstraknya. Cara tersebut akan membuat folder DiceImages baru yang memuat 6 file gambar dadu, yang menampilkan nilai dadu dari 1 sampai 6.

Menambahkan gambar dadu ke aplikasi Anda

1. Di Android Studio, klik View > Tool Windows > Resource Manager di menu atau klik tab Resource Manager di sebelah kiri jendela Project.
2. Klik tanda + yang ada di bawah Resource Manager, lalu pilih Import Drawables. Tindakan ini akan membuka file browser.

3. Cari dan pilih 6 file gambar dadu. Anda dapat memilih file pertama, lalu pilih file lainnya sambil menahan tombol Shift.
4. Klik Buka.

5. Klik Berikutnya, lalu Impor untuk mengonfirmasi bahwa Anda ingin mengimpor 6 resource ini.

6. Jika file berhasil diimpor, 6 gambar tersebut akan muncul dalam daftar Drawable untuk aplikasi Anda.

Bagus! Pada tugas berikutnya, Anda akan menggunakan gambar-gambar tersebut di aplikasi.

Penting! - Anda akan dapat melihat gambar-gambar tersebut di kode Kotlin dengan ID resource:

• R.drawable.dice_1
• R.drawable.dice_2
• R.drawable.dice_3
• R.drawable.dice_4
• R.drawable.dice_5
• R.drawable.dice_6

Mengganti contoh gambar avatar

1. Di Design Editor, pilih ImageView.
2. Di Attributes pada bagian Declared Attributes. Cari fitur atribut srcCompat yang disetel ke gambar avatar.

Perlu diingat bahwa fitur atribut srcCompat menggunakan gambar yang tersedia hanya dalam tampilan Desain Android Studio. Gambar hanya ditampilkan kepada developer saat Anda membuat aplikasi, tetapi tidak akan terlihat saat Anda benar-benar menjalankan aplikasi di emulator atau di perangkat.

3. Klik pratinjau kecil avatar. Lalu akan terbuka sebuah dialog untuk memilih resource baru yang akan digunakan untuk ImageView ini.

4. Pilih dice_1 dapat digambar dan klik Oke.

Wow! ImageView mengisi seluruh layar.

Selanjutnya, Anda akan menyesuaikan lebar dan tinggi ImageView sehingga tidak menyembunyikan Button.

5. Di jendela Attributes bagian Constraint Widget, temukan atribut layout_width dan layout_height. Keduanya saat ini disetel ke wrap_content, artinya ImageView akan setinggi dan selebar konten (gambar sumber) di dalamnya.
6. Sebagai gantinya, setel lebar tetap sebesar 160 dp dan tinggi tetap sebesar 200 dp pada ImageView. Tekan Enter.
   
   ImageView sekarang menjadi jauh lebih kecil.
   

Anda mungkin mendapati bahwa Button terlalu dekat dengan gambar.

7. Tambahkan margin atas ke tombol 16dp dengan menyetelnya di Constraint Widget.
   

Setelah tampilan Desain diupdate, aplikasi akan terlihat jauh lebih baik!

Catatan: Gunakan piksel kepadatan mandiri (dp) sebagai unit untuk menentukan dimensinya sehingga ukuran gambar diskalakan dengan tepat di perangkat dengan resolusi piksel yang berbeda.

Mengubah gambar dadu saat tombol diklik

Tata letak telah diperbaiki, tetapi untuk menggunakan gambar dadu, class MainActivity perlu diupdate.

Saat ini terdapat error di aplikasi dalam file MainActivity.kt. Jika Anda mencoba menjalankan aplikasi, Anda akan melihat error build ini:

Hal ini karena kode Anda masih mengacu ke TextView yang telah dihapus dari tata letak.

1. Buka MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt)

Kode mengacu ke R.id.textView, tetapi Android Studio tidak mengenalinya.

2. Dalam metode rollDice(), pilih kode apa pun yang mengacu ke TextView lalu hapus kode tersebut.

// Update the TextView with the dice roll
val resultTextView: TextView = findViewByID(R.id.textView)
resultTextView.text = dice.roll().toString()

3. Masih di rollRice(), buat variabel baru dengan nama diceImage dari jenis ImageView. Setel variabel baru tersebut setara dengan ImageView dari tata letak. Gunakan metode findViewById() dan masukkan ID resource untuk ImageView, R.id.imageView, sebagai argumen input.

val diceImage: ImageView = findViewById(R.id.imageView)

Jika Anda ingin mengetahui bagaimana mencari tahu ID resource yang tepat dari ImageView, periksa id di bagian atas jendela Attributes.

Saat mengacu ke ID resource ini di kode Kotlin, pastikan Anda mengetikkannya dengan sama persis (huruf i kecil, huruf V besar, tanpa spasi). Jika tidak, Android Studio akan menampilkan error.

4. Tambahkan baris kode ini untuk menguji bahwa Anda dapat mengupdate ImageView dengan benar saat tombol diklik. Lemparan dadu tidak selalu berupa angka "2", tetapi cukup gunakan gambar dice_2 untuk tujuan pengujian.

diceImage.setImageResource(R.drawable.dice_2)

Kode ini memanggil metode setImageResource() di ImageView yang meneruskan ID resource untuk gambar dice_2. Tindakan ini akan mengupdate ImageView di layar untuk menampilkan gambar dice_2.

Metode rollDice() akan terlihat seperti ini sekarang:

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val diceImage: ImageView = findViewById(R.id.imageView)
    diceImage.setImageResource(R.drawable.dice_2)
}

5. Jalankan aplikasi untuk memverifikasi bahwa aplikasi berjalan tanpa error.

Aplikasi harus dimulai dengan layar kosong kecuali untuk tombol Lempar.

Setelah Anda mengetuk tombol tersebut, gambar animasi yang menampilkan nilai 2 akan muncul. Ya!!

Anda dapat mengubah gambar berdasarkan ketuk tombol! Anda hampir selesai!

Jelas sekali bahwa hasil dadu tidak selalu berupa angka 2. Gunakan logika alur kontrol yang Anda pelajari di codelab Tambah Perilaku Bersyarat untuk Perbedaan Lemparan Dadu sehingga gambar dadu yang sesuai akan ditampilkan di layar bergantung pada dadu yang dilempar secara acak.

Sebelum Anda mulai mengetik kode, pikirkan secara konseptual tentang bagaimana aplikasi seharusnya berperilaku dengan menulis beberapa kode semu yang menjelaskan apa yang harus terjadi. Misalnya:

Jika pengguna melempar angka 1, tampilkan gambar dice_1.

Jika pengguna melempar angka 2, tampilkan gambar dice_2.

dll...

Catatan: Kode Semu adalah deskripsi informal mengenai bagaimana beberapa kode dapat bekerja. Kode ini menggunakan beberapa elemen bahasa komputer seperti if / else yang dapat menjelaskan berbagai hal dengan cara yang dapat dipahami manusia. Hal ini dapat berguna untuk rencana yang diambil dengan pendekatan yang tepat sebelum semua detail telah ditentukan.

Kode semu di atas dapat ditulis dengan pernyataan if / else di Kotlin berdasarkan angka lemparan dadu.

if (diceRoll == 1) {
   diceImage.setImageResource(R.drawable.dice_1)
} else if (diceRoll == 2) {
   diceImage.setImageResource(R.drawable.dice_2)
}
 ...

Namun, penulisan if / else untuk setiap kasusnya cukup repetitif. Logika yang sama dapat diekspresikan lebih mudah dengan pernyataan when. Lebih ringkas (sedikit kode), bukan? Gunakan pendekatan ini di aplikasi Anda.

when (diceRoll) {
   1 -> diceImage.setImageResource(R.drawable.dice_1)
   2 -> diceImage.setImageResource(R.drawable.dice_2)
   ...

Mengupdate metode rollDice()

1. Dalam metode rollDice(), hapus setiap kali baris kode yang menyetel gambar ID resource ke gambar dice_2.

diceImage.setImageResource(R.drawable.dice_2)

2. Ganti baris kode tersebut dengan pernyataan when yang mengupdate ImageView berdasarkan nilai diceRoll.

   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }

Setelah Anda selesai melakukan perubahan, metode rollDice() akan terlihat seperti ini.

private fun rollDice() {
   val dice = Dice(6)
   val diceRoll = dice.roll()

   val diceImage: ImageView = findViewById(R.id.imageView)

   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }
}

3. Jalankan aplikasi. Dengan mengeklik tombol Lempar, Anda akan mengubah gambar dadu ke angka lain selain angka 2. Berhasil!

Mengoptimalkan kode

Jika ingin menulis kode yang lebih ringkas, Anda dapat membuat perubahan kode berikut. Perubahan ini tidak memiliki dampak yang terlihat bagi pengguna aplikasi Anda, tetapi akan membuat kode menjadi lebih pendek dan mengalami lebih sedikit pengulangan.

Anda mungkin telah melihat panggilan ke diceImage.setImageResource() yang muncul 6 kali dalam pernyataan "when".

when (diceRoll) {
    1 -> diceImage.setImageResource(R.drawable.dice_1)
    2 -> diceImage.setImageResource(R.drawable.dice_2)
    3 -> diceImage.setImageResource(R.drawable.dice_3)
    4 -> diceImage.setImageResource(R.drawable.dice_4)
    5 -> diceImage.setImageResource(R.drawable.dice_5)
    6 -> diceImage.setImageResource(R.drawable.dice_6)
}

Satu-satunya hal yang berubah di antara setiap kasus adalah ID resource yang sedang digunakan. Artinya, Anda dapat membuat variabel untuk menyimpan ID resource yang akan digunakan. Selanjutnya, Anda dapat memanggil diceImage.setImageResource() hanya sekali di kode Anda dan meneruskan ID resource yang benar.

1. Ganti kode di atas dengan kode berikut.

val drawableResource = when (diceRoll) {
   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
   6 -> R.drawable.dice_6
}

diceImage.setImageResource(drawableResource)

Konsep baru di sini merupakan ekspresi when yang sebenarnya dapat menampilkan nilai. Dengan cuplikan kode baru ini, ekspresi when menunjukkan ID resource yang benar, yang kemudian akan disimpan di variabel drawableResource. Selanjutnya Anda dapat menggunakan variabel tersebut untuk mengupdate resource gambar yang ditampilkan.

2. Perhatikan bahwa sekarang when digarisbawahi dengan warna merah. Jika Anda mengarahkan pointer ke atasnya, Anda akan melihat pesan error: ekspresi 'when' harus lengkap, tambahkan cabang 'else' yang diperlukan.

Error terjadi karena nilai ekspresi when diberikan ke drawableResource, sehingga when harus lengkap — fitur ini harus menangani semua kemungkinan kasus sehingga nilai selalu ditampilkan, meskipun Anda mengubah ke dadu 12 sisi. Android Studio menyarankan penambahan cabang else. Anda dapat memperbaikinya dengan mengubah kasus untuk 6 menjadi else. Kasus untuk 1 sampai 5 adalah sama, tetapi semua kasus lainnya termasuk 6 ditangani oleh else.

val drawableResource = when (diceRoll) {
   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
}

diceImage.setImageResource(drawableResource)

3. Jalankan aplikasi untuk memastikan aplikasi masih berfungsi dengan benar. Pastikan mengujinya dengan cukup untuk memastikan bahwa Anda melihat semua angka yang muncul dengan gambar dadu 1 sampai 6.

Menyetel deskripsi konten yang sesuai pada ImageView

Setelah Anda mengganti angka yang dilempar dengan gambar, pembaca layar tidak dapat lagi mengetahui angka yang dilempar. Setelah mengupdate resource gambar, update juga deskripsi konten ImageView untuk memperbaikinya. Deskripsi konten harus berupa deskripsi teks terkait apa yang ditampilkan di ImageView agar pembaca layar dapat mendeskripsikannya.

diceImage.contentDescription = diceRoll.toString()

Pembaca layar dapat membaca deskripsi konten ini secara lisan, sehingga jika lemparan dadu berupa gambar "6" muncul di layar, deskripsi konten akan dibacakan angka "6" secara lisan.

Menciptakan pengalaman peluncuran yang lebih bermanfaat

Saat pengguna membuka aplikasi untuk pertama kalinya, aplikasi tersebut kosong (kecuali tombol Lempar), yang mana terlihat aneh. Pengguna mungkin tidak mengetahui apa yang akan terjadi, maka ubahlah UI untuk menampilkan lemparan dadu secara acak saat Anda memulai aplikasi pertama kali dan buatlah Activity . Kemudian, pengguna cenderung lebih memahami bahwa mengetuk tombol Lempar akan menghasilkan sebuah lemparan dadu.

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val rollButton: Button = findViewById(R.id.button)
   rollButton.setOnClickListener { rollDice() }

   // Do a dice roll when the app starts
   rollDice()
}

Memberikan Komentar pada Kode Anda

Tambah beberapa komentar pada kode untuk mendeskripsikan peristiwa yang terjadi dalam kode yang Anda tulis.

Setelah Anda membuat semua perubahan ini, seperti inilah tampilan metode rollDice() Anda.

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {
   // Create new Dice object with 6 sides and roll the dice
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Find the ImageView in the layout
   val diceImage: ImageView = findViewById(R.id.imageView)

   // Determine which drawable resource ID to use based on the dice roll
   val drawableResource = when (diceRoll) {
       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
   }

   // Update the ImageView with the correct drawable resource ID
   diceImage.setImageResource(drawableResource)

   // Update the content description
   diceImage.contentDescription = diceRoll.toString()
}

Untuk file MainActivity.kt lengkap, lihat kode solusi di GitHub yang terhubung di bawah.

Selamat, Anda telah menyelesaikan aplikasi Dice Roller! Sekarang Anda dapat menghadirkan aplikasi ini ke malam pertandingan berikutnya bersama teman-teman Anda!

Kode solusi untuk codelab ini berada dalam project dan modul yang ditampilkan di bawah ini.

URL Kode Solusi: https://github.com/google-developer-training/android-basics-kotlin-dice-roller-with-images-app-solution

Untuk mendapatkan kode yang dipakai pada codelab ini dari GitHub serta membukanya di Android Studio, lakukan hal berikut.

1. Mulai Android Studio.
2. Di jendela Welcome to Android Studio, klik Check out project from version control.
3. Pilih Git.

4. Pada dialog Clone Repository, tempelkan URL kode yang disediakan ke kotak URL.
5. Klik tombol Test, tunggu, dan pastikan ada pop-up balon berwarna hijau yang bertuliskan Connection successful.
6. Jika ingin, Anda dapat mengubah Directory menjadi sesuatu yang berbeda dengan default yang disarankan.

7. Klik Clone. Android Studio mulai mengambil kode Anda.
8. Di pop-up Checkout from Version Control, klik Yes.

9. Tunggu Android Studio terbuka.
10. Pilih modul yang tepat untuk kode awal atau kode solusi codelab Anda.

11. Klik tombol Run untuk membuat dan menjalankan kode.

Bantuan: Lihat Panduan Bantuan dan Pemecahan Masalah jika kode yang didownload tidak dimuat atau berjalan dengan benar.

• Gunakan setImageResource() untuk mengubah gambar yang ditampilkan di ImageView
• Gunakan pernyataan alur kontrol seperti ekspresi if / else atau when untuk menangani kasus yang berbeda di aplikasi Anda, misalnya, menampilkan gambar yang berbeda pada kasus yang berbeda.

• Ekspresi if di Kotlin
• Ekspresi when di Kotlin
• ImageView.setImageResource()
• Aksesibilitas

Catatan: Latihan bersifat opsional. Dengan latihan, Anda bisa mempraktikkan ilmu yang telah Anda pelajari dalam codelab ini.

Lakukan hal berikut:

1. Tambahkan dadu lain ke aplikasi, sehingga satu tombol Lempar memberikan 2 hasil dadu. Berapa banyak ImageViews yang akan Anda butuhkan dalam tata letak? Bagaimana pengaruhnya terhadap kode MainActivity.kt?

Periksa hasil kerja Anda:

Aplikasi Anda yang sudah selesai seharusnya berjalan tanpa error dan menampilkan dua dadu.