สร้างรายการแบบไดนามิกด้วย RecyclerView เป็นส่วนหนึ่งของ Android Jetpack

ลองใช้วิธีการเขียน

Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีใช้งานเลย์เอาต์ใน Compose

รายการแบบ Lazy Loading และตารางกริด →

RecyclerView ช่วยให้แสดงชุดข้อมูลขนาดใหญ่ได้อย่างมีประสิทธิภาพ คุณจัดหา ข้อมูลและกำหนดลักษณะของแต่ละรายการ และไลบรารี RecyclerView จะสร้างองค์ประกอบแบบไดนามิกเมื่อจำเป็น

RecyclerView จะรีไซเคิลองค์ประกอบเหล่านั้นตามที่ชื่อบอก เมื่อ รายการเลื่อนลงจากหน้าจอ RecyclerView จะไม่ทำลายมุมมอง แต่ RecyclerView นำมุมมองมาใช้ซ้ำสำหรับรายการใหม่ที่เลื่อนบนหน้าจอ RecyclerView ช่วยปรับปรุงประสิทธิภาพและการตอบสนองของแอป และ ช่วยลดการใช้พลังงาน

คลาสคีย์

มีชั้นเรียนหลายชั้นที่ทำงานร่วมกันเพื่อสร้างรายการแบบไดนามิกของคุณ

• RecyclerView คือ ViewGroup ที่มีข้อมูลพร็อพเพอร์ตี้ ที่สอดคล้องกับข้อมูลของคุณ แต่เป็นมุมมองเอง คุณจึงเพิ่ม RecyclerView ลงในการจัดวาง ในลักษณะเดียวกับที่คุณเพิ่มองค์ประกอบ UI อื่นๆ

• องค์ประกอบแต่ละรายการในรายการจะกำหนดโดยออบเจ็กต์ view placeholder วันและเวลา สร้างตัวยึดตำแหน่งแล้วโดยไม่มีข้อมูลใดๆ ที่เชื่อมโยงอยู่ หลัง สร้างตัวยึดตำแหน่งแล้ว RecyclerView จะเชื่อมโยงเข้ากับข้อมูล คุณ กำหนดมุมมองตัวยึดตำแหน่งโดยการขยาย RecyclerView.ViewHolder

• RecyclerView จะขอดูและเชื่อมโยงข้อมูลพร็อพเพอร์ตี้กับข้อมูล ด้วยการเรียกใช้เมธอดในอะแดปเตอร์ คุณกำหนดอะแดปเตอร์ด้วยการขยาย RecyclerView.Adapter

• เครื่องมือจัดการเลย์เอาต์จะจัดเรียงองค์ประกอบแต่ละรายการในรายการ คุณสามารถ ให้ใช้ตัวจัดการการออกแบบ จากไลบรารี RecyclerView หรือคุณสามารถ กำหนดสถานะของคุณเอง เครื่องมือจัดการเลย์เอาต์จะขึ้นอยู่กับ LayoutManager Abstract Class

คุณสามารถดูว่าชิ้นส่วนทั้งหมดเข้ากันได้อย่างไรในแอปตัวอย่าง RecyclerView (Kotlin) หรือแอปตัวอย่าง RecyclerView (Java)

ขั้นตอนในการใช้งาน RecyclerView

หากคุณจะใช้ RecyclerView คุณจำเป็นต้องดำเนินการ 2-3 อย่าง ซึ่งได้อธิบายไว้โดยละเอียดในส่วนต่อๆ ไป

1. เลือกลักษณะของรายการหรือตารางกริด โดยปกติ คุณสามารถ ใช้เครื่องมือจัดการเลย์เอาต์มาตรฐานของไลบรารี RecyclerView

2. ออกแบบลักษณะและลักษณะการทำงานของแต่ละองค์ประกอบในรายการ สถานที่ตั้ง เกี่ยวกับการออกแบบนี้ โปรดขยายคลาส ViewHolder เวอร์ชันของ ViewHolder จะมีฟังก์ชันการทำงานทั้งหมดสำหรับรายการของคุณ ผู้ถือการดูของคุณคือ Wrapper รอบๆ View และมุมมองนั้นจัดการโดย RecyclerView

3. กำหนด Adapter ที่เชื่อมโยงข้อมูลของคุณกับข้อมูลพร็อพเพอร์ตี้ ViewHolder

