เพราะอะไร ทำไมถึงใช้ RecyclerView แทน ListView

Android Jan 8, 2018

สวัสดีค่ะทุกท่าน สำหรับคนที่เป็นสาย android dev แรกๆจะทำ custom listview เพื่อการแสดงผลในรูปแบบเดียวกัน แต่ยังมีปัญหาโดยเฉพาะกับสร้าง view ที่ get data มาจาก json เพราะมันต้องมาสร้างใหม่ทุกอัน ในวันนี้มานำเสนอ RecyclerView ซึ่งน่าจะใช้กันแพร่หลาย ว่าต่างกันอย่างไรในเรื่อง implement code เพื่อให้เข้าใจได้มากขึ้น

ในปีที่แล้วมีซีรีส์ทำแอปบล็อกของตัวเอง ซึ่งยังเหลือ push notification นิดหน่อยที่ยังไม่ได้อัพเดต ในปีนี้เป็นแอปฟังเพลงที่เราทำเอง ใช้ RecyclerView ในการแสดงชื่อไฟล์จาก firebase storage และเล่นเพลงโดยใช้ exoplayer นะจ๊ะ

ปล. โค้ดตัวอย่างขอแปะไว้ที่ gist เนื่องจากตัวโปรเจกยังไม่เสร็จ ยังมีส่วนอื่นๆอีกเนอะ

การแสดงผลขั้นต้น มีปกเพลง ซึ่งตัวเพลงยังไม่ใส่ปก เลยเอา drawable ที่มีมาใส่สลับๆกันไป ชื่อไฟล์ และขนาดหรือความยาวของเพลง layout ต่อ item เป็นแบบนี้

การทำ custom listview มีอะไรบ้าง

แน่นอน adapter สิคุณ การทำงานของ listview คือ จะสร้าง item ที่ละอันจนครบจำนวน เราเลยลองจากการ toast มาแล้วหล่ะ ใน adapter ควร check จำนวน item ที่ getCount() ด้วยนะ ถ้า null หรือ size เป็น 0 บอกตรงๆเลยว่าพังแน่นอนนน (และในที่นี้ก็ยังไม่ได้ใส่ พ่ามมมมมๆๆๆ)

ก่อนอื่นอย่าลืมใส่เจ้า library นี้ ใน build.gradle ของ module ด้วยนะ

implementation 'com.android.support:recyclerview-v7:27.0.2'

รวบโค้ดทั้งหมดเป็นดังนี้

หน้าตาออกมาเป็นแบบนี้

การเปลี่ยนมาใช้ RecyclerView ดีอย่างไร

ทำงานได้ดีขึ้น
รองรับทั้ง ListView และ GridView โดยใช้แค่ RecyclerView ตัวเดียวนี่แหละ
แสดงผลได้ตามต้องการ flexible สุดๆ ใส่จำนวนแถว แนวนอน แนวตั้ง ได้ตามใจ

เรามาเปรียบเทียบการทำงานกันดีกว่า ว่าต่างกันอย่างไร

สมมุตินะ สมมุติ ว่าแอปเราดึงของจาก api ตามจำนวนที่มี ซึ่งมี 20 อันแล้วกัน อันนี้จากประสบการณ์การ debug จริง

ถ้าเป็นคุณ ListView คุณเธอจะทำทีละอันจนครบ 20 อัน เริ่มตั้งแต่ getCount, getItem, getId และ getView ถ้ารับจาก json api มาแล้วต้องแสดงผลต่างกัน getView ก็หนักหน่อย จากนั้นคืน View ออกมาทีละอันจนครบ

ส่วนคุณ RecyclerView ก็สร้าง holder จาก OnCreateViewHolder แล้ว set attribute ต่างๆ เช่น ใส่รูป ใส่ตัวหนังสือ และนับจำนวนด้วย getItemCount แต่เขาจะทำแค่ที่ต้องใช่เท่านั้น ในรูปมี 4 อันนิดๆ ก็สร้างเท่าที่พอใช้ พอเราเลื่อนลงไป เช่น อันที่ 2 อยู่ด้านบน ก็จะสร้างอันที่ยังไม่มี คืออันที่ 5 และ 6 เพิ่มขึ้นมา โดยคืนค่าเป็น ViewHolder แล้วโยนให้ system จัดการ แบบสวยๆ ไม่ต้องเหนื่อยมาก

หน้าตาแอปหลังจากเปลี่ยนมาใช้ RecyclerView แล้ว สังเกตว่า ไม่มีเส้นขีดๆที่แบ่งนะ

และมีจุดนึงที่ต่างกันในตอนนี้ คือ ทำไม RecyclerView คลิกไม่ได้อ่ะ ในขณะที่ ListView คลิกได้ แล้วจะทำอย่างไรดีหล่ะ

สร้าง interface ขึ้นมาตัวนึง ชื่อ onClick แล้วกัน ให้รับ view และ position ภาษาชาวบ้านง่ายๆ คือเรากดที่อันไหนนั่นแหละ จากนั้นเอาไปห้อย implements ซะ แล้ว implement function เพิ่มว่าอยากให้ทำอะไร ในที่นี้คือคลิกแล้วไปหน้าถัดไปนั่นเองงง

ลำดับการทำงาน ตัวที่ implement ก็จะทำหลังตามลำดับโค้ดที่เราเขียน (แต่ไม่แน่ใจว่าตรงอยู่ตรงไหนของ lifecycle นะ ขออภัย)
สุดท้ายโค้ดก็จะออกมาเป็นดังนี้

การประยุกต์ใช้ เลิกใช้ listview กับ gridview ไปเลย

เพราะอะไร เพราะการทำงานที่ไหลลื่นกว่า developer เขียน listview ไม่ถูกวิธีเลยโดนบังคับให้ใช้ RecyclerView เลย ถ้าเราแสดงผลมากกว่า 1 อันต่อแถว

เช่น หน้า Mood ของ Browse ในฟังใจ หรือ แสดงรายชื่อเพลงแบบนี้

ก็ใส่ไปแบบนี้

mRecyclerView.setLayoutManager(
       new GridLayoutManager(getActivity(), 
                             2 //จำนวนแถว    , 
                             GridLayoutManager.HORIZONTAL //แนว    
                             , false
       )
);

เป็นไง ง่ายเนอะ เขียนง่าย ใช้งานก็ง่าย พังยากขึ้น ปรับปรุงหน้าตาได้หลายแบบเลยทีเดียว