เพิ่มความหลากหลายให้กับ RecyclerView ด้วย GridView Layout

สวัสดีครับทุกคน วันนี้ผมอยากจะมาเขียนบล็อกการใช้งาน Recyclerview โดยการเพิ่มความหลากหลายให้กับตัว Recyclerview เอง ซึ่งโดยปกติแล้วเราจะใช้งาน Recyclerview ในการแสดงข้อมูลที่มีจำนวนมากๆ ในแนวตั้งหรือแนวนอน โดยมีที่สามารถ Scroll เพื่อดูข้อมูลใน list นั้นๆได้

เอาละก่อนอื่นมาเกริ่นกันก่อนว่า

RecyclerView คือ ListView ในรูปแบบที่ถูกพัฒนาให้มีประสิทธิภาพยิ่งขึ้น และสามารถใช้งานได้ง่ายขึ้นนั่นเอง

• RecyclerView นั้นสามารถทำ ListView ได้ทั้งแนวนอนและแนวตั้ง
• ใช้ LayoutManager ในการจัดการต่างๆภายใน List
• ใช้ ViewHolder ในการจัดการเรื่อง reuse viewitem ต่างๆ
• เหมาะใช้งานกับ List ขึ้นมูลที่ต้องคอยอัพเดทเปลี่ยนแปลงข้อมูลบ่อยๆ

รายละเอียดต่างๆสามารถดูได้จากบล็อกนี้เลยครับ

Android L Developer Preview : ทดลองเล่น RecyclerView

ซึ่งโดยทั่วไปแล้ว คนมักจะใช้ LinearLayout ในการใช้งาน RecyclerView เพื่อแสดงข้อมูลออกมาเป็น ListView อาจจะเป็นแนวนอน หรือ แนวตั้งก็ได้ ซึ่งในครั้งนี้ผมจะมาแชร์วิธีการเขียน RecyclerView โดยใช้งานร่วมกับ GridLayout

Photo by Mitchell Griest on Unsplash

ซึ่งก่อนอื่นเราคงต้องมาทำความรู้จักกับ GridLayout ก่อนว่าเจ้า Layout ตัวนี้มีลักษณะ อย่างไรและส่วนมากใช้กับงานรูปแบบไหน

• GridLayout คือ โครงที่ใช้ในการจัดวางวัตถุแบบต่อเนื่องกัน ซึ่งลักษณะการแสดงจะออกมาในรูปแบบ Grid หรือเป็นตารางตามที่เราเคยเห็นกันใน App แสดงรูปภาพในสมาร์ทโฟนต่างๆ

เอาละก่อนอื่นเลย เราต้องสร้าง Layout ขึ้นมาก่อนหน้านึงในที่นี้ผมขอสร้างเป็น Fragment เปล่าๆที่มี RecyclerView อยู่ 1 ตัวครับ

const val VIEW_TYPE_ONE = "type_one"
const val VIEW_TYPE_TWO = "type_two"
const val VIEW_TYPE_FOUR = "type_four"

ซึ่งจากภาพด้านบน ผมได้กำหนด Type ของ Item ที่ผมจะใช้เอาไว้แล้วใน Fragment ครับ

เรามาสร้าง Adapter ของเรากันครับ

ซึ่งในที่นี้ผมได้กำหนด TYPE ของ Viewholder และ สร้าง Model สำหรับการแยก Type เอาไว้เรียบร้อยแล้ว โดยผมจะแยก ViewType ตาม Type ที่ผมได้กำหนดเอาไว้ตามด้านบน

ในส่วนของไฟล์ ViewHolder ในแต่ละ Adapter นั้นเหมือนๆ หรือใกล้เคียงกันเลย แตกต่างกันแค่เพียงการ set สีพื้นหลังของ ViewHolder

Photo by Luca Bravo on Unsplash

จากนั้นเรามาลองสร้าง GridLayoutManager กัน โดย Manager ตัวนี้เราจะเอาไปใช้แทนที่ของ LinearLayout ที่ทั่วไปเราใช้กันครับ

• spanCount คือการแบ่งช่องในแต่ละแถวว่า เราจะแบ่งออกเป็นกี่ช่อง ซึ่งในที่นี้ ผมได้แบ่งออกเป็น 4 ครับ
• adapter คือ Class Adapter ของ RecyclerView ที่เราจะใช้งานร่วมกับ GridView ตัวนี้

เมื่อ GridLayoutManager ทำการ Loop เพื่อหาว่า item นั้นๆจะใช้พื้นที่กี่ช่องใน 4 ช่องที่ได้แบ่งเอาไว้ ผมกำหนดให้

• TYPE_FOUR ใช้ DEFAULT_SPAN_SIZE ก็คือใช้ 1 ช่องเท่านั้นใน 4 ช่องที่กำหนด
• TYPE_TWO ใช้ TWO_SPAN_SIZE ก็คือใช้ 2 ช่องเท่านั้นใน 4 ช่อง
• ส่วน else คือ TYPE_ONE หรือ TYPE อื่นๆ จะใช้เต็มคือ 4 ช่อง

เมื่อสร้างเสร็จแล้ว เรามาลองใช้งานกัน โดยเราเริ่ม initAdapter และ mock data ต่างๆ เพื่อนำไปใช้งาน

หลังจากนั้นก็มาลอง Build เพื่อทดสอบดูครับ….

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