Membuat listview costum di Kodular

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).

Membuat listview costum di kodular
Membuat listview costum di kodular

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

desain tampilan screen1 listview custom dynamic component
desain tampilan screen1 listview custom dynamic component

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

desain screen2 tampilan listview custom dynamic component
desain screen2 tampilan listview custom dynamic component

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

block program inisialisasi Screen1 listview costum
block program inisialisasi Screen1 listview costum

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

block program dynamic component Screen1 listview costum
block program dynamic component Screen1 listview costum

dan yang terakhir adalah blok program pada Screen2

block program Screen2 listview costum kodular
block program Screen2 listview costum kodular

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.

demo listview costum di kodular

Baiklah cukup sampai sini saja tutorialnya, jika ada bagian yang tidak dimengerti silahkan untuk menuliskan di komentar di bawah ini.

Leave a Reply

Your email address will not be published. Required fields are marked *