[Android Tips] 7 สิ่งที่คุณ(อาจจะ)ยังไม่รู้เกี่ยวกับ Constraint Layout

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

1. Gone margin

ถ้าหากคุณใช้ Constraint layout อยู่ล่ะก็น่าจะต้องเคยเจอปัญหาแบบนี้
เริ่มที่เรา set constraint แบบนี้เอาไว้

เราใส่ margin end 8dp สำหรับ TextView และ 24dp สำหรับปุ่ม เพราะเราต้องการให้ห่างจากขอบจอด้านขวา 24dp แต่ถ้าวันดีคืนดีเราต้อง set visibility ให้กับปุ่มเป็น gone ล่ะ

อ้าว แต่เราอยากให้มันห่างกับขอบจอ 24dp นี่นา ในกรณีแบบนี้เราสามารถแก้ได้ด้วยสิ่งที่เรียกว่า gone margin

gone margin ก็คือ margin ของ View ตัวนั้นเมื่อตัวที่ผูกกับมันอยู่กลายเป็น gone ไปนั่นเอง วิธีการใช้ก็ประมาณนี้ มี gone margin top, bottom, start, end เหมือนกัน

app:layout_goneMarginTop="24dp"
app:layout_goneMarginBottom="24dp"
app:layout_goneMarginStart="24dp"
app:layout_goneMarginEnd="24dp"

เท่านี้เราก็จะได้ margin 24dp ตอนที่ button gone ไปแล้วนั่นเอง

จริงๆมันเป็น 24dp ละนะ แค่เลขมันจะขึ้นของ margin ปกติ เลยเห็นเป็น 8dp

2. Barrier

Barrier เป็น View แบบหนึ่งที่ตัวมันเองจะ reference กับ View อื่นๆ ได้มากกว่า 1 ตัว และตัวมันจะทำหน้าที่เป็นตัวกั้นให้ View พวกนั้น

ตัวอย่างเช่น เรามี TextView ที่ constraint กับปุ่มสีเขียวไว้ กล่าวได้ว่าถ้าปุ่มสีเขียวขยายกว้างขึ้น TextView ก็จะสั้นลง แต่ถ้าปุ่มสีส้มกว้างขึ้นล่ะ

แต่ถ้าปุ่มสีส้มกว้างขึ้นล่ะ มันก็จะเป็นแบบนี้!

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

ลองสร้าง Barrier ตามนี้เลยครับ

จาก code คือผมได้สร้าง Barrier ขึ้นมาโดยให้มันผูกกับ start ของ greenButton และ orangeButton

และอย่าลืม set constraint ให้ TextView ด้วย

app:layout_constraintEnd_toStartOf="@id/barrier"

ผลลัพธ์ที่ได้ออกมาจะเป็นแบบนี้

3. Chain

Chain คือการผูก View สอง View เข้าด้วยกันโดยที่เราสามารถควบคุมความห่างของ View เหล่านั้นได้ ส่วนวิธีการทำให้ View chain กันให้เลือก View เหล่านั้นแล้วเลือก Chains ตามรูปได้เลย Chain ได้ทั้งแนวตั้ง (Vertical) และแนวนอน (Horizontal)

เมื่อ Chain แล้วเราสามารถปรับ style ของ Chain ได้ มีอยู่สามแบบดังนี้

สำหรับ Horizontal chain
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintHorizontal_chainStyle="packed"
สำหรับ Vertical chain
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintVertical_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="packed"

ถ้าหากเราเลือก style เป็น spread เราสามารถกำหนด weight ได้เหมือน Linear layout ด้วยนะ โดยใช้

app:layout_constraintHorizontal_weight
app:layout_constraintVertical_weight

ตัวอย่างของแต่ละ style ครับ

chainStyle: spread

chainStyle: spread_inside

chainStyle: packed

4. Group

