Membuat daftar dinamis dengan RecyclerView Bagian dari Android Jetpack.
RecyclerView memudahkan untuk menampilkan kumpulan data dalam jumlah besar secara efisien. Anda menyediakan data dan menentukan tampilan setiap item, dan library RecyclerView secara dinamis membuat elemen saat diperlukan.
Sesuai namanya, RecyclerView mendaur ulang elemen individual tersebut. Saat item di-scroll keluar layar, RecyclerView tidak merusak tampilannya. Sebaliknya, RecyclerView menggunakan kembali tampilan tersebut untuk item baru yang telah di-scroll di layar. Penggunaan ulang ini sangat meningkatkan performa, meningkatkan daya respons aplikasi, dan mengurangi pemakaian daya.
Catatan: Selain menjadi nama class, RecyclerView juga merupakan nama
library. Di halaman ini, RecyclerView
di code font
selalu berarti class dalam library RecyclerView.
Class utama
Beberapa class yang berbeda bekerja sama untuk membuat daftar dinamis Anda.
RecyclerView
adalahViewGroup
yang berisi tampilan yang sesuai dengan data Anda. ViewGroup sendiri juga merupakan tampilan, jadi Anda menambahkanRecyclerView
ke tata letak dengan cara yang sama seperti menambahkan elemen UI lainnya.Setiap elemen individual dalam daftar ditentukan oleh objek pemegang tampilan. Saat pemegang tampilan dibuat, tidak ada data yang diatribusikan dengannya. Setelah pemegang tampilan dibuat,
RecyclerView
akan mengikat properti tersebut ke datanya. Anda dapat menentukan pemegang tampilan dengan memperluasRecyclerView.ViewHolder
.RecyclerView
meminta tampilan tersebut, dan mengikat tampilan ke datanya, dengan memanggil metode di adaptor. Tentukan adaptor dengan memperluasRecyclerView.Adapter
.Pengelola tata letak mengatur elemen individual dalam daftar Anda. Anda dapat menggunakan salah satu pengelola tata letak yang disediakan oleh library RecyclerView, atau menentukannya sendiri. Pengelola tata letak semuanya didasarkan pada class abstrak
LayoutManager
library.
Anda dapat melihat semua bagian berfungsi pada tempatnya dalam aplikasi contoh RecyclerView (Kotlin) atau aplikasi contoh RecyclerView (Java).
Langkah-langkah untuk menerapkan RecyclerView
Jika Anda akan menggunakan RecyclerView, ada beberapa hal yang perlu dilakukan. Hal-hal tersebut akan dibahas secara mendetail di bagian berikut.
Pertama-tama, tentukan bagaimana daftar atau petaknya ingin ditampilkan. Umumnya, Anda akan dapat menggunakan salah satu pengelola tata letak standar library RecyclerView.
Buat desain tampilan dan perilaku setiap elemen dalam daftar. Berdasarkan desain ini, perluas class
ViewHolder
. VersiViewHolder
menyediakan semua fungsi untuk item daftar Anda. Pemegang tampilan Anda adalah wrapper di sekitarView
, dan tampilan tersebut dikelola olehRecyclerView
.Tentukan
Adapter
yang mengatribusikan data Anda dengan tampilanViewHolder
.
Ada juga opsi penyesuaian lanjutan yang memungkinkan Anda menyesuaikan RecyclerView dengan kebutuhan yang tepat.
Merencanakan tata letak
Item di RecyclerView diatur oleh class
LayoutManager
.
Library RecyclerView menyediakan tiga pengelola tata letak, yang menangani
situasi tata letak paling umum:
LinearLayoutManager
menyusun item dalam daftar satu dimensi.GridLayoutManager
menyusun semua item dalam petak dua dimensi:- Jika petak disusun secara vertikal,
GridLayoutManager
akan mencoba membuat semua elemen dalam setiap baris agar memiliki lebar dan tinggi yang sama, tetapi baris yang berbeda dapat memiliki tinggi yang berbeda. - Jika petak disusun secara horizontal,
GridLayoutManager
akan mencoba membuat semua elemen dalam setiap kolom agar memiliki lebar dan tinggi yang sama, tetapi kolom yang berbeda dapat memiliki lebar yang berbeda.
- Jika petak disusun secara vertikal,
StaggeredGridLayoutManager
mirip denganGridLayoutManager
, tetapi tidak memerlukan item dalam baris yang memiliki tinggi yang sama (untuk petak vertikal) atau item di kolom yang sama memiliki lebar yang sama (untuk petak horizontal). Hasilnya adalah item dalam baris atau kolom dapat saling mengimbangi.
Anda juga harus mendesain tata letak setiap item. Anda akan memerlukan tata letak ini saat mendesain pemegang tampilan, seperti yang dijelaskan di bagian berikutnya.
Menerapkan adaptor dan pemegang tampilan
Setelah menentukan tata letak, Anda perlu menerapkan Adapter
dan ViewHolder
. Kedua class ini bekerja sama untuk menentukan cara data Anda
ditampilkan. ViewHolder
adalah wrapper di sekitar View
yang berisi
tata letak untuk setiap item dalam daftar. Adapter
membuat objek ViewHolder
seperlunya, serta menetapkan data untuk tampilan tersebut. Proses
yang mengatribusikan tampilan ke datanya disebut binding.
Saat menentukan adaptor, Anda perlu mengganti tiga metode utama:
onCreateViewHolder()
:RecyclerView
memanggil metode ini setiap kali perlu membuatViewHolder
baru. Metode ini membuat serta menginisialisasiViewHolder
danView
-nya yang diatribusikan, tetapi tidak mengisi konten tampilan—ViewHolder
belum terikat dengan data tertentu.onBindViewHolder()
:RecyclerView
memanggil metode ini untuk mengatribusikanViewHolder
dengan data. Metode ini mengambil data yang sesuai dan menggunakan data tersebut untuk mengisi tata letak pemegang tampilan. Misalnya, jikaRecyclerView
menampilkan daftar nama, metode tersebut mungkin menemukan nama yang sesuai di dalam daftar dan mengisi widgetTextView
pemegang tampilan.getItemCount()
: RecyclerView memanggil metode ini untuk mendapatkan ukuran set data. Misalnya, dalam aplikasi buku alamat, ukuran mungkin berupa jumlah total alamat. RecyclerView menggunakan ukuran ini untuk menentukan bahwa tidak ada lagi item yang dapat ditampilkan.
Berikut adalah contoh umum adaptor sederhana dengan ViewHolder
bertingkat yang
menampilkan daftar data. Dalam hal ini, RecyclerView menampilkan daftar sederhana
elemen teks. Adaptor ini meneruskan array string, yang berisi teks
untuk elemen ViewHolder
.
Kotlin
class CustomAdapter(private val dataSet: Array<String>) : RecyclerView.Adapter<CustomAdapter.ViewHolder>() { /** * Provide a reference to the type of views that you are using * (custom ViewHolder). */ class ViewHolder(view: View) : RecyclerView.ViewHolder(view) { val textView: TextView init { // Define click listener for the ViewHolder's View. textView = view.findViewById(R.id.textView) } } // Create new views (invoked by the layout manager) override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder { // Create a new view, which defines the UI of the list item val view = LayoutInflater.from(viewGroup.context) .inflate(R.layout.text_row_item, viewGroup, false) return ViewHolder(view) } // Replace the contents of a view (invoked by the layout manager) override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) { // Get element from your dataset at this position and replace the // contents of the view with that element viewHolder.textView.text = dataSet[position] } // Return the size of your dataset (invoked by the layout manager) override fun getItemCount() = dataSet.size }
Java
public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.ViewHolder> { private String[] localDataSet; /** * Provide a reference to the type of views that you are using * (custom ViewHolder). */ public static class ViewHolder extends RecyclerView.ViewHolder { private final TextView textView; public ViewHolder(View view) { super(view); // Define click listener for the ViewHolder's View textView = (TextView) view.findViewById(R.id.textView); } public TextView getTextView() { return textView; } } /** * Initialize the dataset of the Adapter. * * @param dataSet String[] containing the data to populate views to be used * by RecyclerView. */ public CustomAdapter(String[] dataSet) { localDataSet = dataSet; } // Create new views (invoked by the layout manager) @Override public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) { // Create a new view, which defines the UI of the list item View view = LayoutInflater.from(viewGroup.getContext()) .inflate(R.layout.text_row_item, viewGroup, false); return new ViewHolder(view); } // Replace the contents of a view (invoked by the layout manager) @Override public void onBindViewHolder(ViewHolder viewHolder, final int position) { // Get element from your dataset at this position and replace the // contents of the view with that element viewHolder.getTextView().setText(localDataSet[position]); } // Return the size of your dataset (invoked by the layout manager) @Override public int getItemCount() { return localDataSet.length; } }
Tata letak untuk setiap item tampilan didefinisikan dalam file tata letak XML, seperti biasa.
Dalam hal ini, aplikasi memiliki file text_row_item.xml
seperti ini:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/list_item_height"
android:layout_marginLeft="@dimen/margin_medium"
android:layout_marginRight="@dimen/margin_medium"
android:gravity="center_vertical">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/element_text"/>
</FrameLayout>
Langkah berikutnya
Anda hanya memerlukan implementasi RecyclerView
seperti ini. Namun,
library juga menawarkan banyak cara untuk menyesuaikan implementasi Anda. Untuk informasi
selengkapnya, lihat Penyesuaian RecyclerView
Lanjutan.
Referensi lainnya
Untuk informasi selengkapnya tentang pengujian pada Android, lihat referensi berikut.