ลองเล่น Epoxy จาก AirBnb
นักพัฒนา Android หลายๆคนอาจจะเคยประสพปัญหาการทำ RecyclerView ที่มี UI หลายๆแบบ โดยเราต้องทำการแยก View Type ของแต่ละแบบ ซึ่งจะมีความวุ่นวาย ซับซ้อนพอสมควร ยิ่งถ้าอยากทำ Recyclerview ที่เป็น Horizontal ต้องมาสร้าง Adapter ข้างในอีก อย่างเช่น เราอยากทำ Ui ประมาณนี้
จากรูปเราจะลองแยก View Type ของ Ui นี้ดูนะครับ ( ไม่นับTop bar ด้านบนสุด)
1.Banner View
2.Grid Horizontal View
3.Header View With See more
4.Item View
5.Header View No See More
จะเห็นได้ว่าใน RecyclerView นี้มีนหลาย View Type ซึ่งถ้าใครเคยทำวิธีธรรมดาคงจะรู้ว่าจะต้องทำ Adapter ของView Type ที่มี item แนวนอน ที่ซับซ้อนซ่อนเงื่อนเหลือเกิน
วันนี้เราจะมาลองใช้ Library ที่ทำให้ชีวิตสะดวกสะบายขึ้นจาก AirBnb นั่นก็คือสิ่งที่เรียกว่า “Epoxy” ว่าแต่มันจะทำให้เราสะดวกสบายยังไง ไปดูกัน
Epoxy จะประกอบไปด้วยส่วนต่างๆดังนี้
- EpoxyModel ทำหน้าที่จัดการ item list แต่ละตัว คล้ายๆกับ ViewHolder
- EpoxyController ทำหน้าที่จัดการกับ EpoxyModel คล้าย RecyclerView Adapter
ต่อไปเรามาเริ่มสร้าง Epoxy Model กันเลยครับ
Epoxy Model
Epoxy Model นั้นจะสร้างได่ 3 แบบ Custom Views, DataBinding และ ViewHolders
ซึ่งวันนี้เราจะมาลองทำ customView กันดูก่อน
เราจะทำ Viewที่เป็นส่วนของ Banner ด้านบนก่อนครับ โดยให้สร้าง customview ธรรมดาๆ แล้วเพิ่ม @ModelView ไปด้านบนครับ ส่วนของ default layout นั้นให้เราใส่ xml ที่เราจะให้เป็น layout ของ view ตัวนี้ครับ
โดย layout นั้นจะต้องใช้ root view ที่เป็น Epoxy Model ด้วยนะครับ จะได้ประมาณนี้
จากนั้นกด Build เบาๆ มันจะ Generate class BannerViewEpoxyModel_ ขึ้นมาเพื่อเอาไปใช้ที่ Epoxy Controller ครับ หากใครยังไม่ขึ้นให้กด Make Project ที่เป็นรูปฆ้อนเขียว อีกทีนึงครับ
Epoxy Controller
การสร้างนั้นเราจะทำการ Extend EpoxyController เข้ามาครับซึ่ง เจ้า EpoxyController เนี้ยจะมีการทำงานแบบ one direction data flow ตั้งแต่เข้ามาที่ EpoxyController -> EpoxyModel -> View บน RecyclerView จะได้ประมาณนี้
จากนั้นไปดูวิธีการเรียกใช้ Controller กัน ก่อนอื่น layout ของ MainActivity เราต้องใช้ EpoxyRecyclerView แทน RecyclerView ธรรมดาครับ
จากนั้น ก็ทำการ New Controller ขึ้นมาแล้วให้ epoxyRecyclerView set Controller เข้าไปแบบนี้ครับ
จากนั้นกด Run เบาๆ จะได้ Ui Banner View ออกมาแล้วครับ
อันนี้ก็เป็น Path แรกนะครับ เดี๋ยว Path 2 เราจะลองทำในส่วนของที่เป็น View Holder กันครับ หวังว่าบทความนี้คงจะเป็นประโยชน์ต่อชาว Android Dev ไม่มากก็น้อยครับ หากมีอะไรผิดพลาด แนะนำติชมกันมาได้เลยครับ
