Pada postingan kali ini masih membahas seputar User Interface, yang mana akan membuat listview costum di Kodular dengan menggunakan bantuan extension dynamic component dari Yusuf Cihan. Nah biasanya untuk membuat listview, di kodular sudah menyediakan component khusus yang digunakan untuk membuat listview baik itu listview text ataupun listview text dengan gambar (icon).
Namun tampilan dari component listview yang ada di kodular ini bersifat default, dengan kata lain tidak bisa dirubah-rubah dan tampilannya hanya gitu-gitu saja. Mungkin jika hanya ingin menampilkan daftar data biasa itu tidak masalah. Akan tetapi jika ingin menampilkan gambar beserta text dan component-component pelengkap lainnya seperti button yang ingin dimasukkan kedalam listview itu tidak akan bisa.
Untuk mengatasi keterbatasan tersebut, ada extension yang dibuat oleh Yusuf Cihan yang dapat membuat listview secara kostum dan dapat membuat semua komponen menjadi dinamis.
Yusuf Cihan merupakan seorang anggota di komunitas kodular yang turut andil dalam mengembangkan extension untuk kodular. Extension tersebut adalah DynamicComponents. Extension DynamicComponents yang dibuat oleh Yusuf Cihan dapat membuat seluruh component yang ada di kodular menjadi dinamis.
Maksudnya komponen dinamis itu, ketika kita ingin membuat sebuah tampilan yang sama dalam satu Screen dan menggunakan komponen yang sama, kita tidak perlu lagi membuat desain baru lagi dengan komponen yang baru. Jadin cukup satu component saja, dengan begitu dapat memperkecil ukuran project aplikasi ketika nanti di build dalam bentuk ekstensi .apk.
Balik lagi ke listview.
Listview digunakan ketika kita ingin menampilkan data dalam bentuk daftar, umumnya di android berisi data singkat atau disertai dengan icon disamping datanya.
Baca juga Cara membuat tabel di App Inventor Kodular
Lalu bagaimana jika kita hanya ingin menampilkan gambar saja yang ada di dalam listview atau merubah ukuran dari listview tersebut, seperti halnya tampilan listview yang ada di toko online atau tampilan listview artikel berita atau tampilan listview video seperti Youtube atau Instagram?
Semua itu merupakan listview costum. Dengan menggunakan extension DynamicComponent kita dapat membuat listview seperti itu. Nah pada tutorial kali ini saya akan membuat listview costum yang bentuknya artikel berita seperti website.
Cara membuat listview costum di Kodular
Pertama-tama seperti biasa login terlebih dahulu ke Kodular. Lalu buat project baru dan beri nama “LV_Cantik”. Kemudian setelah itu jangan lupa untuk mengunduh file extension DynamicComponent dari Yusuf Cihan di Wesite Komunitas Kodular.
untuk extension kodular format filenya adalah “.aix”, setelah mendapatkan file extensionnya jangan lupa untuk upload file extensionnya ke Kodular. Cara upload extensionnya tinggal masuk ke menu “Extension” di bagian “Pallet”, letaknya di sebelah kiri bawah, lalu klik upload file extension from computer dan pilih file nya kemudian upload. Tunggu sebentar hingga nanti akan muncul notifikasi bahwa extension berhasil ditambahkan.
Setelah upload extension jangan lupa untuk drag and drop extension tersebut ke layar smarphone agar extensionnya dapat digunakan.
Setelah itu buat desain tampilan untuk listview costum di kodular.
Desain listview costum di kodular
Untuk desain kali ini saya membuat 2 buah screen yaitu screen1 dan screen2. Screen1 digunakan untuk menampilkan daftar artikel dan screen2 digunakan untuk menampilkan artikel secara lengkap yang telah di klik sebelumnya.
Berikut di bawah ini adalah desain pada Screen 1
Pada desain Screen1 kali ini komponen yang digunakan adalah Label, CardView, HorizontalArrangement, Image, Space, VerticalScrollArrangement dan satu komponen lagi yang paling penting yaitu DynamicComponent yang merupakan extension yang sudah di upload sebelumnya ke kodular.
Agar tampilan listview costum dapat berjalan, kamu harus setting terlebih dahulu, tenang saja cuma sedikit settingnya. Pertama-tama klik komponen VerticalScrollArrangement lalu klik ceklis visible pada propertiesnya, kemudian pada kotak merah yang saya tandai di gambar kamu buat “unceklis” visible pada propertiesnya. Jika kurang jelas lihat saja gambar diatas.
berikut di bawah ini adalah desain pada Screen 2
Untuk komponen yang digunakan pada Screen2 ini tidak banyak, yaitu komponen image, space, label dan VerticalArrangement.
Oh iya jika kamu ingin menambahkan gambar di listview jangan lupa untuk upload gambarnya ke Asset. Setelah proses desain selesai selanjutnya adalah membuat blok programnya.
Blok program listview costum di Kodular
Berikut di bawah ini adalah blok program inisialisasi pada Screen1
untuk perulangan “for” pada gambar diatas berguna untuk membuat berapa panjang dari listview costum yang akan dibuat, misal saya kasih 5 maka nanti data yang akan tampil di listview costum hanya 5 saja. Tentunya ini hanya opsional kamu bisa juga melakukan perulangan sebanyak yang kamu mau atau bisa juga berdasarkan banyaknya data yang ada di database.
masih di screen1 di bawah ini adalah blok program untuk membuat dynamic component yang nantinya akan membentuk listview costum
dan yang terakhir adalah blok program pada Screen2
Apabila proses membuat blok program selesai jangan lupa untuk melakukan build pada project aplikasi, agar aplikasinya dapat diuji dan dijalankan pada perangkat smartphone untuk melihat hasilnya.
berikut di bawah ini adalah demo hasil aplikasi yang dibuat dari tutorial ini.
Visitor : Kok datanya pas tampil isinya Lorem ipsum…. sama semua?
Admin : ya karena itu hanya data dummy, selebihnya kamu bisa mengambil data dari database atau dari list yang kamu buat secara manual.
Visitor : Data dummy itu apa?
Admin : Data dummy adalah data palsu yang dibuat dengan tujuan sebagai data contoh atau data sampel, biasanya digunakan untuk data percobaan pada aplikasi.
Visitor : Kalau mau nampilin data artikelnya beda-beda gimana?
Admin : Bisa aja. Saya akan kasih cluenya, jadi ketika di klik tombol read-morenya atau gambarnya, kamu bisa buat kirim id artikelnya sekaligus ke screen yang menampilkan artikel. Nah pada saat screen artikelnya berjalan dari situ buat blok program yang mengambil data dari database atau list berdasarkan id artikel yang dikirim sebelumnya. Habis itu tinggal tampilin deh artikelnya.
id-nya bisa dikirim ke screen2 dengan menggunakan blok open new screen with value
Note
Baiklah cukup sampai sini saja tutorialnya, jika ada bagian yang tidak dimengerti silahkan untuk menuliskan di komentar di bawah ini.
Adapun file aia listview custom ini saya lampirkan, sebagai bahan belajar untuk kamu. Semoga file project ini bermanfaat.
kalau ingin mengubah isi teks di screen 2 itu gimana kak?
saya lihat kok sama semua is teksnya
bisa di ambil datanya dari database, jadi nanti bisa menampilkan datanya berbeda-beda. Itu contoh yang saya buat diatas itu belum terhubung dengan database, jadi saya buat statis aja isinya.
kalau saya tambahin dengan database, kodenya bakal tambah panjang lagi. Makanya saya kasih contoh pembuatan listviewnya saja sesuai dengan judul pembahasan.
mohon tutor datanya dari database dong…misal dari spreadsheet.
oke nanti saya coba buat
Call Dynamic Component yang ada Title .. Image .. dst itu koq ndak ada ya gan?
boleh minta file project nya gan?
Itu buat dulu fungsi atau procedurenya mas, bisa dilihat dibagian pembuatan dynamic componentnya. Nanti baru bisa dipanggil bloknya
Mas. mau untuk mengatur besar kecilnya gambar dibgian mana di setting.
seperti ukuran gambar profil WA.
Mohon penjelasannya
terima kasih
Kalau mau tampilan listviewnya seperti whatsapp, pakai komponen listview_image aja yang punya kodular.
Terima kasih Bang. atas masukannya.
Mas, punya tutorial mencari data.
sumber data di listview_image
bang blok = yang di sendData itu darimana ya?
Buat dulu procedurenya
Bang permisi itu kalo memuncul list image nya gimana ya bang saya coba yg muncul cm satu saja.
ada yang salah pada saat mengurai datanya mas, coba perhatikan lagi block programnya pastikan sama dengan yang di atas.
kalo untuk ngeblok di card view perdata gmn om
trims