Image Scroll

 Membuat Komponen Image Scroll

Kita akan membuat aplikasi dengan tampilan komponen image scroll seperti card dengan isi gambar. Yuk kita mulai dengan mengikuti tutorial referensi ini.

Load projek starter

pada github ini download file pada branch starter dalam bentuk ZIP. Setelah terdownload, ekstrak. Pada android studio kita akan membuka projek dengan open dan mengarahkan ke folder hasil ekstraksi tadi. Dalam membuka projek memang memakan waktu yang cukup lama, jadi harap sabar. Ketika selesai load, maka coba run program, maka akan memiliki tampilan sebagai berikut:

Membuat class data item daftar

1. Membuat class data untuk affirmation

klik kanan pada folder com.example.affirmation pilin new, lalu package dan beri nama model. package ini akan berisi class data.

2. Membuat class affirmation

klik kanan pada package model lalu pilih new, lalu Kotlin class/File, lalu pilih Data Class. Beri nama Affirmation. Ubah sumber kode menjadi seperti berikut:

3. Aktifkan sumber kode Datasource.kt pada folder data di com.example.affirmation

Hapus komen pada sumber kode yang sudah ada pada Datasource.kt, sehingga menjadi seperti berikut:

Menambahkan daftar ke aplikasi 

1. Membuat AffirmationCard untuk card per gambar

Tambahkan method AffirmationCard, dimana kita menggunakan fungsi Card berisi Column dengan konten pada Column berupa Gambar dan Text. 

2. Membuat preview untuk card

Untuk menampilkan previes dari card yang sudah kita buat, kita dapat mendefinisikan method jenis preview sebagai berikut:

3. Membuat list card

Tambahkan method AffirmationList untuk merangkai beberapa card gambar menjadi satu, di sini kita menggunakan fungsi LaztColumn dan items, serta memanfaatkan method AffirmationCard yang sudah kita definisikan sebelumnya.

4. Manampilkan hasil list card pada aplikasi

Modifikasi method AffirmationApp jadi seperti ini:

Hasil Aplikasi