สร้าง Nested RecyclerView ใน Android ด้วย ConcatAdapter

concat-adapter-android-banner

ConcatAdapter นั้นช่วยรวม RecyclerView Adapter หลายตัวเข้าด้วยกันเพื่อแสดงใน RecyclerView หนึ่งตัว

ในยุคสมัยนี้ UI ของ Application มีมากมายหลายรูปแบบ และเมื่อ UI นั้นซับซ้อนขึ้น เราอาจเจอสถานการณ์ที่ทำให้ต้องใช้ RecyclerView อยู่ข้างใน RecyclerView อีกทีหนึ่ง หรือ เรียกว่า Nested RecyclerView ตัวอย่าง Application ที่ทำแบบนี้ก็มีอยู่ทั่วไปในชีวิตประจำวันเช่น Klook, Google Play Store

NestedRecyclerVIew-example-1
NestedRecyclerVIew-example-2

จาก Screenshots ที่เห็นนั้นก็คงเดาได้ไม่ยากว่าน่าใช้ Nested RecyclerView ในการทำแหละ โดยหนึ่งในวิธีที่จะทำ Layout แบบนี้ก็คือการว่าโครงสร้างของ Adapter และ ViewHolder ประมานนี้

NestedRecyclerVIew-adapter-structure

นี่คือวิธีสร้าง RecyclertView Adapter ด้านนอกสุดเพื่อควบคุม Content ข้างในของ Nested RecyclerView โดย Viewholder แต่ละตัวจะประกอบไปด้วย Header หรือ List ไอเดียคร่าวๆของ Code ใน OuterAdapter ก็จะเป็นประมานนี้

ทีนี้ได้เวลาพูดถึงพระเอกของงานคือ ConcatAdapter โดย Class นี้ยังอยู่ใน Version ของ RecyclerView ซึ่งยังเป็น Alpha อยู่ recyclerview:1.2.0-alpha06 โดย Class นี้จะช่วยรวม RecyclerView Adapter เข้าด้วยกันตามลำดับ เพื่อแสดงใน RecyclerView เดียว โดยไม่ต้องสร้าง Adapter เพิ่มเติม ในตัวอย่างที่ยกไปนั้นเมื่อเราใช้ ConcatAdapter แล้ว เราก็ไม่ต้องการ OuterAdapter class ที่ยกอีกต่อไป ด้วย ConcatAdapter เราสามารถสร้าง Nested RecyclerView ได้ด้วย Structure แบบนี้แทน

ConcatAdapter-RecyclerView-structure

อย่างที่เห็นว่าเราแยกแต่ละส่วนของ UI ออกเป็น Adapter ที่ต่างกัน โดย ConcatAdapter ช่วยแยก Logic ของ UI แต่ละส่วนออกจากกันโดยชัดเจน โดย UI ส่วนหนึ่งจะถูกแทนด้วย Adapter เพียง หนึ่งตัว การทำแบบนี้ทำให้เราสามารถ Reuse Adapter ใน UI ที่หน้าตาเหมือนกันได้อย่างง่ายดาย จากนั้นเราก็สามารถรวม Adapter ทั้งหมดไว้ใน RecyclerView อันเดียวได้ตาม Code Snippet ด้านล่างนี้

Header Adapter ที่เห็นนั้นสามารถเป็น Instance ที่ต่างกันของ Header Adapter Class เดียวกันได้โดยด้านในของ Header Adapter ตัว function getItemCount จะเป็น 1 เสมอ และเราสามารถใช้ VIewType เพื่อ ควบคุม State ต่างๆของตัว Header ได้ นอกเหนือจาก Header Adapter แล้ว Adapter อื่นๆก็สามารถใช้หลักการเดียวกันนี้ได้เช่นกัน

ปล. ตัว First Adapter ที่เห็นนั้นเนื่องจากมีลักษณะเป็นแนวนอนทำให้เราต้อง ส่ง RecyclerView Adapter อีกตัวเข้าใน First Adapter และ inflate มันตัว LinearLayoutManager ซึ่งเป็น Horizontal ด้วย แต่ถ้า UI เป็นแนวตั้งนั้นเราจะไม่ต้องส่ง RecyclerView Adapter เพิ่มเติมเข้าไปเลยแค่ใส่ Adapter ตัวนั้นลงไปใน ConcatAdapter ก็พอสามารถดูตัวอย่างโค้ดได้ที่ บทความนี้

 

แล้ว ConcatAdapter ช่วยให้ชีวิตเราง่ายขึ้นอย่างไร?

  • ไม่ต้องสร้าง Adapter เพิ่มเติม เช่น RecyclerView Adater ด้านนอกสุด
  • ด้วย ConcatAdapter เราสามารถ Encapsulate logic ของ UI แต่ละส่วน  ไว้ใน Adapter เดียวแทนที่จะรวมเอา Logic ทั้งหมดใส่ไว้ใน Adapter เพียงตัวเดียว ขอยกตัวอย่างเพื่อให้เข้าใจได้ง่ายขึ้น สมมุติว่า Header ในแต่ละ Section ของ UI เราต้องโชว์ Loading State ด้วย