นอกจากนี้ยังมีการปรับแต่งขั้นสูง ตัวเลือกที่ช่วยให้คุณปรับแต่ง RecyclerView ตามความต้องการของคุณ

วางแผนเลย์เอาต์

รายการใน RecyclerView จัดเรียงตาม LayoutManager ไลบรารี RecyclerView มีเครื่องมือจัดการเลย์เอาต์ 3 รูปแบบซึ่งจัดการ สถานการณ์ของเลย์เอาต์ที่พบบ่อยที่สุด:

• LinearLayoutManager จัดเรียงสินค้าในรายการแบบมิติเดียว
• GridLayoutManager จัดเรียงสินค้าในตารางกริด 2 มิติดังนี้
  • ถ้าตารางกริดอยู่ในแนวตั้ง GridLayoutManager จะพยายามทําให้ทั้งหมด องค์ประกอบในแต่ละแถวมีความกว้างและความสูงเท่ากัน แต่แถวต่างกัน จะมีความสูงต่างกันได้
  • หากตารางกริดจัดเรียงไว้ในแนวนอน GridLayoutManager จะพยายามทําให้ทั้งหมด องค์ประกอบในแต่ละคอลัมน์มีความกว้างและความสูงเท่ากัน แต่ต่างกัน คอลัมน์ต่างๆ อาจมีความกว้างต่างกันได้
• StaggeredGridLayoutManager คล้ายกับ GridLayoutManager แต่ไม่ได้กำหนดให้มีรายการย่อยใน แถวมีความสูงเท่ากัน (สำหรับตารางกริดแนวตั้ง) หรือรายการในคอลัมน์เดียวกัน มีความกว้างเท่ากัน (สำหรับตารางกริดแนวนอน) ผลลัพธ์ที่ได้คือรายการ ในแถวหรือคอลัมน์อาจจบลงด้วยออฟเซ็ตจากกัน

นอกจากนี้ คุณยังต้องออกแบบเลย์เอาต์ของแต่ละรายการด้วย คุณต้องมีสิ่งนี้ เมื่อคุณออกแบบตัวยึดตำแหน่ง ดังที่อธิบายไว้ในส่วนถัดไป

ติดตั้งอะแดปเตอร์และที่ยึดมุมมอง

เมื่อกำหนดเลย์เอาต์แล้ว คุณจะต้องนำ Adapter ไปใช้และ ViewHolder ทั้ง 2 คลาสนี้ทำงานร่วมกันเพื่อกำหนดว่าจะให้ข้อมูลของคุณ แสดงอยู่ ViewHolder คือ Wrapper รอบๆ View ที่มี สำหรับแต่ละรายการในลิสต์ Adapter สร้าง ViewHolder ออบเจ็กต์ที่จำเป็นและต้องตั้งค่าข้อมูลสำหรับมุมมองเหล่านั้นด้วย กระบวนการของ การเชื่อมโยงข้อมูลพร็อพเพอร์ตี้กับข้อมูลเหล่านั้นเรียกว่าการเชื่อมโยง

เมื่อคุณกำหนดอะแดปเตอร์ คุณจะแทนที่วิธีการหลัก 3 วิธีดังนี้

• onCreateViewHolder(): RecyclerView เรียกใช้วิธีนี้ทุกครั้งที่ ต้องสร้าง ViewHolder ใหม่ เมธอดจะสร้างและเริ่มต้น ViewHolder และ View ที่เชื่อมโยง แต่ไม่ป้อนข้อมูลของข้อมูลพร็อพเพอร์ตี้ เนื้อหา - ViewHolder ยังไม่ได้เชื่อมโยงกับข้อมูลที่เฉพาะเจาะจง

• onBindViewHolder(): RecyclerView เรียกใช้เมธอดนี้เพื่อเชื่อมโยง ViewHolder กับข้อมูล จะดึงข้อมูลที่เหมาะสมและใช้ข้อมูลนั้นเพื่อเติมในมุมมอง เลย์เอาต์ของตัวยึดตำแหน่ง ตัวอย่างเช่น หาก RecyclerView แสดงรายการชื่อ เมธอดอาจค้นหาชื่อที่เหมาะสมในรายการและป้อนข้อมูลในมุมมอง วิดเจ็ต TextView ของผู้ถือครอง