อันนี้ตามชื่อเลยครับ คือเราจัด group ของ View เอาไว้ได้ แต่เป็นเพียงการ group จาก id ของ View เท่านั้นนะ เพื่อที่เราจะสามารถ set visibility ของ View เหล่านั้นได้เลย ไม่ต้องมานั่งซ่อนทีละตัว

การสร้างนั้นง่ายมากเพียงเราสร้าง Group ขึ้นมาแล้วใส่ id ของ View ที่จะ group ลงใน app:constraint_referenced_ids และคั่นแต่ละ id ด้วย comma ได้เลย

พอเราจะซ่อน View เหล่านี้ก็ set visibility ที่ Group ได้เลยครับ

5. Guideline

ถ้าคุณเคยสงสัยว่า จะทำยังไงให้ View ของเรายาวแค่ครึ่งจอ หรือแค่ 70% ของจอดี งานนี้ Guideline ช่วยคุณได้

หน้าตาของมันจะประมาณนี้

เส้นแบ่ง 70% ของหน้าจอ

Guideline สามารถใช้ได้ทั้งแนวตั้งแนวนอนเพียงกำหนด orientation ให้มัน

android:orientation="vertical"
android:orientation="horizontal"

Guideline นั้นสามารถกำหนดได้ 3 แบบ คือ

กำหนดเป็นระยะจากทางซ้ายหรือจากข้างบนของจอ

app:layout_constraintGuide_begin="16dp"

กำหนดเป็นระยะจากทางขวาหรือจากด้านล่างของจอ

app:layout_constraintGuide_end="16dp"

กำหนดเป็นเปอร์เซ็นต์ได้เลย (กำหนดเป็น 0.0 - 1.0)

app:layout_constraintGuide_percent="0.70"

6. Constraint circle

นอกจากจะใส่ Constraint แบบบนล่างซ้ายขวาได้แล้ว ยัง Constraint เป็นวงกลมได้ด้วยนะ

เริ่มจากกำหนดก่อนว่าจะ Constraint กับ View ตัวไหน

app:layout_constraintCircle="@id/imageView"

ใส่ว่าจะให้ห่างกับ View เท่าไหร่

app:layout_constraintCircleRadius="64dp"

แล้วก็ใส่องศา

app:layout_constraintCircleAngle="45"

ผลลัพธ์จะได้แบบนี้ครับ

7. Base line

Baseline คือ เส้นฐานของ Text นั่นเอง ไม่ว่า Text นั้นจะอยู่ใน Button ก็ตาม โดย Constraint layout ให้เราสามารถ align baseline ระหว่าง Text ด้วยกันได้

เช่นในกรณีนี้เราต้องการให้ คำว่า NO BRAIN ตรงกับคำว่า NO PAIN

เราสามารถใช้คำสั่งนี้ได้เลย

app:layout_constraintBaseline_toBaselineOf="@id/button"

ผลลัพธ์ที่ได้จะเป็นแบบนี้ครับ

นอกจากนี้แล้ว Constraint layout ยังมีความสามารถอื่นๆ ซ่อนอยู่อีก ใครที่กำลังคิดจะลองใช้ Constraint layout หรือยังไม่เคยใช้เพราะรู้สึกว่ามันยุ่งยาก ส่วนตัวผมเองก็อยากแนะนำให้ลองใช้ดูครับ ยิ่งเวลาเราทำ Layout ที่ซับซ้อนเนี่ย เจ้า Constraint layout สามารถออกแบบมาให้อยู่ในชั้นเดียวได้ เพราะว่าการสร้าง Layout ที่มี hierarchy หลายๆ ชั้นนั้นส่งผลต่อ Performance ด้วยนะครับ และถ้าเราใช้เจ้านี่จนคล่องแล้วเราก็สามารถต่อยอดไป Motion layout ได้ด้วยนะ

และทั้งหมดนี้คือ Tips ทั้ง 7 ข้อที่ผมมาแนะนำให้คุณผู้อ่านครับ : )