Membuat list view seperti kontak di Android

5 Tanggapan

List view merupakan komponen yang sering digunakan dalam aplikasi android. Untuk membuatnya kita dapat memanfaatkan komponen list view yang ada di Android.

Pada kesempatan kali ini ane ingin memberikan tutorial bagaimana membuat list view dengan menggunakan index seperti pada Kontak pada Android yang dapat memberikan index alphabet. Okeh tujuan kita akan membuat list view seperti pada gambar di bawah ini ....

Okeh langsung saja untuk membuat list view seperti gambar di atas yang diperlukan adalah section indexer yang dipakai untuk membuat index pada data yang akan kita tampilkan pada list view.

Langsung aja ane contohkan untuk menampilkan kontak ane tarik dari cursor di Android. Nah code untuk mengambil kontak dari Android sebagai berikut :

public static Cursor getContact(Context context) {

        Uri uri = ContactsContract.Contacts.CONTENT_URI;
        String[] projection = new String[] {
          ContactsContract.Contacts._ID,
          ContactsContract.Contacts.DISPLAY_NAME
        };
        boolean mShowInvisible=false;
        String selection = ContactsContract.Contacts.IN_VISIBLE_GROUP + " = '" +
          (mShowInvisible ? "0" : "1") + "'";
        String[] selectionArgs = null;
        String sortOrder = ContactsContract.Contacts.DISPLAY_NAME + " COLLATE LOCALIZED ASC";
        return context.getContentResolver().query(uri, projection, selection, selectionArgs, sortOrder);
 }

Nah itu digunakan untuk mengambil datanya. Sekarang kita buat Adapter untuk list viewnya...

class MyCursorAdapter extends SimpleCursorAdapter implements SectionIndexer {

  AlphabetIndexer alphaIndexer;

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
   return super.getView(position, convertView, parent);
  }

  public MyCursorAdapter(Context context, int layout, Cursor c,
    String[] from, int[] to) {
   
   super(context, layout, c, from, to);
   alphaIndexer = new AlphabetIndexer(
     c,
     myCursor.getColumnIndex(ContactsContract.Contacts.DISPLAY_NAME),
     " ABCDEFGHIJKLMNOPQRSTUVWXYZ");
  }

  public int getPositionForSection(int section) {
   return alphaIndexer.getPositionForSection(section); // use the
   // indexer
  }

  public int getSectionForPosition(int position) {
   return alphaIndexer.getSectionForPosition(position); // use the
   // indexer
  }

  public Object[] getSections() {
   return alphaIndexer.getSections(); // use the indexer
  }

 }

Okeh sekarang karena cursor dan adapter yang kita pakai sudah siap tinggal gunakan diactivity yang kita inginkan. Bisa ditransfer ke listactivity atau list view kita sendiri.

Pada contoh di atas ane gunain untuk pembuatan custom list view dengan format xml seperti berikut:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="@+id/gambar" android:src="@drawable/playbackstart"></ImageView>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:background="@drawable/listview"
android:orientation="vertical" android:padding="10dip">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="@+id/judul" style="@style/CodeFont"
android:text="Test"></TextView>
<TextView
   android:id="@+id/judul2"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="Lagu"
   android:textColor="#E0A80B" >
</TextView>
</LinearLayout>
</LinearLayout>

Oke untuk penggunaannya kita bisa gunakan pada activity seperti berikut ini :

myCursor = ContactHelper.getContact(this); 
myListView.setFastScrollEnabled(true); 
myListView.setAdapter(new MyCursorAdapter(getApplicationContext(),
    R.layout.list, myCursor,
    new String[] { ContactsContract.Contacts.DISPLAY_NAME },new int[] { R.id.judul })

    );