พื้นฐาน RecyclerView
แสดงรายการขนาดใหญ่ได้อย่างมีประสิทธิภาพด้วย RecyclerView สร้าง Adapter และ ViewHolder และเชื่อมต่อข้อมูลโดยใช้ ViewBinding
พื้นฐาน 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- คอลเลกชัน Kotlin
- พื้นฐาน RecyclerView
- เหตุการณ์คลิกใน RecyclerView
- SharedPreferences
- ค่ากำหนดของ DataStore
- อะแดปเตอร์และ DiffUtil