สร้าง 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 มีการเปลี่ยนแปลง
เมาส์ไร้สาย ราคาดี

5 เมาส์ไร้สาย ราคาดี ถนอมข้อมือ สำหรับโปรแกรมเมอร์ และงาน office

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

Read More
ของใช้ โปรแกรมเมอร์ ทำงานที่บ้าน

ของใช้สำหรับโปรแกรมเมอร์ทำงานที่บ้าน

ในอาชีพโปรแกรมเมอร์ทำงานที่บ้านนั้นเป็นสิ่งที่หลายๆ บริษัทนำมาปฏิบัติกันอย่างแพร่หลายโดยเฉพาะในปี 2020 ที่มีการ Lock down และหลีกเลี่ยงการสัมผัส วันนี้จะพาไปดูรายการของใช้ที่จะทำให้ โปรแกรมเมอร์ทำงานที่บ้านได้สะดวกสบายยิ่งขึ้น ✅...

Read More

แนะนำจอ Monitor สำหรับเขียนโปรแกรม 2020

เวลาที่เราต้องเขียน Code เป็นเวลานาน เป็นเรื่องสำคัญที่เราควรมีจอมอนิเตอร์คู่ใจ ที่ช่วยให้ไม่ปวดตา โดยขนาดของมอนิเตอร์ที่เลือกนั้นควรจะมีขนาดพอเหมาะ เพื่อให้เราสามารถเปิดหน้าต่างของ Code Editor มากกว่าหนึ่งหน้าต่างพร้อมๆกันได้...

Read More

Leave a Comment

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