เพิ่มความหลากหลายให้กับ RecyclerView ด้วย GridView Layout
เพิ่มความหลากหลายให้กับ RecyclerView ด้วย GridView Layout
สวัสดีครับทุกคน วันนี้ผมอยากจะมาเขียนบล็อกการใช้งาน Recyclerview โดยการเพิ่มความหลากหลายให้กับตัว Recyclerview เอง ซึ่งโดยปกติแล้วเราจะใช้งาน Recyclerview ในการแสดงข้อมูลที่มีจำนวนมากๆ ในแนวตั้งหรือแนวนอน โดยมีที่สามารถ Scroll เพื่อดูข้อมูลใน list นั้นๆได้
เอาละก่อนอื่นมาเกริ่นกันก่อนว่า
RecyclerView คือ ListView ในรูปแบบที่ถูกพัฒนาให้มีประสิทธิภาพยิ่งขึ้น และสามารถใช้งานได้ง่ายขึ้นนั่นเอง
RecyclerView นั้นสามารถทำ ListView ได้ทั้งแนวนอนและแนวตั้ง
ใช้ LayoutManager ในการจัดการต่างๆภายใน List
ใช้ ViewHolder ในการจัดการเรื่อง reuse viewitem ต่างๆ
เหมาะใช้งานกับ List ขึ้นมูลที่ต้องคอยอัพเดทเปลี่ยนแปลงข้อมูลบ่อยๆ
ซึ่งโดยทั่วไปแล้ว คนมักจะใช้ LinearLayout ในการใช้งาน RecyclerView เพื่อแสดงข้อมูลออกมาเป็น ListView อาจจะเป็นแนวนอน หรือ แนวตั้งก็ได้ ซึ่งในครั้งนี้ผมจะมาแชร์วิธีการเขียน RecyclerView โดยใช้งานร่วมกับ GridLayout
Photo by Luca Bravo on Unsplash
ซึ่งก่อนอื่นเราคงต้องมาทำความรู้จักกับ GridLayout ก่อนว่าเจ้า Layout ตัวนี้มีลักษณะ อย่างไรและส่วนมากใช้กับงานรูปแบบไหน
GridLayout คือ โครงที่ใช้ในการจัดวางวัตถุแบบต่อเนื่องกัน ซึ่งลักษณะการแสดงจะออกมาในรูปแบบ Grid หรือเป็นตารางตามที่เราเคยเห็นกันใน App แสดงรูปภาพในสมาร์ทโฟนต่างๆ
เอาละก่อนอื่นเลย เราต้องสร้าง Layout ขึ้นมาก่อนหน้านึงในที่นี้ผมขอสร้างเป็น Fragment เปล่าๆที่มี RecyclerView อยู่ 1 ตัวครับ
ซึ่งจากภาพด้านบน ผมได้กำหนด 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 เพื่อทดสอบดูครับ….
เป็นอย่างไรกันบ้างครับ หวังว่าบทความนี้ที่ผมได้นำมาแชร์ จะสามารถช่วยให้ผู้อ่านทุกคนเกิดประโยชน์ และนำไปปรับปรุง ใช้งานได้ไม่มากก็น้อยครับ มีอะไรอยากแนะนำ ก็ลองบอกไว้ได้เลยนะครับ สำหรับวันนี้ขอบคุณทุกคนที่อ่านจนจบครับ