Bagian 5: ListView

Lanjutan dari tutorial 4 (Widget).

Update Desember 2015:  update tutorial menggunakan Android Studio 1.5. Menggunakan ArrayList agar lebih fleksibel.

List view adalah widget untuk menampilkan data dalam bentuk list yang dapat di-scroll. Karena ukuran layar smartphone terbatas dan cenderung portrait, listview merupakan salah satu widget terpenting dan paling sering digunakan untuk menampilkan kelompok informasi.

ListView dapat berbentuk sederhana sampai kompleks. Beberapa contoh:

5_1

Kita akan mulai dengan membuat list sederhana berisi satu baris text seperti gambar di bawah:

5_5

Pertama, buat project baru dan tambahkan ListView (Listview ada dibagian container)

ScreenHunter_141 Dec. 08 16.22

 

Ganti atribut id listview dengan “listAngka”, caranya dengan men-double klik ListView (Gambar bawah)

ScreenHunter_142 Dec. 08 16.23

 

Lalu di MainActivity.java, tambahkan kode berikut:

public class MainActivity extends AppCompatActivity {

    //menggunakan arrayList akan fleksibel untuk ditambah
    //berisi data yang akan ditampilkan
    private ArrayList<String> items = new ArrayList<>();

    //penghubung antara data dengan listview
    ArrayAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //inisiasi isi
        items.add("satu");
        items.add("dua");
        items.add("tiga");
        items.add("empat");

        ListView listAngka = (ListView) findViewById(R.id.listAngka);

        //set warna abu2, karena default font adalah putih
        listAngka.setBackgroundColor(Color.LTGRAY);

		/*buat adapter
		3 parameter:
		   - context:
		   - layout listview: disini kita menggunakan yang sudah ada (nantinya bisa custom)
		   - datanya: items
		*/
        adapter = new ArrayAdapter (this,android.R.layout.simple_expandable_list_item_1,items);

        //set adapter ke listview
        listAngka.setAdapter(adapter);
    }

}

Coba jalankan.

Pada code di atas, dibuat adapter yang terhubung dengan array string untuk mengisi list. Sedangkan simple_expandable_list_item1 adalah layout standard yang disediakan Android (panjang ya namanya hehe).

Bagaimana mengupdate isi listview saat program sedang berjalan?

Untuk mengupdate data pada contoh diatas, nilai ArrayList dapat langsung diubah dan setelah selesai panggil method adapter.notifyDataSetChanged()untuk me-refresh tampilan. Sebagai contoh, kita akan membuat button yang saat diklik akan mengubah item pertama dan menambah dua item:

Tambahkan button diatas listview

ScreenHunter_143 Dec. 08 16.35

 

Jangan lupa tambahkan atribut onClick pada button (android:onClick=”klikButton”) dan kode MainActivity.java seperti berikut:

    public void klikButton(View v) {
        //ganti item, maka otomatis tampilkan akan diupdate
        items.set(0,"satu diganti one");

        //tambah item
        items.add("lima");
        items.add("enam");

        //refresh listview
        adapter.notifyDataSetChanged();
    }

Maka hasilnya akan sebagai berikut saat button di tap, baris pertama akan diganti:

screen

Untuk menambahkan aksi saat listview diklik, tambahkan code berikut pada onCreate.

 listAngka.setClickable(true);
 listAngka.setOnItemClickListener( new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) {
                String isiBaris = (String) listAngka.getItemAtPosition(position);
                String pesan = "Posisi:"+position +"->"+ isiBaris;
                Toast toast = Toast.makeText(getApplicationContext(), pesan, Toast.LENGTH_SHORT);
                toast.show();
            }
        });

Jalankan program, dan jika listview di tap, maka akan muncul toast berisi posisi (baris) dan isi baris.

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.