Google menyarankan pengembang untuk menggunakan RecyclerView untuk membuat ListView. Kebanyakan dari kita, sih, sudah cukup puas dengan ViewHolder sendiri. Biasanya, untuk mengambil gambar menggunakan pustaka yang sudah jadi semacam Picasso atau Android Universal Image Loader.

Saat ini saya tertarik dengan RecyclerView karena itu yang disarankan oleh Google. Masih jarang yang memakainya. Mungkin karena berhubung pustaka ini termasuk ke dalam paket AppCompat v21, pustaka yang menerjemahkan beberapa konsep Material Design ke Android versi sebelum Lolipop.

Saya asumsikan Anda sudah terbiasa dengan pengembangan Android, atau mungkin baru belajar seperti saya. Saya sendiri belum sebulan baru belajar. Itu sebabanya, saya menggunakan Android Studio. Tapi, untuk ADT langkahnya miriplah.

Silakan berbagi di bagian komentar. Jangan harapkan saya bisa jawab banyak, ya. Saya belum sebulan belajar Android.

Pembicaraan Jorok

Cara kerja saya begini:

  1. Siapkan paket yang diperlukan.
  2. Buat Model Data, Tampilan Data.
  3. Buat Adapter untuk merekatkan Model Data dengan Tampilan Data.
  4. Masukkan ke dalam Activity.
  5. Buat logika yang diperlukan untuk memroses model data.

Demikian, saya menerapkan MVC kepada proyek Android.

Persiapan

Pertama-tama, masukkan paket RecyclerView ke dalam skrip Gradle: build.gradle (Module:app)

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.+'
    compile 'com.android.support:recyclerview-v7:21.0.+'
}

Paket RecyclerView ada di com.android.support:recyclerview-v7. Appcompat-v7 untuk membuat ActionBarActivity dan beberapa widget Material Design lainnya.

Model-model yang Diperlukan

Biar tidak rumit, saya mau buat daftar yang berisi:

  1. nama pengguna; dan
  2. avatar-nya.

Saya buat sebuah POJO untuk itu.

package edu.ui.jp.pelatihan.materialdesignapps.data;

public class PersonData {
    private String name, url;

    public PersonData(String name, String url) {
        this.name = name;
        this.url = url;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
}

Selanjutnya, saya rancangkan tampilan gambar avatar dan di sebelahnya ada nama.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="64dp">

    <ImageView
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:id="@+id/imgAvatar"
        android:layout_margin="8dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:id="@+id/txtName"
        android:layout_gravity="center_vertical" />
</LinearLayout>

Sudah demikian, saatnya membuat Adapter.

Adapter

RecycleView menyediakan sebuah adapter RecyclerView.Adapter yang berisi sebuah ViewHolder. Cara definisinya:

public class PersonDataViewAdapter extends RecyclerView.Adapter <PersonDataViewAdapter.ViewHolder> {
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 0;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        public ViewHolder(View itemView) {
            super(itemView);
        }
    }
}

Selanjutnya, mari kita definisikan semua itu. Saya suka untuk kita memulai dari model data. Ada dua model data yang hendak dipertemukan, yakni tampilan dan sekumpulan data yang hendak ditampilkan. Mari definisikan satu per satu.

Buat Model Tampilan

Model tampilan dipegang oleh sebuah kelas statik dalam adapter kita (inner class) ViewHolder. Kelas ViewHolder ini merupakan kelas statik di dalam (inner class) RecyclerView. Untuk kesederhanaan, kita hanya akan mengubah-ubah TextView untuk nama dan mengabaikan ImageView untuk avatar. Topik untuk mengisi gambar sangat menarik untuk menjadi satu pokok topik lain.

/**
 * Kelas publik yang akan dipakai sebagai ViewHolder
 */
public static class ViewHolder extends RecyclerView.ViewHolder {
   public TextView txtName;

   public ViewHolder(View itemView) {
       super(itemView);
       txtName = (TextView) itemView.findViewById(R.id.txtName);
   }
}

Seperti yang kita lihat, kelas ViewHolder kita diharuskan memanggil konstruktur RecyclerView.ViewHolder sebelum menjalankan rutinnya sendiri.

Buat Model Data yang Hendak Ditempel

Model Data yang digunakan oleh adapter biasanya dijadikan properti. Inisialisasinya dibuat dengan memanggil konstruktor adapter kita saja. Jadi, setiap kali mau membuat adapter, si pemanggil harus menyampaikan data yang hendak ditampilkan sebagai parameter.