Concat-Adapter-benefit
สถานการณ์ที่ Header ต้องมีหลาย State

ถ้าไม่มี ConcatAdapter แล้ว Logic ของการโชว์ Loading ต้องไปอยู่ใน Adapter ด้านนอกสุด หรือ OuterAdapter การมี Logic ของ UI ส่วน Header และ Logic ของ UI ส่วน List ไว้ใน Adapter เดียวกันนั้นไม่ใช่ Best Practice เพราะเราจะไม่สามารถ Reuse Logic นั้นในที่อื่นๆได้ ดังนั้นเราควรที่จะแยก UI ในแต่ละส่วนให้มี Adapter ของมันเอง และ เราก็ใช้ ConcatAdapter ในการรวม Adapter ที่เป็นตัวแทนของ UI แต่ละส่วนเข้าด้วยกันได้อย่างง่ายดาย การทำแบบนี้ทำให้ Adapter แต่ละตัวเก็บ Logic ของ. UI เพียงส่วนเดียวและสามารถ Reuse ที่ไหนก็ได้

ข้อมูลเพิ่มเติมเกี่ยว ConcatAdapter

  • ถ้ามี Adapter มากกว่าหนึ่งตัวที่ใช้ ViewHolder Class เดียวกัน เราต้อง Config เพิ่มเติมเล็กน้อย คือเราต้อง set ให้ isolateViewTypes เป็น false.
  • เราสามารถเพิ่มหรือลบ Adapter ที่อยู่ใน Concat Adapter อย่างง่ายดาย
  • หลีกเลี่ยงการเรียก notifyDataSetChanged ใน Adapter ด้านใน ConcatAdapter เพราะว่า ตัว ConcatAdapter เองก็จะเรียก notifyDataSetChanged. ดังเราควรใช้ notifyItemRangeChanged, notifyItemInserted, notifyItemChange แทนเวลาที่ข้อมูลใน Adapter มีการเปลี่ยนแปลง
พัฒนาการเขียนโปรแกรม

10 คีย์บอร์ด โน๊ตบุ๊ค ยกระดับประสบการณ์การทำงานดั่งมืออาชีพ

คุณเบื่อกับการพิมพ์ คีย์บอร์ด โน๊ตบุ๊ค ที่แคบและอึดอัดหรือไม่? คุณพบว่าตัวเองพิมพ์ผิดบ่อยหรือมีปัญหาในการพิมพ์อย่างรวดเร็วและมีประสิทธิภาพหรือไม่? ถ้าใช่ ก็ถึงเวลาพิจารณาการลงทุนซื้อคีย์บอร์ดเพิ่มเติมสำหรับโน๊ตบุ๊คของคุณ ต่อไปนี้เป็นข้อดีที่มาพร้อมกับการเพิ่มแป้นพิมพ์พิเศษให้กับโน๊ตบุ๊คของคุณ การทำงานโดยมี คีย์บอร์ด...

Read More
จอ Monitor Dell U2520D-เขียนโปรแกรม

7 จอ โน๊ตบุ๊ค ยอดเยี่ยม ทำงานก็ดีเล่นเกมส์ก็ได้

คุณเบื่อที่ต้องสลับไปมาระหว่างหน้าต่างและโปรแกรมต่างๆบนโน๊ตบุ๊คของคุณ? และคุณมีปัญหาในการทำงานหลายอย่างพร้อมกันอย่างมีประสิทธิภาพ ไม่ว่าคุณจะเล่นเกม ดูหนัง หรือทำงานต่างๆหรือเปล่า? ถ้าเป็นเช่นนั้น ก็ถึงเวลาพิจารณาการลงทุนซื้อ จอ โน๊ตบุ๊ค เพิ่มกันแล้วล่ะ...

Read More
notebook-เขียนโปรแกรม

8 รุ่น โน๊ตบุ๊คทํางาน – เขียนโปรแกรม รุ่นใหม่ ปี 2023

บทความนี้เรามาแนะนำโน๊ตบุ๊คทํางาน หรือ เขียนโปรแกรมกัน ในปี 2023 นี้เรียกได้ว่าต้องใช้โน๊ตบุ๊คทำงานแทบทุกอย่าง เรียกว่าแทบทุกอาชีพในสายงาน Office ในโลกยุคปัจจุบันจะขาดอุปกรณ์อย่างโน๊ตบุ๊คไปไม่ได้เลย หากจะบอกว่าสำคัญยิ่งกว่า...

Read More
เมาส์ไร้สาย 2023

เมาส์ไร้สาย ยี่ห้อไหนดี 2023 ? 5 เมาส์ไร้สาย ถนอมข้อมือ

เมาส์ไร้สาย ยี่ห้อไหนดี? 5 รายการ เมาส์ถนอมข้อมือ เวลาจะเลือกซื้อเมาส์ หลายๆคนคงมีคำถามว่า เราควรจะใช้ เมาส์ไร้สาย ยี่ห้อไหนดี...

Read More

Leave a Comment

Your email address will not be published. Required fields are marked *