Friday, December 12, 2014

Android UI Tips & Tricks : Multiple-Choice List

Selamat berjumpa kembali, pada kesempatan kali ini saya akan menjelaskan sebuah fitur dari komponen ListView pada platform android yang (mungkin) jarang di ketahui secara umum.

ListView adalah sebuah komponen antar-muka yang sangat fundamental pada platform android yang biasa digunakan untuk menampilkan data sebagai list yang dapat di scroll (apabila data terlalu banyak sehingga tidak dapat di tampilkan seluruhnya pada layar).

Secara default, mode seleksi pada ListView adalah "single selection", yang berarti user hanya dapat memilih satu data. Namun komponen ini juga dapat di konfigurasi agar user dapat memilih lebih dari satu data (multiple selection).

Caranya sangat mudah, yang harus anda lakukan adalah memanggil setChoiceMode dengan parameter CHOICE_MODE_MULTIPLE sehingga mode seleksinya menjadi "multiple selection". Dan yang tidak kalah pentingnya adalah, gunakan layout yang sesuai untuk list item-nya, dimana ini bertujuan agar terdapat indikator yang menunjukkan bahwa item pada list telah di seleksi.

Enough talk, let's get down to code!

Buat sebuah project baru, tambahkan sebuah Activity dengan ListView sebagai komponen utamanya, atau anda dapat menggunakan ListActivity sebagai alternatif.



Set ListView selection mode menjadi multiple selection.



Buat string-array resource yang akan digunakan sebagai data dummy.


Buat ArrayAdapter yang akan digunakan sebagai sumber data dari ListView, dengan parameter sebagai berikut:
  • resource id: android.R.layout.simple_list_item_multiple_choice
  • data: string array yang sudah di buat sebelumnya
(Note, saya menggunakan layout yang telah disediakan oleh android, layout ini menampilkan checkmark/centang sebagai indikator)

Set adapter tersebut ke komponen ListView


Selamat!, anda sudah berhasil membuat multiple-choice list sederhana di platform android.

Sebagai bukti bahwa ini berjalan sesuai dengan tujuan, kita akan membuat sebuah tombol (Button) di mana saat tombol ini di klik akan menunjukkan item-item yang terseleksi pada list.

Karena saya menggunakan ListActivity, maka untuk mempersingkat, saya letakkan saja tombol tersebut sebagai Header pada komponen ListView.



Pada method showSelection, Tambahkan prosedur untuk melakukan listing terhadap item-item yang terseleksi pada list. For simplicity, kita gunakan Toast saja


Saat dijalankan maka kurang lebih akan tampil seperti di bawah:




No comments:

Post a Comment