Android – RecylerView

Giới thiệu

RecyclerView là một ViewGroup, tương tự như ListView, nhưng nó được xây dựng để cho lập trình viên có thể kiểm soát, tùy chỉnh sâu hơn, hiệu suất cao hơn ListView.

Đặc trưng

* Cần một LayoutManager riêng, do đó RecyclerView có thể giống như ListView,* GirdView, cuộn ngang, dọc.
* Sử dụng một ViewHolder để tái sử dụng View, tránh tạo ra View mới. Do vậy khi danh dách các Item rất nhiều thì cuộn vẫn rất mượt.
* Hỗ trợ Animation tốt hơn ListView.
* Không hỗ trợ setOnItemClick hay setOnItemLongCLick, lập trình viên phải tự custom

Sử dụng

Import thư viện cần thiết:
implementation 'com.android.support:recyclerview-v7:28.0.0'

Chúng ta sẽ đi xây dựng 1 ứng dụng hiển thị danh sách các liên lạc:
* Tên
* Số điện thoại
* Email

Xây dựng Layout

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">

    <fragment
            android:id="@+id/contacts_fragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            class="com.learn.recyclerview_example.ContactsFragment"/>


</LinearLayout>

fragment_contacts.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=".ContactsFragment"
        >

    <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

</LinearLayout>

item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="5dp"
        android:id="@+id/item_layout">

    <ImageView
            android:id="@+id/image_avatar"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_account"
            android:scaleType="fitCenter"/>

    <LinearLayout
            android:id="@+id/info"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="4"
            android:orientation="vertical">

        <TextView
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Name: "
                android:textColor="@color/colorBlack"
                android:textSize="20sp"
                android:textStyle="bold"/>

        <TextView
                android:id="@+id/phone_number"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Number: "
                android:textSize="17sp"/>

        <TextView
                android:id="@+id/email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Email: "
                android:textSize="17sp"/>

    </LinearLayout>

</LinearLayout>

Data collection

ContactCollection.kt

1	class ContactCollection (val name: String, val phoneNumber: String, val email: String)

Xây dựng interface cho event click

OnClickListener.kt

interface OnClickListener {
    fun OnItemClick(position: Int)
    fun onItemLongClick(position: Int)
}

Định nghĩa hành động xẩy ra khi click

private val onClickListener = object : OnClickListener {
        override fun onItemClick(position: Int) {
            requireActivity().runOnUiThread {
                Toast.makeText(requireActivity(), "Clicked on " + listContacts[position].name, Toast.LENGTH_SHORT).show()
            }
        }

        override fun onItemLongClick(position: Int) {
            requireActivity().runOnUiThread {
                Toast.makeText(requireActivity(), "Long clicked on " + listContacts[position].name, Toast.LENGTH_SHORT).show()
            }
        }
    }

Adapter

* onCreateViewHolder: Nạp Layout cần hiện thị cho 1 item, trả về 1 View
* MyViewHolder: Lớp quản nắm giữ View
* getItemCount: Trả về kích cỡ dữ liệu, cũng là kích cỡ của RecyclerView
* onBindViewHolder: Bind data tới View, hành động với View ở đây.

RecyclerViewAdapter.kt

class RecyclerViewAdapter(private val context: Context, private val listContacts: ArrayList<ContactCollection>, private val onClickListener: OnClickListener)
    : RecyclerView.Adapter<RecyclerViewAdapter.MyViewHolder>() {

    override fun onCreateViewHolder(p0: ViewGroup, p1: Int): MyViewHolder {
        val inflater = LayoutInflater.from(context)

        val view = inflater.inflate(R.layout.item_layout, p0, false)

        return MyViewHolder(view)
    }

    override fun getItemCount(): Int {
        return listContacts.size
    }

    override fun onBindViewHolder(p0: MyViewHolder, p1: Int) {
        val view = p0.itemView
        val contact = listContacts[p1]

        // Set Data to View
        view.apply {
            name.text = contact.name
            phone_number.text = contact.phoneNumber
            email.text = contact.email
        }

        // Event click
        view.setOnClickListener {
            onClickListener.OnItemClick(p1)
        }

        view.setOnLongClickListener {
            onClickListener.onItemLongClick(p1)
            true
        }
    }

    inner class MyViewHolder(view: View): RecyclerView.ViewHolder(view)
}

Tags: android

← Android – Retrofit Android – Swipe item trong RecylerView →

URL QR