Laporan Jobsheet 4 Pemrograman Perangkat Bergerak

 ListView

A.    Tujuan Praktikum

1.      Mampu Membuat ListView

B.     Alat dan Bahan Praktikum

1.      Personal Computer

2.      IDE Eclipse

3.      Android SDK Windows

C.    Teori Singkat

ListViewadalah user interface pada Android yang menampilkan item-item darisekumpulandaftar yang tersusunberbariskebawahataukesampingdengantampilan yang dapat scroll. ListViewmenampilkan item-item darisuatu Array atau List atau Query Database yang dijadikan data model sebagai item dariListView.

Adapter adalah class yang mengatur item-item padaListView. Adapter mengatur resource view padasetiap item dariListView. Resource view padaListView yang adapadasebuahtampilanlayarsebuahaplikasimemilikijumlah resource view yang tetapsesuaidengan item yang tampakpadalayar. PadaListViewdengantampilan scroll, resourve view akandigunakansecaraberulang (reusable) denganmengatur item yang tampakdan yang tersembunyipadaListView. Adapter jugamengatur data model darisetiap item ListView. Sebuah data model akandiaturmenjadisebuah item dariListView. 

ListViewdikatakansederhanaataukomplekditentukanolehkompleksitas item dariListViewtersebut. Jikamasing-masing item dariListViewmenampilkansebuah kata ataukalimatsaja, makaListViewtersebutsederhana.Jikamasing-masing item dariListViewmemilikiisi yang komplekseperti item darisebuah status jejaringsosialdimanapadamasing-masing item memilikifotoprofil, nama, waktu, status dankomentar, makaListViewtersebutadalahListViewkomplek. PembuatanListViewkomplekdilakukandengan Custom ListView.

D.    LangkahKerja

1.      Buatlahsebuah project android barudengannamaListViewSederhana 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[] arrNamemerupakankumpulan data String yang akanditampilkanpadaListView. Array inidimasukkankedalam object dariArrayAdapter yang bernama adapter. Adapter inimerupakan adapter sederhana yang hanyamenampilkansebuahTextViewpada item ListView. Code ListViewlistView = (ListView) findViewById

(R.id. id_list); membuat object dari class ListViewdenganmenginisiasi object tersebutdenganListView yang kitabuatpada file layout.xml.Jalankan project, makaListViewtampilsepertiberikutini.

 4. Jalankan program, sehingga hasilnya sebagai berikut:

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.      Untukmembuat Custom ListView, kitabuatterlebihdahulu layout-layoutnya. Kita membutuhkan 2 layout, yaitu layout halaman yang menampilkanListViewdan layout item untuk Adapter.

2.      Buat project baru dengan nama ListViewCustom.

3.      Layout halaman utama kitabuatdenganmenyesuaikan file main.xml di dalam folder layout denganisisepertiini :

4.      Buat layout baru : Layout item untuk Adapter kitabuatdenganmembuat file item.xml di dalam folder layout denganisisepertiini :

5.      Kemudiankitasiapkangambar yang menjadi icon dari item ListView. Sayapakaigambar Android sepertiinidenganukuran 48 x 48 px (panjang x lebarharussama). Kita simpangambarpada folder drawable-hdpidengannama icon.png.

6.      Kemudiankitabuatsebuah class data model dari item ListView yang bernama class Phone. Object dari class iniakanmenyimpan data-data yang akanditampilkanpada item dariListView. Sebuah object dari class Phone akanditampilkanpadasebuah item dariListView. Kita buat class yang bernama Phone.java denganisi class sebagaiberikut.

7.      Kemudiankitabuat class Adapter. Class Adapter adalah class yang akanmembuatdanmengatur item-item dariListView. Class inimengkonversi data dari object Phone menjadi item dariListView. Kita buat class yang bermama ListAdapter.java denganisi class sebagaiberikut :

8.      Kemudiansesuaikan class ListViewCustomActivity (class inibiasanyasudahdibuatotomatispada project) sebagai class controller yang mengelolapembuatan Custom ListView. Buat class ListViewCustomActivity.java denganisisebagaiberikut :

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

E.     TUGAS

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

2.      Buat project baru dengan nama Listviewpenugasan.

3.      Layout halaman utama kitabuatdenganmenyesuaikan file main.xml di dalam folder layout denganisisepertiini :

4.      Buat layout baru : Layout item untuk Adapter kitabuatdenganmembuat file item.xml di dalam folder layout denganisisepertiini :

5.      Kemudiankitasiapkangambar yang menjadi icon dari item ListView. Sayapakaigambar Android sepertiinidenganukuran 48 x 48 px (panjang x lebarharussama). Kita simpangambarpada folder drawable-hdpidengannama:

6.      Kemudiankitabuatsebuah class data model dari item ListView yang bernama class Phone. Object dari class iniakanmenyimpan data-data yang akanditampilkanpada item dariListView. Sebuah object dari class Phone akanditampilkanpadasebuah item dariListView. Kita buat class yang bernama Phone.java denganisi class sebagaiberikut.

7.      Kemudiankitabuat class Adapter. Class Adapter adalah class yang akanmembuatdanmengatur item-item dariListview. Class inimengkonversi data dari object Phone menjadi item dariListview. Kita buat class yang bermama ListAdapter.java denganisi class sebagaiberikut :

8.      Kemudiansesuaikan class ListviewpenugasanActivity (class inibiasanyasudahdibuatotomatispada project) sebagai class controller yang mengelolapembuatan Listview. Buat class ListviewpenugasanActivity.java denganisisebagaiberikut :

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