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. RecyclerView meningkatkan performa dan daya respons aplikasi Anda, dan mengurangi konsumsi daya.
Class utama
Beberapa class bekerja sama untuk membuat daftar dinamis Anda.
RecyclerView
adalahViewGroup
yang berisi tampilan yang sesuai dengan data Anda. Ini adalah tampilan itu sendiri, jadi Anda menambahkanRecyclerView
ke tata letak Anda dengan cara 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
mengikat properti tersebut ke datanya. Anda dapat menentukan pemegang tampilan dengan memperluasRecyclerView.ViewHolder
.RecyclerView
meminta tampilan, 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 bagaimana semua bagian cocok di 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 ini dijelaskan secara mendetail di bagian berikut.
Tentukan tampilan daftar atau petak. Biasanya, Anda bisa menggunakan salah satu pengelola tata letak standar library RecyclerView.
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
mengatur item dalam kisi-kisi 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 perlu mendesain tata letak setiap item. Anda memerlukannya saat Anda mendesain {i>view holder<i}, seperti yang dijelaskan di bagian berikutnya.
Menerapkan adaptor dan holder tampilan
Setelah menentukan tata letak, Anda perlu mengimplementasikan 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 masing-masing item dalam daftar. Adapter
membuat ViewHolder
objek sesuai kebutuhan dan juga menetapkan data untuk tampilan tersebut. Proses
yang mengatribusikan tampilan ke datanya disebut binding.
Saat menentukan adaptor, Anda akan 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 mungkin menemukan nama yang sesuai dalam daftar dan mengisi tampilan widgetTextView
holder.getItemCount()
:RecyclerView
memanggil metode ini untuk mendapatkan ukuran set data. Misalnya, di aplikasi buku alamat, ini mungkin adalah jumlah total alamat. RecyclerView menggunakan ini untuk menentukan jika tidak ada lagi item yang bisa ditampilkan.
Berikut adalah contoh umum adaptor sederhana dengan ViewHolder
bertingkat yang
menampilkan daftar data. Dalam hal ini, RecyclerView menampilkan daftar sederhana
elemen teks. Adaptor diberi 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
Cuplikan kode berikut menunjukkan cara menggunakan RecyclerView
.
Kotlin
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val dataset = arrayOf("January", "February", "March") val customAdapter = CustomAdapter(dataset) val recyclerView: RecyclerView = findViewById(R.id.recycler_view) recyclerView.layoutManager = LinearLayoutManager(this) recyclerView.adapter = customAdapter } }
Java
RecyclerView recyclerView = findViewById(R.id.recycler_view); recyclerView.layoutManager = new LinearLayoutManager(this) recyclerView.setAdapter(customAdapter);
Library ini juga menawarkan banyak cara untuk menyesuaikan implementasi Anda. Untuk selengkapnya lihat informasi RecyclerView Lanjutan penyesuaian.
Referensi lainnya
Untuk informasi selengkapnya tentang pengujian pada Android, lihat referensi berikut.