28 October 2015

มารู้จักกับ Layout Manager ใน Recycler View กันเถอะ!

Updated on


        หลังจากที่ Android 5.0 Lollipop ได้เปิดตัวขึ้นมา ในฝั่งของนักพัฒนาก็มีการเพิ่ม Recycler View เข้ามาใหม่เช่นกัน ซึ่งเป็นหนึ่งใน View ที่มีความ Flexible เป็นอย่างมาก เพื่อช่วยให้นักพัฒนาสามารถรังสรรค์รูปแบบในการแสดงผลของ Item View ที่เรียงกันเป็น List ได้หลากหลายและง่ายขึ้นกว่าเดิมที่ใช้ List View หรือ Grid View กัน

        แต่ความสามารถอย่างหนึ่งที่น่าสนใจใน Recycler View นั่นก็คือ Layout Manager ที่จะมาช่วยจัดการรูปแบบการแสดง Item View ให้โดยที่นักพัฒนาแทบจะไม่ต้องทำอะไรเลย ดังนั้นมาดูกันเถอะว่า Layout Manager ใน Recycler View มันคืออะไร และทำอะไรได้บ้าง

รู้จักกับ Layout Manager 

         Layout Manager เป็น Manager Class ที่มีหน้าที่จัดการกับขนาดและตำแหน่งของ Item View ที่จะแสดงใน Recycler View ว่าจะให้จัดอยู่ในรูปแบบใด

        โดยเจ้า Layout Manager นี้จะช่วยให้การแสดง View เป็น List มีรูปแบบหลากหลายมากกว่าเดิมที่มีแค่เรียงกันเป็น List ในแนวตั้งหรือเป็นช่องๆอย่าง Grid เพราะ Layout Manager สามารถกำหนดได้ว่าจะให้จัดเรียง Item View ในรูปแบบใด

        สำหรับ Layout Manager พื้นฐานที่มีให้ใช้งานกับ Recycler View จะมีอยู่ 3 แบบด้วยกันคือ Linear Layout Manager, Grid Layout Manager และ Staggered Grid Layout Manager

Linear Layout Manager

        Linear Layout ทำงานยังไง Linear Layout Manager ก็ทำงานเช่นนั้นแหละครับ มันมีหน้าที่เรียง Item View ในแนวตั้งหรือแนวนอนนั่นเอง


        วิธีใช้ก็แสนง่าย สร้างมันขึ้นมาแล้วกำหนดลงใน Recycler View ที่ต้องการได้เลย

RecyclerView rvSomeThing = ...
rvSomeThing.setLayoutManager(new LinearLayoutManager(this));
...

        โดย Default ของมันจะเป็น Vertical Orientation แต่ถ้าต้องการกำหนดให้เป็นแนวนอนก็ทำได้ เพราะตัวคลาสได้ Overload Constructure ไว้ให้แล้ว

LinearLayoutManager(Context context)
LinearLayoutManager(Context context, int orientation, boolean reverseLayout)

        ดังนั้นถ้าอยากจะได้เป็นแนวนอนก็เพียงแค่กำหนดแบบนี้

RecyclerView rvSomeThing = ...
rvSomeThing.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
...

        และจะเห็นว่าเรียงแบบ Reverse ได้ด้วยนะเออ เพียงแค่กำหนด reverseLayout ให้เป็น True

RecyclerView rvSomeThing = ...
rvSomeThing.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, true));
...


Grid Layout Manager

        เป็น Layout Manager สำหรับเรียง Item View ให้เป็นลักษณะตาราง ซึ่งมีจุดเด่นที่สามารถเรียงในแนวตั้งหรือแนวนอนก็ได้ แบบ Linear Layout Manager เลย


        โดย Default ของมันจะเป็น Grid แนวตั้ง อยากได้กี่คอลัมน์ (แนวตั้ง) หรือกี่แถว (แนวนอน)

RecyclerView rvSomeThing = ...
rvSomeThing.setLayoutManager(new GridLayoutManager(this, 3));
...

         และสามารถกำหนดได้ว่าจะเรียงแบบ Reverse ก็ได้นะ เหมือน Linear Layout Manager เลย Constructure คล้ายๆกัน เพิ่มเข้ามาก็คือจำนวนแถว/คอลัมน์

GridLayoutManager(Context context, int spanCount)
GridLayoutManager(Context context, int spanCount, int orientation, boolean reverseLayout)

        ดังนั้นถ้าอยากจะให้เรียงเป็นแนวนอนแบบ Reverse ก็จะต้องกำหนดแบบนี้

RecyclerView rvSomeThing = ...
rvSomeThing.setLayoutManager(new GridLayoutManager(this, 3, GridLayoutManager.HORIZONTAL, true));
...


Staggered Grid Layout Manager

        ตัวนี้จะต่อยอดจาก Grid Layout Manager มาอีกที โดย Grid Layout Manager จะเป็นการเรียง Item View โดยที่ Item View ทุกตัวนั้นมีขนาดเท่ากัน แต่ Staggered Grid Layout Manager นั้นเกิดมาเพื่อ Item View ที่มีขนาดไม่เท่ากันโดยเฉพาะ


        Staggered Grid Layout Manager นิยมมากกับ Item View ที่เป็นภาพหรือ Content ข้างในที่ไม่ตายตัว เยอะบ้าง น้อยบ้าง แต่จะเรียงต่อๆกันโดยไม่เหลือช่วงที่เว้นว่างไว้

        สำหรับรูปแบบการเรียงของ Staggered Grid Layout นั้นจะอิงจากแนวตั้งและแนวนอน โดยกำหนดจำนวนแถว/คอลัมน์ได้

StaggeredGridLayoutManager(int spanCount, int orientation)

        สำหรับรูปแบบในการเรียงอาจจะดูยากไปบ้างแต่ก็มีหลักการในการเรียงง่ายๆคือ แถวไหนสั้นที่สุด Item View ตัวถัดไปจะไปอยู่ที่แถวนั้นทันทีนั่นเอง


มี Layout Manager ตัวอื่นนอกเหนือจากนี้มั้ย?

        ลำพังแล้ว Layout Manager ทั้ง 3 แบบที่มีให้ใช้งานก็เรียกได้ว่าครอบคลุมกับการใช้งานเกือบทั้งหมดแล้วล่ะนะ แต่ก็มี 3rd Party Library ที่เป็น Layout Manager ให้ใช้งานอยู่เหมือนกันนะ

        • TwoWayView ของ lucasr [GitHub]
        • SuperSLiM ของ TonicArtos [GitHub]

สรุป

        Layout Manager เป็นหนึ่งในคุณสมบัติของ Recycler View ที่แยกการทำงานในส่วนของการจัดเรียง Item View ออกมา เพื่อให้สามารถ Custom ได้ตามใจชอบ

        ซึ่งต่างจากสมัยที่ใช้ List View และ Grid View มาก ซึ่งทำได้แค่ในแนวตั้ง ถ้าอยากจะได้แนวนอนก็คือต้อง Custom View กันเลย แต่สำหรับ Recycler View เพียงแค่ Custom ในส่วนของ Layout Manager แล้วเอามาใช้งานใน Recycler View ที่ใช้อยู่ได้เลย โดยที่การทำงานในส่วนอื่นๆของ Recycler View ไม่ว่าจะเป็น Item Decoration หรือ Item Animator ก็ยังคงสามารถทำงานได้เหมือนเดิมที่กำหนดไว้

        ไม่มีไฟล์ตัวอย่างนะครับ เพราะมันก็คือโค๊ดใช้งาน Recycler View นั่นแหละ