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

เม้าส์ สุขภาพ ยี่ห้อไหนดี? 5 เม้าส์ไร้สายคุณภาพเยี่ยม ถนอมข้อมือ

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

Read More
ขาตั้งจอคอม-2-จอและอื่นๆ

ทำไมเราต้องใช้ขาแขวนจอคอม? 9 อันดับขา แขวน จอ คอมคอมคุณภาพเยี่ยม

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

Read More
ขาจับจอคอม คุณภาพสูง

ทำไมเราต้องใช้ขาจับจอคอม? 9 อันดับขาจับจอคอมคุณภาพเยี่ยม

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

Read More
โต๊ะ ทํางาน ออฟฟิศ

5 โต๊ะ ทํางาน ออฟฟิศ ที่ดีที่สุด: เพื่อประสิทธิภาพการทำงานและความสบายสูงสุด

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

Read More

Leave a Comment

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