Lập trình Android

Sử dụng RecyclerView với Kotlin trong lập trình ứng dụng android

RecyclerView với Kotlin

Để hiểu thêm về RecyclerView chúng ta hãy bắt tay vào thực hành tạo một project đơn giản hiển thị danh sách các loài hoa với RecyclerView viết bằng Kotlin cho thiết bị chạy hệ điều hành android. Nếu bạn chưa biết về khái niệm và những lợi ích thực sự mạnh mẽ mà RecyclerView đem lại thì các bạn nên đọc trước bài viết Hiểu đầy đủ về RecyclerView trong lập trình ứng dụng Android.

RecyclerView với Kotlin

Bước 1: Tạo project

Chú ý để LanguageKotlin và tích chọn Use androidx.* artifacts.

RecyclerView với Kotlin

Cấu trúc đầy đủ của project:

RecyclerView với Kotlin

Bước 2: implement thư viện RecyclerView trong gradle file của app

Trong file build.gradle(app) thêm implementation của RecyclerView trong phần dependencies như dưới đây:

RecyclerView với Kotlin
implementation 'androidx.recyclerview:recyclerview:1.1.0-beta03'

Bước 3: Thêm ảnh các loài hoa vào file drawable

Thêm ảnh các loài hoa vào file drawable với tên tương ứng như dưới đây:

RecyclerView với Kotlin

Bước 4: tạo file layout cho item của recyclerView

list_item.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:id="@+id/container"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#D3D3D3"
        android:layout_margin="10dp">

    <ImageView
        android:id="@+id/img_avatar"
        android:layout_width="120dp"
        android:layout_height="120dp"
        tools:src="@drawable/hoa_hong"/>

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="25sp"
        android:gravity="center"
        android:textColor="#000000"
        android:padding="20dp"
        tools:text="Hoa hong "/>

</LinearLayout>

Bước 5: Tạo RecyclerView trong file XMl

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycle_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Bước 6: Tạo một Data class

Tạo một Data class có tên là Flower với 2 thuộc tính cơ bản là imgname để đại diện cho đối tượng hoa muốn hiển hiển thị.

package net.techchicken.demorecyclerview

data class Flower (
    val img: Int,
    val name: String
)

Bước 7: Tạo RecyclerView adapter

Tạo kotlin file có tên là RecyclerViewAdapter với tham số truyền vào là một data list chứa danh sách các loài hoa muốn hiển thị được kế thừa từ class RecyclerView.Adapter đi kèm với RecyclerViewHoler chúng ta sẽ tạo sau, và bạn sẽ phải implement các method cần thiết gồm:
onCreateViewHolder: để tạo view holder
onBindViewHolder: để gán dữ liệu từ data list với view phù hợp thông qua view holder
– getItemCount: trả về số lượng phần tử trong data list

class RecyclerViewAdapter(val list: List<Flower>) : RecyclerView.Adapter<RecyclerViewHolder>(){
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerViewHolder {
        TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
    }

    override fun getItemCount(): Int {
        TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
    }

    override fun onBindViewHolder(holder: RecyclerViewHolder, position: Int) {
        TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
    }

}

Tạo class RecyclerViewHoler để ánh xạ view trong file layout xml của từng item thành các biến tương ứng để gán dữ liệu phù hợp.

class RecyclerViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    val container: LinearLayout = itemView.findViewById(R.id.container)
    val imgAvatar: ImageView = itemView.findViewById(R.id.img_avatar)
    val tvName: TextView = itemView.findViewById(R.id.tv_name)
}

Code đầy đủ trong file RecyclerViewAdapter.kt

package net.techchicken.demorecyclerview

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.LinearLayout
import android.widget.TextView
import android.widget.Toast
import androidx.recyclerview.widget.RecyclerView

class RecyclerViewAdapter(val list: List<Flower>) : RecyclerView.Adapter<RecyclerViewHolder>(){

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

        return RecyclerViewHolder(view)
    }

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

    override fun onBindViewHolder(holder: RecyclerViewHolder, position: Int) {
        var item = list.get(position)
        holder.imgAvatar.setImageResource(item.img)
        holder.tvName.text = item.name
        holder.container.setOnClickListener(object : View.OnClickListener{
            override fun onClick(v: View?) {
                Toast.makeText(v!!.context, item.name, Toast.LENGTH_LONG).show()
            }
        })
    }

}

class RecyclerViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    val container: LinearLayout = itemView.findViewById(R.id.container)
    val imgAvatar: ImageView = itemView.findViewById(R.id.img_avatar)
    val tvName: TextView = itemView.findViewById(R.id.tv_name)
}

Bước 8: gán adapter vào RecyclerView

MainActivity

package net.techchicken.demorecyclerview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {

    lateinit var recyclerView : RecyclerView
    lateinit var adapter: RecyclerViewAdapter
    val list: List<Flower> = listOf(
        Flower(R.drawable.hoa_cuc, "hoa cúc"),
        Flower(R.drawable.hoa_dao, "hoa đào"),
        Flower(R.drawable.hoa_hong, "hoa hồng"),
        Flower(R.drawable.hoa_mai, "hoa mai"),
        Flower(R.drawable.hoa_sen, "hoa sen"),
        Flower(R.drawable.hoa_tulip, "hoa tulip"))

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

        title = "Các loài hoa"
        recyclerView = findViewById(R.id.recycle_view)
        adapter = RecyclerViewAdapter(list)
        recyclerView.adapter = adapter
    }
}

Các bạn tham khảo source code ở đây nhé:

https://github.com/pndhieu96/DemoRecyclerView

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *