[Android] Mengenal RecyclerView (part 1)

RecyclerView adalah komponen yang berfungsi untuk menampilkan data dalam bentuk list. Data yang ditampilkan bisa lebih dari satu. User bisa melihat semua data yang ada dengan melakukan scroll. Untuk menggunakan RecyclerView kita harus mengetahui tiga komponen utama yang diperlukan.

  1. ViewHolder

Setiap item yang ditampilkan pada RecyclerView adalah objek ViewHolder. Objek ViewHolder ini adalah subclass dari class RecyclerView.ViewHolder. Kita juga perlu menyediakan layout XML untuk setiap item yang akan ditampilkan. Semua komponen yang ada di layout XML ini akan digunakan di objek ViewHolder.

2. Adapter

Setiap ViewHolder yang dibuat akan diatur oleh Adapter. Adapter ini adalah subclass dari class ‘RecyclerView.Adapter’. Proses pembuatan ViewHolder juga dilakukan di dalam Adapter. Ada tiga method utama yang kita perlukan: ‘getItemCount()’, ‘onCreateViewHolder()’ dan ‘onBindViewHolder()’.

  • ‘getItemCount()’ berfungsi untuk menentukan jumlah item yang akan ditampilkan. Jika method ini mengembalikan nilai 1, artinya hanya akan ada 1 item yang ditampilkan.
  • ‘onCreateViewHolder()’ berfungsi untuk membuat objek ViewHolder. Di method ini kita juga akan menentukan layout XML yang akan digunakan untuk setiap item.
  • ‘onBindViewHolder()’ berfungsi untuk menghubungkan data yang ada dengan objek ViewHolder.

3. Layout Manager

Layout Manager berfungsi untuk menentukan bentuk dari list yang akan ditampilkan. Kita bisa membuat list dari atas ke bawah (vertikal), atau dari kiri ke kanan (horizontal).

Berikut diagram yang menggambarkan komponen-komponen tersebut:

RecyclerView diberi nama ‘recycler‘ karena cara kerjanya adalah me-recycler ViewHolder yang ada. Ketika RecyclerView pertama kali muncul, dia akan membuat objek-objek ViewHolder dengan jumlah yang diperlukan saja. Artinya jika data yang tampil di dalam layar hanya berjumlah 5, maka objek ViewHolder yang dibuat juga berjumlah 5. Jika user melakukan scroll ke bawah, maka objek ViewHolder pertama (posisi paling atas) akan digunakan untuk menampilkan data untuk posisi 6 (RecyclerView tidak membuat objek ViewHolder baru, melainkan me-recycler objek ViewHolder yang sudah dibuat sebelumnya).

Jika data-data yang sedang ditampilkan berubah, kita bisa meminta RecyclerView untuk mengupdate datanya dengan memanggil method ‘notify…()’ dari class Adapter. Disini tersedia beberapa macam variasi dari method ‘notify…()’, seperti ‘notifyItemChanged()’, ‘notifyItemRangeChanged()’ dll. Disini kita hanya akan menggunakan method ‘notifyItemChanged()’. Method ini akan mereset semua objek ViewHolder yang ada sehingga akan menampilkan data-data yang paling baru.

Setelah kita tahu komponen-komponen yang diperlukan, berikutnya kita akan membuat aplikasi untuk mencoba penggunaan RecyclerView. Aplikasi ini adalah aplikasi sederhana yang akan menampilkan nama-nama negara dengan satu buah gambar.

Pertama, kita perlu membuat layout XML yang akan digunakan untuk setiap item yang akan ditampilkan. (item_row_country.xml)

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

    <ImageView
        android:id="@+id/iv_country"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:contentDescription="Country Image"
        tools:src="@drawable/ic_launcher_background" />

    <TextView
        android:id="@+id/tv_country"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:textSize="26sp"
        android:textStyle="bold"
        tools:text="Indonesia" />

</LinearLayout>

Kemudian kita akan membuat class ViewHolder. (CountryViewHolder.kt)

import android.view.View
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.item_row_country.view.*

class CountryViewHolder(view: View) : RecyclerView.ViewHolder(view) {

    fun bind(item: Country) = with(itemView) {
        iv_country.setImageResource(item.image)
        tv_country.text = item.name
    }
}

Setelah itu buat class Adapter yang berfungsi untuk mengatur ViewHolder. (CountryAdapter.kt)

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView

class CountryAdapter : RecyclerView.Adapter<CountryViewHolder>() {

    private val mItems: MutableList<Country> = mutableListOf()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CountryViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_row_country, parent, false)

        return CountryViewHolder(view)
    }

    override fun getItemCount(): Int = mItems.size

    override fun onBindViewHolder(holder: CountryViewHolder, position: Int) {
        holder.bind(mItems[position])
    }

    fun submitItems(items: List<Country>) {
        mItems.clear()
        mItems.addAll(items)
        notifyDataSetChanged()
    }
}

Di method ‘onCreateViewHolder()’ kita membuat objek ViewHolder dengan menggunakan layout ‘item_row_country.xml’. Method ini dipanggil sebelum method ‘onBindViewHolder()’. Method ‘getItemCount()’ akan menentukan jumlah item yang akan ditampilkan, oleh karena itu kita mengembalikan nilai dari list yang digunakan (mItems.size).

Method ‘submitItems()’ akan digunakan untuk memberikan data-data yang ingin ditampilkan ke dalam Adapter. Pada baris terakhir kita memanggil method ‘notifyDataSetChanged()’ untuk meminta Adapter untuk mengupdate kontennya dengan data yang baru saja kita berikan.

Setelah itu kita perlu membuat class yang berfungsi sebagai data yang akan ditampilkan. (Country.kt)

data class Country(val image: Int, val name: Int)

Berikutnya kita perlu menggunakan RecyclerView di layout file yang digunakan activity. (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_country"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/item_row_country" />

</LinearLayout>

Terakhir, kita perlu menghubungkan semua komponen yang telah dibuat di class Activity. (MainActivity.kt)

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        rv_country.layoutManager = LinearLayoutManager(this)

        val adapter = CountryAdapter()

        rv_country.adapter = adapter

        val items = listOf(
            Country(image = R.drawable.ic_launcher_background, name = "Indonesia"),
            Country(image = R.drawable.ic_launcher_background, name = "Vietnam"),
            Country(image = R.drawable.ic_launcher_background, name = "Singapore"),
            Country(image = R.drawable.ic_launcher_background, name = "Thailand"),
            Country(image = R.drawable.ic_launcher_background, name = "Malaysia")
        )

        adapter.submitItems(items)
    }
}

Pertama kita memasang Layout Manager untuk RecyclerView. Disini kita menggunakan LinearLayoutManager. Layout Manager ini akan menampilkan data dalam bentuk vertikal. Kemudian kita membuat adapter dan memasangnya ke RecyclerView. Setelah itu kita membuat sebuah list dengan 5 item yang berisi nama-nama negara. List ini (items) kemudian kita berikan ke adapter dengan memanggil method ‘adapter.submitItems()’.

Yuuup, kira-kira seperti itu cara menggunakan RecyclerView. Di postingan berikutnya kita akan menambahkan fungsi click untuk setiap item yang ada. Thanks!

Source Code: https://github.com/bonioctavianus/android-recyclerview-example

Reference: https://developer.android.com/guide/topics/ui/layout/recyclerview

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google

You are commenting using your Google account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.