Android Academy · บทเรียน

พื้นฐาน RecyclerView

แสดงรายการขนาดใหญ่ได้อย่างมีประสิทธิภาพด้วย RecyclerView สร้าง Adapter และ ViewHolder และเชื่อมต่อข้อมูลโดยใช้ ViewBinding

บทเรียน 2 จาก 611 ขั้นตอน

พื้นฐาน RecyclerView เป็นบทเรียน Android Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 6 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Android Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Android Academy มีบทเรียนทั้งหมด 6 บทเรียน

เหตุใดจึงใช้ RecyclerView

RecyclerView เป็นวิธีมาตรฐานสำหรับแสดงรายการสมาชิกที่เลื่อนได้ใน Android

เมื่อเทียบกับ ListView รุ่นเก่า RecyclerView:

  • นำวิวกลับมาใช้ซ้ำ ขณะเลื่อน — สร้างเท่าที่พอดีกับหน้าจอเท่านั้น
  • รองรับรายการแนวตั้ง รายการแนวนอน และตาราง
  • ปรับแต่งได้อย่างยืดหยุ่นด้วย LayoutManagers

สถาปัตยกรรมของ RecyclerView

RecyclerView ต้องมีองค์ประกอบสามส่วนจึงจะทำงานได้:

  • RecyclerView — วิดเจ็ตใน XML ของเลย์เอาต์
  • อะแดปเตอร์ — เชื่อมข้อมูลกับวิวของสมาชิก
  • ViewHolder — เก็บการอ้างอิงไปยังวิวภายในสมาชิกแต่ละรายการ

อะแดปเตอร์จะสร้าง ViewHolders และเชื่อมข้อมูลให้ขณะผู้ใช้เลื่อนดู

การเพิ่ม RecyclerView ลงใน XML

เพิ่มวิดเจ็ตลงในเลย์เอาต์และประกาศการพึ่งพาใน build.gradle:

<!-- In res/layout/activity_main.xml -->
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- app/build.gradle dependencies: -->
<!-- implementation 'androidx.recyclerview:recyclerview:1.3.2' -->

เลย์เอาต์ของสมาชิก

สร้างไฟล์ XML แยกสำหรับสมาชิกแต่ละรายการ ตัวอย่างเช่น res/layout/item_fruit.xml:

<!-- res/layout/item_fruit.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tvCalories"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp" />

</LinearLayout>

โมเดลข้อมูล

กำหนดคลาสข้อมูลที่ใช้แทนสมาชิกแต่ละรายการในรายการของคุณ:

data class Fruit(
    val name: String,
    val calories: Int
)

การสร้างอะแดปเตอร์

อะแดปเตอร์จะเชื่อมข้อมูลกับเลย์เอาต์ของสมาชิก โดยมีเมธอดสำคัญสามรายการ:

  • onCreateViewHolder — ขยาย XML ของสมาชิก
  • onBindViewHolder — เติมข้อมูลให้สมาชิกหนึ่งรายการ
  • getItemCount — จำนวนสมาชิกทั้งหมด

การใช้งานอะแดปเตอร์

ตัวอย่าง RecyclerView Adapter ที่สมบูรณ์และเรียบง่าย:

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

class FruitAdapter(
    private val fruits: List<Fruit>
) : RecyclerView.Adapter<FruitAdapter.ViewHolder>() {

    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val tvName: TextView = view.findViewById(R.id.tvName)
        val tvCalories: TextView = view.findViewById(R.id.tvCalories)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_fruit, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val fruit = fruits[position]
        holder.tvName.text = fruit.name
        holder.tvCalories.text = "${fruit.calories} kcal"
    }

    override fun getItemCount() = fruits.size
}

การตั้งค่าใน Activity

เชื่อม RecyclerView, Adapter และ LayoutManager เข้าด้วยกันใน Activity:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)

    val fruits = listOf(
        Fruit("Apple", 95),
        Fruit("Banana", 105),
        Fruit("Cherry", 50),
        Fruit("Mango", 202)
    )

    val adapter = FruitAdapter(fruits)

    binding.recyclerView.apply {
        this.adapter = adapter
        layoutManager = LinearLayoutManager(this@MainActivity)
    }
}

GridLayoutManager

เปลี่ยน LayoutManager เพื่อแสดงเป็นตารางแทนรายการคอลัมน์เดียว:

  • LinearLayoutManager — รายการแนวตั้งหรือแนวนอน
  • GridLayoutManager(context, spanCount) — ตารางที่มี N คอลัมน์
  • StaggeredGridLayoutManager — ตารางแบบสลับระดับสไตล์ Pinterest

ตรวจสอบความเข้าใจ

ViewHolder มีหน้าที่อะไรใน RecyclerView Adapter

สรุป: พื้นฐาน RecyclerView

ขณะนี้คุณสามารถแสดงรายการได้อย่างมีประสิทธิภาพ:

  • RecyclerView นำวิวกลับมาใช้ซ้ำเพื่อประสิทธิภาพที่ดี
  • มีสามส่วน ได้แก่ วิดเจ็ต RecyclerView, Adapter และ ViewHolder
  • XML ของสมาชิกกำหนดลักษณะของแถวหรือการ์ดหนึ่งรายการ
  • Adapter เชื่อมข้อมูลกับวิวใน onBindViewHolder
  • LayoutManager ควบคุมเลย์เอาต์แบบรายการ ตาราง หรือแบบสลับระดับ

ถัดไป: ทำให้สมาชิกในรายการแตะได้ด้วยเหตุการณ์คลิก

เริ่มต้นได้ฟรี

เรียนรู้ Kotlin ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
36
บทเรียน
152

คำถามที่พบบ่อย

บทเรียน “พื้นฐาน RecyclerView” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “พื้นฐาน RecyclerView” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 6 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐาน RecyclerView”

แสดงรายการขนาดใหญ่ได้อย่างมีประสิทธิภาพด้วย RecyclerView สร้าง Adapter และ ViewHolder และเชื่อมต่อข้อมูลโดยใช้ ViewBinding คุณปฏิบัติ Android Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Android Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Android Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 6 บทเรียน

บทเรียน “พื้นฐาน RecyclerView” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Android Academy นี้ได้ไหม

ได้ บทเรียน Android Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. คอลเลกชัน Kotlin
  2. พื้นฐาน RecyclerView
  3. เหตุการณ์คลิกใน RecyclerView
  4. SharedPreferences
  5. ค่ากำหนดของ DataStore
  6. อะแดปเตอร์และ DiffUtil
← กลับไปที่ Android Academy