• getItemCount(): RecyclerView เรียกใช้เมธอดนี้เพื่อรับขนาดของชุดข้อมูล ตัวอย่างเช่น ในแอปสมุดที่อยู่ นั่นอาจเป็นจำนวนรวมของที่อยู่ RecyclerView ใช้ข้อมูลนี้เพื่อกำหนดว่าเมื่อใดไม่มีรายการที่สามารถได้อีก แสดงอยู่

ต่อไปนี้เป็นตัวอย่างทั่วไปของอะแดปเตอร์แบบง่ายที่มี ViewHolder ฝังอยู่ แสดงรายการข้อมูล ในกรณีนี้ RecyclerView จะแสดงรายการแบบง่าย ขององค์ประกอบข้อความ อะแดปเตอร์จะส่งผ่านอาร์เรย์ของสตริงที่มีข้อความ สำหรับองค์ประกอบ ViewHolder

class CustomAdapter(private val dataSet: Array<String>) :
        RecyclerView.Adapter<CustomAdapter.ViewHolder>() {

    /**
     * Provide a reference to the type of views that you are using
     * (custom ViewHolder)
     */
    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val textView: TextView

        init {
            // Define click listener for the ViewHolder's View
            textView = view.findViewById(R.id.textView)
        }
    }

    // Create new views (invoked by the layout manager)
    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
        // Create a new view, which defines the UI of the list item
        val view = LayoutInflater.from(viewGroup.context)
                .inflate(R.layout.text_row_item, viewGroup, false)

        return ViewHolder(view)
    }

    // Replace the contents of a view (invoked by the layout manager)
    override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {

        // Get element from your dataset at this position and replace the
        // contents of the view with that element
        viewHolder.textView.text = dataSet[position]
    }

    // Return the size of your dataset (invoked by the layout manager)
    override fun getItemCount() = dataSet.size

}

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.ViewHolder> {

    private String[] localDataSet;

    /**
     * Provide a reference to the type of views that you are using
     * (custom ViewHolder)
     */
    public static class ViewHolder extends RecyclerView.ViewHolder {
        private final TextView textView;

        public ViewHolder(View view) {
            super(view);
            // Define click listener for the ViewHolder's View

            textView = (TextView) view.findViewById(R.id.textView);
        }

        public TextView getTextView() {
            return textView;
        }
    }

    /**
     * Initialize the dataset of the Adapter
     *
     * @param dataSet String[] containing the data to populate views to be used
     * by RecyclerView
     */
    public CustomAdapter(String[] dataSet) {
        localDataSet = dataSet;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
        // Create a new view, which defines the UI of the list item
        View view = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.text_row_item, viewGroup, false);

        return new ViewHolder(view);
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, final int position) {

        // Get element from your dataset at this position and replace the
        // contents of the view with that element
        viewHolder.getTextView().setText(localDataSet[position]);
    }

    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return localDataSet.length;
    }
}

เลย์เอาต์สำหรับรายการมุมมองแต่ละรายการจะกำหนดไว้ในไฟล์เลย์เอาต์ XML ตามปกติ ในกรณีนี้ แอปมีไฟล์ text_row_item.xml ที่มีลักษณะเช่นนี้

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/list_item_height"
    android:layout_marginLeft="@dimen/margin_medium"
    android:layout_marginRight="@dimen/margin_medium"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/element_text"/>
</FrameLayout>

ขั้นตอนถัดไป

ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้ RecyclerView ได้

class MainActivity : AppCompatActivity() {

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

        val dataset = arrayOf("January", "February", "March")
        val customAdapter = CustomAdapter(dataset)

        val recyclerView: RecyclerView = findViewById(R.id.recycler_view)
        recyclerView.layoutManager = LinearLayoutManager(this)
        recyclerView.adapter = customAdapter

    }

}

RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.layoutManager = new LinearLayoutManager(this)
recyclerView.setAdapter(customAdapter);

ไลบรารียังมีอีกหลายวิธีในการปรับแต่งการใช้งานของคุณ สำหรับข้อมูลเพิ่มเติม โปรดดูข้อมูลเพิ่มเติมที่ Advanced RecyclerView การปรับแต่ง

แหล่งข้อมูลเพิ่มเติม

หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับการทดสอบใน Android ให้ดูแหล่งข้อมูลต่อไปนี้

แอปตัวอย่าง

• แอปตัวอย่าง RecyclerView (Kotlin)

• แอปตัวอย่าง RecyclerView (Java)

• แอปเดโมของ Sunflower