private LinkedList listData;

/**
 * Konstruktor untuk mengisi Adapter dengan untaian data yang hendak ditaruh.
 * @param listData
 */
public PersonDataViewAdapter(LinkedList listData) {
    this.listData = listData;
}

Selanjutnya, kita mendefinisikan tiga fungsi yang wajib ada.

Definisikan fungsi yang mengembalikan total jumlah data yang ada. Tentu saja ini didapatkan dari banyaknya data yang dikandung oleh untaian data kita.

/**
 * Fungsi ini mengembalikan jumlah data yang hendak ditampilkan
 * @return Jumlah data dalam untaian.
 */
@Override
public int getItemCount() {
    return listData.size();
}

Selanjutnya, buat definisi untuk mengembalikan ViewHolder kita yang nantinya dipakai oleh LayoutManager untuk menggambar untaian. Perhatikan. Pada bagian ini ViewHolder mengambil tata letak (layout) tampilan data kita.

/**
 * Fungsi yang akan ditaruh oleh LayoutManager ketika hendak membuat tampilan (View) baru.
 * @param root Fragment/Activity yang hendak ditempeli untaian (List)
 * @param viewType Tipe View yang hendak dihasilkan.
 * @return
 */
@Override
public ViewHolder onCreateViewHolder(ViewGroup root, int viewType) {
    // Dapatkan View dari inflater
    View v = LayoutInflater.from(root.getContext()).inflate(R.layout.inf_person_view, null);

    // Masukkan ke dalam ViewHolder yang baru
    ViewHolder myVH = new ViewHolder(v);

    // Kembalikan ViewHolder yang sudah kita panggil.
    return myVH;
}

Terakhir, definisikan proses penempelan data ke tampilan.

/**
 * Fungsi ini mengisi setiap data ke View.
 * @param holder Pemegang View yang hendak diperbaharui
 * @param i Posisi data yang hendak diisi dalam untaian
 */
 @Override
public void onBindViewHolder(ViewHolder holder, int i) {
    // Mengambil satu item yang hendak ditaruh
    PersonData item = listData.get(i);

    holder.txtName.setText(item.getName());
    Log.d(this.getClass().getCanonicalName(), item.getName());
}

Setelah tampilan dan data telah kita buat, selanjutnya mari kita buat alur penampakannya di salah satu aktivitas.

Menaruh Dalam Aktivitas

Bisa saja kode ini bisa ditaruh di dalam fragmen (fragment) atau di dalam aktivitas. Yang pasti yang pasti, taruh inisialisasi pada

public class MainActivity extends ActionBarActivity {

    LinkedList<PersonData> list = new LinkedList<PersonData>();

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

        populateData(); // Fill the LinkedList here.
        createPersonDataView();
    }
    
    // AND THE REST OF THE CODE GOES HERE...
}

Pertama-tama, isi data terlebih dahulu dengan populateData(). Fungsi ini terserah, entah Anda isi dengan obyek-obyek contoh yang dimasukkan manual, didapatkan dari web service, diambil dari berkas, dan sebagainya. Intinya, isi dulu LinkedList yang akan dipakai untuk menampilkan daftar.

Barulah setelah itu, kita membuat RecyclerView untuk ditampilkan. Contoh implementasinya.

private void configMyRecyclerView() {
        RecyclerView rvList = (RecyclerView) findViewById(R.id.rvNameList);

        // List kita tidak berubah-ubah ukurannya.
        rvList.setHasFixedSize(true);

        // Buat LayoutManager dari Activity ini (MainActivity)
        RecyclerView.LayoutManager layoutManager = new   LinearLayoutManager(this);
    rvList.setLayoutManager(layoutManager);

    // Taruh data kita ke dalam data
    PersonDataViewAdapter adapter = new PersonDataViewAdapter(list);

    // Taruh adapter ke dalam RecycleView
    rvList.setAdapter(adapter);

    // Sedikit animasi pemanis
    rvList.setItemAnimator(new DefaultItemAnimator());

}

Ada banyak Layout Manager yang bisa digunakan. Namun, untuk contoh kali ini gunakan saja yang biasa, yakni LinearLayoutManager. Tugas dia hanya menampilkan per baris seperti daftar pada umumnya. Kalau mau lebih lanjut, silakan coba-coba yang lain.

Terakhir

Baiklah, saya berhenti sampai sini. Sisanya, kelakukan RecyclerView mirip dengan komponen Android yang lain. Selamat berkarya!