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
Komentar
Posting Komentar