Laporan PPB Job4

ListView 

A. Tujuan

Dengan mengikuti perkuliahan ini mahasiswa diharapkan mampu:

1.      Membuat ListView

B.     Alat dan Bahan

1.      Personal Computer

2.      IDE Eclipse

3.      Android SDK Windows

C.    Teori Singkat

ListView adalah user interface pada Android yang menampilkan item-item darisekumpulan daftar yang tersusun berbaris ke bawah atau ke samping dengan tampilan yang dapat scroll. ListView menampilkan item-item dari suatu Array atau List atau Query Database yang dijadikan data model sebagai item dari ListView. Adapter adalah class yang mengatur item-item pada ListView.Adapter mengatur resource view pada setiap item dari ListView. Resource view pada ListView yang ada pada sebuah tampilan layar sebuah aplikasi memiliki jumlah resource view yang tetap sesuai dengan item yang tampak pada layar. Pada ListView dengan tampilan scroll, resourve view akan digunakan secara berulang (reusable) dengan mengatur item yang tampak dan yang tersembunyi pada ListView. Adapter juga mengatur data model dari setiap item ListView. Sebuah data model akan diatur menjadi sebuah item dari ListView. ListView dikatakan sederhana atau komplek ditentukan oleh kompleksitas item dari ListView tersebut. Jika masing-masing item dari ListView menampilkan sebuah kata atau kalimat saja, maka ListView tersebut sederhana. Jika masing-masing item dari ListView memiliki isi yang komplek seperti item dari sebuah status jejaring sosial dimana pada masing-masing item memiliki foto profil, nama, waktu, status dan komentar, maka ListView tersebut adalah ListView komplek. Pembuatan ListView komplek dilakukan dengan Custom ListView.

D.    Langkah Kerja

1.      Buatlah sebuah project android baru dengan nama ListViewSederhana dengan mengikuti langkah yang terlihat pada gambar.

2.      Sesuaikan source code  pada file main.xml dengan mengikuti petunjuk pada gambar berikut:

3.      Sesuaikan source code  pada file ListViewSederhanaActivity.java dengan mengikuti petunjuk pada gambar berikut:

4.      Array String[] arrName merupakan kumpulan data String yang akan ditampilkan pada ListView. Array ini dimasukkan ke dalam object dari ArrayAdapter yang bernama adapter. Adapter ini merupakan adapter sederhana yang hanya menampilkan sebuah TextView pada item ListView. Code ListView listView = (ListView) findViewById

(R.id. id_list); membuat object dari class ListView dengan menginisiasi object tersebut dengan ListView yang kita buat pada file layout.xml. Jalankan project, maka ListView tampil seperti berikut ini.

Membuat Custom ListView

Custom ListView merupakan ListView dengan item yang bisa kita buat sesuai selera, misalnya item yang memiliki atribut foto, nama, dan keterangan. Item yang custom seperti itu dapat dibuat dan diatur oleh class Adapter.

1.      Untuk membuat Custom ListView, kita buat terlebih dahulu layout-layoutnya. Kita membutuhkan 2 layout, yaitu layout halaman yang menampilkan ListView dan layout item untuk Adapter.

2.      Buat project baru dengan nama ListViewCustom.

3.      Layout halaman utama  kita buat dengan menyesuaikan file main.xml di dalam folder layout dengan isi seperti ini :

4.      Buat layout baru : Layout item untuk Adapter kita buat dengan membuat file item.xml di dalam folder layout dengan isi seperti ini :

5.   Kemudian kita siapkan gambar yang menjadi icon dari item ListView. Saya pakai gambar Android seperti ini dengan ukuran 48 x 48 px (panjang x lebar harus sama). Kita simpan gambar pada folder drawable-hdpi dengan nama icon.png.

6.      Kemudian kita buat sebuah class data model dari item ListView yang bernama class Phone. Object dari class ini akan menyimpan data-data yang akan ditampilkan pada item dari ListView. Sebuah object dari class Phone akan ditampilkan pada sebuah item dari ListView. Kita buat class yang bernama Phone.java dengan isi class sebagai berikut.

7.      Kemudian kita buat class Adapter. Class Adapter adalah class yang akan membuat dan mengatur item-item dari ListView. Class ini mengkonversi data dari object Phone menjadi item dari ListView. Kita buat class yang bermama ListAdapter.java dengan isi class sebagai berikut :

8.      Kemudian sesuaikan class ListViewCustomActivity (class ini biasanya sudah dibuat otomatis pada project) sebagai class controller yang mengelola pembuatan Custom ListView. Buat class ListViewCustomActivity.java dengan isi sebagai berikut :

9.      Jalankan program, maka akan tampil seperti gambar berikut: 

E.    TUGAS

Membuat sebuah program menggunakan List View yang menhasilkan tampilan seperti gambar berikut, atau jika digeser ke bawah maka terlihat seperti gambar di sebelahnya.