Constraint Layout - Guideline

Akexorcist -

ในการสร้าง UI ด้วย Constraint Layout ในบางครั้ง นักพัฒนาอาจจะต้องการ View ซักตัวเพื่อใช้อ้างอิงให้ View อยู่ในตำแหน่งที่ต้องการ โดยไม่ได้อ้างอิงจาก View ตัวอื่น ๆ ซึ่งการใช้ Guideline จะเข้ามาตอบโจทย์ในจุดนี้ได้

Guideline เป็น Constraint Helper อีกตัวนึงที่ใช้สำหรับจัดตำแหน่งของ View อื่น ๆ ที่อยู่ใน ConstraintLayout ให้ง่ายขึ้น โดยจุดประสงค์ของ Guideline ก็ตามชื่อของมันเลย นั่นก็คือเป็นแนวเส้นเพื่อให้ View อื่น ๆ มาอ้างอิงให้อยู่ในตำแหน่งที่ต้องการได้ง่าย

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

การกำหนดทิศทางให้กับ Guideline

Guideline สามารถกำหนดได้ว่าจะให้เป็นเส้นแนวนอนหรือแนวตั้ง โดยกำหนดผ่าน Attribute ที่ชื่อว่า android:orientation 

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" />

ถ้าไม่ได้กำหนด Attribute ดังกล่าวไว้ จะถือว่าเป็น Horizontal เสมอ

การกำหนดตำแหน่งให้กับ Guideline

Guideline สามารถกำหนดตำแหน่งได้ 2 แบบด้วยกันคือ

  • กำหนดตำแหน่งด้วยระยะห่างจากขอบจอ
  • กำหนดตำแหน่งตามขนาดหน้าจอ

กำหนดตำแหน่งด้วยระยะห่างจากขอบจอ

เป็นการกำหนดตำแหน่งแบบเจาะจง กำหนดว่าจะให้ Guideline อยู่ห่างจากขอบจอเป็นระยะเท่าไร (กำหนดด้วย Dimension Unit อย่าง DP ได้เลย) และเลือกได้ว่าจะเป็นขอบจอฝั่งไหนระว่าง Begin กับ End

โดยการใช้ Begin จะหมายถึง ขอบซ้าย (แนวนอน) หรือขอบบน (แนวตั้ง) และ End คือขอบขวา (แนวนอน) หรือขอบล่าง (แนวตั้ง)

และสำหรับการแสดงผลหน้าจอแบบ RTL (Right-to-left) จะสลับฝั่งแค่แนวนอนเท่านั้น ทำให้ Begin อยู่ขอบขวาและ End อยู่ขอบซ้ายแทน ส่วน Guideline แบบแนวตั้งจะยังคงให้ผลเหมือนเดิม

ในการกำหนดค่าเป็นระยะห่างจาก Begin หรือ End จะใช้ Attribute ที่ชื่อว่า app:layout_constraintGuide_begin กับ app:layout_constraintGuide_end โดยกำหนดได้แค่อย่างใดอย่างนึงเท่านั้น

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="32dp" />

จากตัวอย่าง XML ข้างบนจะได้ Guideline ที่มีระยะห่างจากขอบบน 32dp

กำหนดตำแหน่งตามขนาดหน้าจอ

เป็นการกำหนดตำแหน่งที่ยืดหยุ่นตามขนาดหน้าจอ เพราะกำหนดได้ว่าจะให้ Guideline อยู่ที่ตำแหน่งกี่เปอร์เซ็นต์เมื่อเทียบกับขนาดหน้าจอ โดยจะต้องกำหนดเป็นค่าระหว่าง 0 - 1 เช่น 0.5 คือ 50% หรือกึ่งกลางของหน้าจอนั่นเอง

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.25" />

จากตัวอย่าง XML ข้างบนจะได้ Guideline ที่มีระยะห่างจากขอบซ้ายเป็น 25% ของความกว้างหน้าจอ

UI แบบไหนที่เหมาะที่จะใช้ Guideline

จากรูปแบบของ Guideline จะเห็นว่า Guideline ไม่ได้เหมาะกับ Dynamic UI มากนัก เอาไว้ใช้เป็นแนวเส้นเพื่อให้ View อื่น ๆ ใช้อ้างอิงแบบง่าย ๆ เท่านั้น เช่น

  • การใช้ Guideline เพื่อสร้าง Margin กับ Parent แทนการกำหนด Margin กับให้ View ทุกตัวที่อ้างอิงตำแหน่งกับ Parent โดยตรง
  • กำหนด View ให้อยู่ฝั่งซ้ายหรือขวาจากกึ่งกลางหน้าจอ

ดังนั้น UI ส่วนใหญ่จะใช้ Guideline ไม่ได้บ่อยมากนัก และถ้าใช้เยอะก็จะทำให้รกหน้าจอใน Layout Editor ด้วย (ถึงแม้ว่าจะไม่แสดงผล) ในขณะที่ Barrier ตอบโจทย์กับ UI ที่ซับซ้อนได้ดีกว่า