Membuat daftar dinamis dengan RecyclerView   Bagian dari Android Jetpack.

Mencoba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan tata letak di Compose.
Daftar dan Petak Lambat →

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 responsivitas aplikasi Anda, serta mengurangi konsumsi daya.

Class utama

Beberapa class bekerja sama untuk membuat daftar dinamis Anda.

  • RecyclerView adalah ViewGroup yang berisi tampilan yang sesuai dengan data Anda. ViewGroup sendiri juga merupakan tampilan, jadi Anda menambahkan RecyclerView 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 mengikat properti tersebut ke datanya. Anda dapat menentukan pemegang tampilan dengan memperluas RecyclerView.ViewHolder.

  • RecyclerView meminta tampilan, dan mengikat tampilan ke datanya, dengan memanggil metode di adaptor. Tentukan adaptor dengan memperluas RecyclerView.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 dijelaskan secara mendetail di bagian berikut.

  1. Tentukan tampilan daftar atau petak. Biasanya, Anda dapat menggunakan salah satu pengelola tata letak standar library RecyclerView.

  2. Buat desain tampilan dan perilaku setiap elemen dalam daftar. Berdasarkan desain ini, perluas class ViewHolder. Versi ViewHolder menyediakan semua fungsi untuk item daftar Anda. Pemegang tampilan Anda adalah wrapper di sekitar View, dan tampilan tersebut dikelola oleh RecyclerView.

  3. Tentukan Adapter yang mengatribusikan data Anda dengan tampilan ViewHolder.

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 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.
  • StaggeredGridLayoutManager mirip dengan GridLayoutManager, 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 memerlukan tata letak ini saat mendesain holder tampilan, seperti yang dijelaskan di bagian berikutnya.

Menerapkan adaptor dan holder 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 masing-masing item dalam daftar. Adapter membuat objek ViewHolder seperlunya dan juga menetapkan data untuk tampilan tersebut. Proses yang mengatribusikan tampilan ke datanya disebut binding.

Saat menentukan adaptor, Anda mengganti tiga metode utama:

  • onCreateViewHolder(): RecyclerView memanggil metode ini setiap kali perlu membuat ViewHolder baru. Metode ini membuat serta menginisialisasi ViewHolder dan View-nya yang diatribusikan, tetapi tidak mengisi konten tampilan—ViewHolder belum terikat dengan data tertentu.

  • onBindViewHolder(): RecyclerView memanggil metode ini untuk mengatribusikan ViewHolder dengan data. Metode ini mengambil data yang sesuai dan menggunakan data tersebut untuk mengisi tata letak pemegang tampilan. Misalnya, jika RecyclerView menampilkan daftar nama, metode tersebut mungkin menemukan nama yang sesuai di dalam daftar dan mengisi widget TextView 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

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 mengetahui informasi selengkapnya, lihat Penyesuaian RecyclerView Lanjutan.

Aktifkan layar penuh

Ikuti langkah-langkah berikut untuk mengaktifkan layar penuh untuk RecyclerView:

Video berikut menampilkan RecyclerView dengan tampilan dari tepi ke tepi dinonaktifkan (kiri) dan diaktifkan (kanan):

Contoh kode inset:

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(
  findViewById(R.id.my_recycler_view)
  ) { v, insets ->
      val innerPadding = insets.getInsets(
          WindowInsetsCompat.Type.systemBars()
                  or WindowInsetsCompat.Type.displayCutout()
          // If using EditText, also add
          // "or WindowInsetsCompat.Type.ime()" to
          // maintain focus when opening the IME
      )
      v.setPadding(
          innerPadding.left,
          innerPadding.top,
          innerPadding.right,
          innerPadding.bottom)
      insets
  }

Java

ViewCompat.setOnApplyWindowInsetsListener(
  activity.findViewById(R.id.my_recycler_view),
  (v, insets) -> {
      Insets innerPadding = insets.getInsets(
              WindowInsetsCompat.Type.systemBars() |
                      WindowInsetsCompat.Type.displayCutout()
              // If using EditText, also add
              // "| WindowInsetsCompat.Type.ime()" to
              // maintain focus when opening the IME
      );
      v.setPadding(
              innerPadding.left,
              innerPadding.top,
              innerPadding.right,
              innerPadding.bottom
      );
      return insets;
  }
);

XML RecyclerView:

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:clipToPadding="false"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Referensi lainnya

Untuk informasi selengkapnya tentang pengujian pada Android, lihat referensi berikut.

Aplikasi contoh