RSS

Men-customize isi ListView

03 May

Waduh, uda lama ni ga posting, 1 bulan cuy,,

skrg gw pengen post tutorial yang agak advance dikit, yaitu gimana si cara melakukan customize tampilan isi ListView.
Di artikel dari Android nya, di halaman ini http://developer.android.com/resources/tutorials/views/hello-listview.html, kita hanya diajarkan membuat ListView yang isinya 1 string saja. Nah, trus bagaimana kalau kita mau memberi beberapa tulisan, atau kita mau memberi gambar atau widget-widget lain dalam ListView kita? Nah, gw bakal jelasin di tutorial kali ini.

Gw rekomendasi untuk mempelajari link dari Android yg ada di atas dulu, untuk mengerti dasar dari ListView, sebelum membaca tutorial ini.

Ok, kita mulai aja, jadi kita bikin tampilan utama dari Activity kita yang berisi sebuah ListView,

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ListView
	android:id="@+id/main_listview"  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    />
</LinearLayout>

nah, sesudah kita membuat layout dengan ListView, selanjutnya kita akan membuat sebuah layout lagi yang merupakan isi dari tiap bagian ListView kita. Jika pada tutorial di atas hanya berisi 1 TextView, maka di sini akan saya beri contoh untuk 2 TextView.

layout_inflate_list.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  android:paddingLeft="8dip">
  <TextView
	android:id="@+id/inflate_title"  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:textSize="20dip"
    />
  <TextView
	android:id="@+id/inflate_body"  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:textSize="12dip"
    />
</LinearLayout>

Sebetulnya, di code ini lah kita melakukan customize atas ListView kita, dalam contoh ini mungkin hanya sederhana yaitu 2 TextView saja, ini bisa ditambah kok, misal mau ada ImageView, button, atau yang lainnya, tinggal di letakkan aja di layout ini..

Sampai sini mengerti?? harusnya tidak terlalu sulit karena baru di layout.. ^^
Nah, ini yang mulai agak rumit. Selanjutnya, kita akan membuat Adapter. Adapter itu adalah isi dari ListView, jadi adapter ini lah yang menentukan bagaimana tampilan isi ListView, berapa jumlahnya, dan semua konten yang ada dalam ListView.
Adapter digunakan tidak hanya pada ListView, tetapi juga pada widget lain yang memuat beberapa data serupa lainnya seperti Gallery dan  GridView..

oke, untuk code Adapter, kita buat class java baru, click New, Class pada package, beri nama Adapter_ListView, dan ketikkan kode di bawah ini

package com.daniel.customlist;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class Adapter_ListView extends BaseAdapter{

	private int count;
	private Context context;

	public Adapter_ListView(int count, Context context)
	{
		this.count = count;
		this.context = context;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return count;
	}

	@Override
	public Object getItem(int arg0) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public long getItemId(int arg0) {
		// TODO Auto-generated method stub
		return 0;
	}

	@Override
	public View getView(int position, View contentView, ViewGroup arg2) {
		// TODO Auto-generated method stub
		LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		contentView = inflater.inflate(R.layout.layout_inflate_list, null);

		TextView title = (TextView)contentView.findViewById(R.id.inflate_title);
		TextView body = (TextView)contentView.findViewById(R.id.inflate_body);

		title.setText("Title - "+position);
		body.setText("Body - "+position);

		return contentView;
	}

}

oke, maksud dari coding diatas:
yang ‘public Adapter_ListView(int count, Context context)’ itu disebut constructor, yaitu fungsi yang akan dijalanin saat kita buat adapter baru, dipanggilnya ntar pake fungsi ‘new Adapter_ListView(count, context)’ disini kita akan melakukan passing untuk menentukan jumlah List yang diinginkan, dan juga context. buat yang bingung, context diperlukan untuk menghubungkan Activity utama dengan Adapter. Dengan adanya context, Class Adapter inipun juga bisaa untuk mengakses data-data pada Activity utama seperti Resource, SharedPreferences, dll.

Terus yang ‘getCount()’ adalah fungsi untuk mengembalikan jumlah data, fungsi ini diperlukan oleh Android juga untuk mengetahui jumlah data yang akan ditampilkan, jadi jangan lupa untuk mengupdate hasil return dari getCount() ini karena default nya adalah 0.

Lalu yang penting lagi adalah ‘getView(int position, View contentView, ViewGroup arg2)’ disini, kita akan melakukan coding untuk tampilan per-posisi,
LayoutInflater berarti kita ‘menghubungkan’ layout inflate yang telah kita buat tadi dengan adapter. Lalu pada contoh ini saya akan mengubah tulisan pada setiap List menjadi ‘Title – [nomor posisi]”, perlu diingat untuk position akan dimulai dari angka 0 seperti array pada umumnya.

Huff, pada nangkep kan?? kalo ada yang ga ngerti monggo comment.. ^^
lanjut, kita coding di main activity nya ya…

