เพิ่มความหลากหลายให้กับ 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 เพื่อทดสอบดูครับ….



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

#TDGTechTalk #RecyclerView #GridViewLayout


179 views
logo-footer.png

True Digital Group Co., Ltd.

True Digital Park, Griffin Building, 9-12 Fl, 101 Sukhumvit Rd,   Bangchak, Phra Khanong, Bangkok 10260, Thailand

Tel: +66 2-021-0200

@ True Digital Group Limited All rights reserved.

Get in Touch

Facebook.png
Linkin.png

#TrueDigitalGroup