สร้าง 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 มีการเปลี่ยนแปลง
จัดโต๊ะคอม-ออฟฟิศ

7 วิธีจัดโต๊ะทำงาน ออฟฟิศ จัดโต๊ะคอมให้สวยน่านั่งทำงาน

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

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

9 อันดับขาตั้งจอคอมคุณภาพ แนะนำขาตั้งจอคอม 2 จอและอื่นๆ

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

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

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

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

Read More

Leave a Comment

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