main.java

package com.daniel.customlist;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;

public class main extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        ListView list = (ListView)findViewById(R.id.main_listview);

        Adapter_ListView adapter = new Adapter_ListView(10, getBaseContext());
        list.setAdapter(adapter);
    }
}

nah, ini lumayan pendek, jadi kita mendeklarasikan ListView, lalu meng-inisialisasi adapter yang telah kita buat tadi, lalu menggabungkannya dengan ListView dengan perintah list.setAdapter(adapter)..
haha, agak rumit sih, semoga mengerti… ini screenshot hasilnya:

 
10 Comments

Posted by on May 3, 2011 in Tutorial Advance

 

10 responses to “Men-customize isi ListView

  1. khalifahkelima

    June 23, 2011 at 12:40 am

    Mas, itu kan list-nya cuma menampilkan Title-(i) dan Body-(i) yang digenerate sama Adapter_Listview. Gimana kalau kita perlu menampilkan berita beneran, misalnya kita pengen nampilin 10 berita dg judul dan body beneran. Anggap aja beritanya bisa di tulis hard coded aja di program. Bisa bantu nggak?

     
    • Daniel Hace

      June 23, 2011 at 3:36 am

      Terima kasih khalifahkelima…
      nah, itu contoh sederhana kalau kita hanya passing jumlah baris yang kita inginkan.. kalau misal seperti kasus yang ditanyakan di atas, mungkin kita bisa dengan memasukan judul + body nya ke dalam array misal title[10] = {“Judul pertama” , “Judul kedua” , ……..} dan body[10] = {“body satu” , “body dua” , ……} pada Activity main nya, lalu array nya yang kita passing ke Adapter_ListView.
      Caranya, constructor Adapter_ListView nya diubah jadi :

      public Adapter_ListView (Context context, String[] title, String[] body)
      {
         this.count = title.length;
         this.context = context;
         this.title = title;
         this.body = body
      }
      

      jangan lupa membuat variabel String[] untuk title dan body.
      lalu tinggal di getView nya saja diganti jadi title.setText(title[position]);

      Semoga berguna.. ^^

       
  2. beebobie

    August 6, 2011 at 11:59 pm

    kalau masukin gambar gimana jadinya kak ?
    gak pake count gitukan ?
    kaya list viewnya pengaturan di android hp tuhmantep ada gambarnya per list, 🙂

     
    • Daniel Hace

      March 3, 2012 at 9:41 am

      Halo beebobie, maaf kalau jawabnya agak lama, soalnya saya udah lama ga buka blog..
      itu kalau kamu masu masukin gambar, tinggal bikin ImageView aja di layout_inflate_list.xml nya, nanti kamu ganti gambar nya di tiap kali getCount(), tergantung posisi gambar nya di list ke berapa..

      Thx

       
  3. pras

    January 15, 2012 at 6:05 pm

    betul om, , klo listviewnya dikasih background gmna caranya …

     
    • Daniel Hace

      March 3, 2012 at 9:43 am

      Halo pras, kalo mau di beri background di tiap barus list nya, bisa ditaruh di layout_inflate_list nya, trus kalau seperti contoh di atas, LinearLayout nya layout_inflate_list tinggal diberi background gambar seperti biasa

      Thx

       
    • Dwike Aprilia S

      September 21, 2012 at 9:12 pm

      nah gan pertanyaan ane juga sama kaya di atas…gimana kalo kita mau nambahin background buat listviewnya? bisa nggak langsung di xml listviewnya aja gan??? jadi gak usah koding di javanya,,,

      mohon pencerahannya ya gan 🙂
      thx

       
      • Daniel Hace

        October 28, 2012 at 9:24 am

        Hi Dwike,
        kalau buat kasi background buat list, di layout_inflate_list.xml nya di dalem view nya dikasih android:background langsung di xml nya bisa kok..
        Jadi ga perlu coding di java.

        Thanks

         
  4. agus yuli

    June 28, 2012 at 5:09 pm

    Maz , mo tanya nie kalo tiap listview di atas kita parsing ke activity lain yang beda2 gmn ya caranya ?

     
    • Daniel Hace

      October 28, 2012 at 9:37 am

      Hi Agus Yuli,

      itu maksud nya kalau di klik ke activity beda2 kan?
      itu caranya diberi OnItemClickListener, seperti ini:

      listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
      
      	@Override
      	public void onItemClick(AdapterView<?> arg0, View arg1, int position,
      			long arg3) {
      		// TODO Auto-generated method stub
      		if(position == 0){
                         //susun intent kalau index ke 0 di klik
                      }
                      else if(position == 1){
                         //susun intent kalau index ke 1 di klik
                      }
      	}
      });
      

      jadi harus diberi if atau switch case setiap kali OnItemClickListener nya..

      Thanks

       

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: