Membuat Image Scroll dengan menggunakan Desain Material

Nama  : Naily Khairiya

NRP : 5025201244

Kelas : PPB - I

Tugas 8

Kita akan belajar membuat daftar yang dapat digulir di aplikasi menggunakan Jetpack Compose. Kita akan memperluas aplikasi Affirmations dengan menambahkan daftar afirmasi yang dapat digulir dengan gambar. Kita akan belajar membuat kartu Desain Material dan daftar yang dapat digulir menggunakan Jetpack Compose. Selain itu, kita akan menambahkan daftar yang dapat digulir ke dalam antarmuka pengguna (UI) aplikasi yang telah ada. Untuk melakukannya, kita memerlukan komputer dengan akses internet, browser web, serta Android Studio terinstal. Selain itu, kita juga membutuhkan akses ke GitHub untuk mengunduh kode awal proyek yang akan diperluas. Berikut hasil akhir dari tugas ini.

1️⃣ Membuat class data item daftar

Dalam pengembangan aplikasi Android, kita membuat class data Affirmation untuk merepresentasikan setiap item dalam daftar afirmasi. Class ini terdiri dari dua properti, stringResourceId dan imageResourceId, yang masing-masing mewakili ID dari teks dan gambar afirmasi.

Properti-properti tersebut dianotasikan dengan @StringRes dan @DrawableRes untuk menunjukkan bahwa mereka merupakan referensi ke resource string dan drawable. Selain itu, kita mengimplementasikan class Datasource untuk memuat daftar afirmasi menggunakan data yang telah ditentukan sebelumnya.

2️⃣ Menambahkan daftar ke aplikasi

Aplikasi ini bertujuan untuk menampilkan daftar afirmasi, dimulai dengan membuat kartu item daftar. Kartu tersebut terdiri dari gambar dan teks yang disusun secara vertikal. Dalam metode AffirmationCard(), sebuah komponen UI dibuat untuk menampilkan item afirmasi dengan menggunakan composable Card yang berisi composable Image dan Text. Dalam membuat komponen ini, diperhatikan parameter modifier dan contentScale untuk menyesuaikan tampilan. Selanjutnya, dengan membuat komponen AffirmationList() yang menggunakan LazyColumn, daftar afirmasi dapat ditampilkan dengan efisien, dengan meneruskan setiap item ke komponen AffirmationCard(). Akhirnya, dengan memanggil AffirmationList() dalam AffirmationsApp() dan memberikan data dari DataSource(), daftar afirmasi ditampilkan secara keseluruhan. Sumber kode dapat dilihat pada lampiran dibawah ini.