สร้าง UI ที่ปรับเปลี่ยนตามอุปกรณ์ด้วย ConstraintLayout   ส่วนหนึ่งของ Android Jetpack

รูปที่ 1 เอดิเตอร์จะแสดงมุมมอง C ใต้ A แต่ไม่มีข้อจำกัดแนวตั้ง

รูปที่ 2 ตอนนี้มุมมอง C ถูกจำกัดในแนวตั้ง ใต้มุมมอง A แล้ว

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

เพิ่ม ConstraintLayout ลงในโปรเจ็กต์

หากต้องการใช้ ConstraintLayout ในโปรเจ็กต์ ให้ทำดังนี้

1. ตรวจสอบว่าคุณได้ประกาศที่เก็บ maven.google.com ในไฟล์ settings.gradle แล้ว

   ดึงดูด

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   Kotlin

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

2. เพิ่มไลบรารีเป็นทรัพยากร Dependency ในไฟล์ build.gradle ระดับโมดูล ดังที่แสดงในตัวอย่างต่อไปนี้ เวอร์ชันล่าสุด อาจแตกต่างจากที่แสดงในตัวอย่าง

   ดึงดูด

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.1"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.1"
   }

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.1")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.1")
   }

3. ในแถบเครื่องมือหรือการแจ้งเตือนการซิงค์ ให้คลิกซิงค์โปรเจ็กต์กับไฟล์ Gradle

ตอนนี้คุณก็พร้อมที่จะสร้างเลย์เอาต์ด้วย ConstraintLayout แล้ว

แปลงเลย์เอาต์

รูปที่ 3 เมนูสำหรับแปลงเลย์เอาต์เป็น ConstraintLayout

หากต้องการแปลงเลย์เอาต์ที่มีอยู่เป็น ConstraintLayout ให้ทำตามขั้นตอนต่อไปนี้

1. เปิดเลย์เอาต์ใน Android Studio แล้วคลิกแท็บดีไซน์ที่ด้านล่างของหน้าต่างเอดิเตอร์
2. ในหน้าต่างแผนผังคอมโพเนนต์ ให้คลิกขวาที่เลย์เอาต์ แล้วคลิก แปลง LinearLayout เป็น ConstraintLayout

สร้างเลย์เอาต์ใหม่

หากต้องการเริ่มไฟล์ ConstraintLayout ใหม่ ให้ทำตามขั้นตอนต่อไปนี้

1. ในหน้าต่างโปรเจ็กต์ ให้คลิกโฟลเดอร์โมดูล แล้วเลือก ไฟล์ > ใหม่ > XML > XML ของเลย์เอาต์
2. ป้อนชื่อไฟล์เลย์เอาต์ แล้วป้อน "androidx.constraintlayout.widget.ConstraintLayout" สำหรับแท็ก รูท
3. คลิกเสร็จสิ้น

เพิ่มหรือนำข้อจำกัดออก

หากต้องการเพิ่มข้อจำกัด ให้ทำดังนี้

1. ลากมุมมองจากหน้าต่างพาเล็ตไปยังเอดิเตอร์

   เมื่อเพิ่มมุมมองใน ConstraintLayout มุมมองจะแสดงใน กรอบล้อมรอบที่มีแฮนเดิลการปรับขนาดสี่เหลี่ยมจัตุรัสที่แต่ละมุมและแฮนเดิล ข้อจำกัดแบบวงกลมที่แต่ละด้าน

2. คลิกมุมมองเพื่อเลือก
3. ทำตามข้อใดข้อหนึ่งต่อไปนี้
   • คลิกแฮนเดิลข้อจำกัดแล้วลากไปยังจุดยึดที่ใช้ได้ จุดนี้อาจเป็นขอบของมุมมองอื่น ขอบของเลย์เอาต์ หรือ แนวทาง โปรดสังเกตว่าขณะลากแฮนเดิลข้อจำกัด เครื่องมือสร้างเลย์เอาต์ จะแสดงจุดยึดการเชื่อมต่อที่เป็นไปได้และภาพซ้อนทับสีน้ำเงิน

   • คลิกปุ่มสร้างการเชื่อมต่อ ปุ่มใดปุ่มหนึ่งในส่วนเลย์เอาต์ของหน้าต่างแอตทริบิวต์ ดังที่แสดง ในรูปที่ 4

     

     รูปที่ 4 ส่วนเลย์เอาต์ ของหน้าต่างแอตทริบิวต์ช่วยให้คุณสร้าง การเชื่อมต่อได้

เมื่อสร้างข้อจำกัดแล้ว เอดิเตอร์จะกำหนดระยะขอบเริ่มต้นเพื่อแยก 2 มุมมอง

เมื่อสร้างข้อจำกัด โปรดคำนึงถึงกฎต่อไปนี้

• ทุกมุมมองต้องมีข้อจำกัดอย่างน้อย 2 ข้อ ได้แก่ ข้อจำกัดแนวนอน 1 ข้อและข้อจำกัดแนวตั้ง 1 ข้อ
• คุณสร้างข้อจำกัดได้เฉพาะระหว่างแฮนเดิลข้อจำกัดกับจุดยึดที่ใช้ระนาบเดียวกัน ระนาบแนวตั้ง (ด้านซ้ายและขวา) ของมุมมองจะจำกัดได้เฉพาะระนาบแนวตั้งอื่น และเส้นฐานจะจำกัดได้เฉพาะเส้นฐานอื่นๆ
• แฮนเดิลข้อจำกัดแต่ละรายการใช้ได้กับข้อจำกัดเพียงรายการเดียว แต่คุณสามารถ สร้างข้อจำกัดหลายรายการจากมุมมองต่างๆ ไปยังจุดยึดเดียวกันได้

คุณลบข้อจํากัดได้โดยทําอย่างใดอย่างหนึ่งต่อไปนี้

• คลิกข้อจำกัดเพื่อเลือก แล้วคลิกลบ

• คลิกโดยกด Control (กด Command ใน macOS) ที่จุดยึดข้อจำกัด ข้อจำกัดจะเปลี่ยนเป็นสีแดงเพื่อระบุว่าคุณคลิกเพื่อ ลบได้ ดังที่แสดงในรูปที่ 5

  

  รูปที่ 5 ข้อจำกัดสีแดงบ่งบอก ว่าคุณคลิกเพื่อลบได้

• ในส่วนเลย์เอาต์ของหน้าต่างแอตทริบิวต์ ให้คลิก จุดยึดข้อจำกัด ดังที่แสดงในรูปที่ 6

  

  รูปที่ 6 คลิกข้อจำกัด เพื่อลบ

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

คุณสามารถใช้ข้อจํากัดเพื่อให้ได้ลักษณะการทํางานของเลย์เอาต์ประเภทต่างๆ ตามที่อธิบายไว้ในส่วนต่อไปนี้

ตำแหน่งองค์ประกอบหลัก

จำกัดด้านของมุมมองให้ตรงกับขอบที่สอดคล้องกันของเลย์เอาต์

ในรูปที่ 7 ด้านซ้ายของมุมมองเชื่อมต่อกับขอบด้านซ้ายของเลย์เอาต์หลัก คุณกำหนดระยะห่างจากขอบได้โดยใช้ระยะขอบ

รูปที่ 7 ข้อจำกัดแนวนอนกับ องค์ประกอบระดับบนสุด

ตำแหน่งการสั่งซื้อ

กำหนดลำดับการแสดงของ 2 มุมมอง ไม่ว่าจะเป็นแนวตั้งหรือแนวนอน

ในรูปที่ 8 B จะถูกจำกัดให้อยู่ทางขวาของ A เสมอ และ C จะถูกจำกัดให้อยู่ใต้ A อย่างไรก็ตาม ข้อจำกัดเหล่านี้ไม่ได้หมายถึงการจัดแนว ดังนั้น B จึงยังเลื่อนขึ้นและลงได้

รูปที่ 8 ข้อจำกัดแนวนอนและแนวตั้ง

การจัดข้อความ

จัดแนวขอบของมุมมองให้ตรงกับขอบเดียวกันของอีกมุมมองหนึ่ง

ในรูปที่ 9 ด้านซ้ายของ B จะตรงแนวกับด้านซ้ายของ A หากต้องการ จัดกึ่งกลางของมุมมอง ให้สร้างข้อจำกัดทั้ง 2 ด้าน

คุณสามารถชดเชยการจัดแนวได้โดยลากมุมมองเข้าด้านในจากข้อจำกัด เช่น รูปที่ 10 แสดง B ที่มีการจัดแนวออฟเซ็ต 24dp ออฟเซ็ตจะกำหนดโดยขอบของมุมมองที่จำกัด

นอกจากนี้ คุณยังเลือกมุมมองทั้งหมดที่ต้องการจัดแนว แล้วคลิก จัดแนว ในแถบเครื่องมือเพื่อเลือกประเภทการจัดแนวได้ด้วย

รูปที่ 9 ข้อจํากัดการจัดแนวแนวนอน

รูปที่ 10 ข้อจํากัดการจัดแนวแนวนอนที่มีออฟเซ็ต

การจัดแนวบรรทัดฐาน

จัดแนวเส้นบรรทัดข้อความของ View หนึ่งให้ตรงกับเส้นบรรทัดข้อความของอีก View หนึ่ง

ในรูปที่ 11 บรรทัดแรกของ B จะตรงกับข้อความใน A

หากต้องการสร้างข้อจำกัดพื้นฐาน ให้คลิกขวาที่มุมมองข้อความที่ต้องการ จำกัด แล้วคลิกแสดงบรรทัดฐาน จากนั้นคลิกที่บรรทัดฐานของข้อความ แล้วลากเส้นไปยังบรรทัดฐานอื่น

รูปที่ 11 ข้อจำกัดการจัดแนวเส้นฐาน

กำหนดให้อยู่ในแนวเส้น

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

หากต้องการสร้างเส้นไกด์ ให้คลิกเส้นไกด์ ในแถบเครื่องมือ แล้วคลิกเพิ่มเส้นไกด์แนวตั้งหรือเพิ่มเส้นไกด์แนวนอน

ลากเส้นประเพื่อจัดตำแหน่งใหม่ แล้วคลิกวงกลมที่ขอบของ เส้นบอกแนวเพื่อสลับโหมดการวัด

รูปที่ 12 มุมมองที่จำกัดไว้ที่ เส้นบอกแนว

จำกัดไว้ที่สิ่งกีดขวาง

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

ตัวอย่างเช่น ในรูปที่ 13 มุมมอง C จะจำกัดอยู่ทางด้านขวาของ สิ่งกีดขวาง โดยจะตั้งค่าอุปสรรคเป็น "สิ้นสุด" (หรือด้านขวาในเลย์เอาต์จากซ้ายไปขวา) ของทั้งมุมมอง A และมุมมอง B โดยสิ่งกีดขวางจะเลื่อนไปตามว่าด้านขวาของมุมมอง A หรือมุมมอง B อยู่ทางขวาสุด

หากต้องการสร้างอุปสรรค ให้ทำตามขั้นตอนต่อไปนี้

1. คลิกเส้นบอกแนว ในแถบเครื่องมือ แล้วคลิกเพิ่มเส้นกั้นแนวตั้งหรือ เพิ่มเส้นกั้นแนวนอน
2. ในหน้าต่างแผนผังคอมโพเนนต์ ให้เลือกมุมมองที่ต้องการภายใน แบริเออร์ แล้วลากไปยังคอมโพเนนต์แบริเออร์
3. เลือกอุปสรรคจากแผนผังคอมโพเนนต์ เปิดหน้าต่าง Attributes แล้วตั้งค่า barrierDirection

ตอนนี้คุณสามารถสร้างข้อจำกัดจากมุมมองอื่นไปยังอุปสรรคได้แล้ว

นอกจากนี้ คุณยังจำกัดมุมมองที่อยู่ภายในสิ่งกีดขวางให้แสดงเฉพาะสิ่งกีดขวางได้ด้วย วิธีนี้จะช่วยให้คุณจัดแนวทุกมุมมองในอุปสรรคให้ตรงกันได้ แม้ว่าคุณจะไม่รู้ว่ามุมมองใดที่ยาวที่สุดหรือสูงที่สุดก็ตาม

นอกจากนี้ คุณยังใส่เส้นบอกแนวภายในสิ่งกีดขวางเพื่อให้มั่นใจว่าสิ่งกีดขวางจะมีตำแหน่ง "ขั้นต่ำ" ได้ด้วย

รูปที่ 13 มุมมอง C ถูกจำกัดด้วยขอบเขต ซึ่งจะเคลื่อนที่ตามตำแหน่งและขนาดของทั้งมุมมอง A และมุมมอง B

ปรับอคติของข้อจำกัด

เมื่อเพิ่มข้อจำกัดทั้ง 2 ด้านของ View และขนาด View สำหรับ มิติข้อมูลเดียวกันเป็น "คงที่" หรือ "Wrap Content" View จะอยู่ตรงกลาง ระหว่างข้อจำกัด 2 รายการโดยมีค่าเริ่มต้นเป็น 50% คุณปรับ อคติได้โดยลากแถบเลื่อนอคติในหน้าต่างแอตทริบิวต์ หรือโดยการลาก มุมมอง ดังที่แสดงในวิดีโอ 3

หากต้องการให้มุมมองขยายขนาดให้ตรงตามข้อจำกัด ให้เปลี่ยนขนาดเป็น "ตรงตามข้อจำกัด"

ปรับขนาดมุมมอง

รูปที่ 14 เมื่อเลือกมุมมองแล้ว หน้าต่างแอตทริบิวต์จะมีตัวควบคุมสำหรับ 1 สัดส่วนขนาด 2 การลบข้อจำกัด 3 โหมดความสูงหรือความกว้าง 4 ระยะขอบ และ 5 ค่าอคติของข้อจำกัด นอกจากนี้ คุณยังไฮไลต์ข้อจำกัดแต่ละรายการในเครื่องมือแก้ไขเลย์เอาต์ได้โดยคลิกข้อจำกัดในรายการข้อจำกัด 6

คุณใช้แฮนเดิลมุมเพื่อปรับขนาดมุมมองได้ แต่การดำเนินการนี้จะฮาร์ดโค้ด ขนาด ซึ่งหมายความว่ามุมมองจะไม่ปรับขนาดสำหรับเนื้อหาหรือขนาดหน้าจอที่แตกต่างกัน หากต้องการ เลือกโหมดการปรับขนาดอื่น ให้คลิกมุมมองแล้วเปิดหน้าต่างแอตทริบิวต์ ทางด้านขวาของเอดิเตอร์

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

คุณเปลี่ยนวิธีคำนวณความสูงและความกว้างได้โดยคลิกสัญลักษณ์ ที่ระบุด้วยข้อความอธิบาย 3 ในรูปที่ 14 สัญลักษณ์เหล่านี้แสดงโหมดขนาดดังนี้ คลิกสัญลักษณ์เพื่อสลับ ระหว่างการตั้งค่าต่อไปนี้

• คงที่: ระบุขนาดที่เฉพาะเจาะจงในกล่องข้อความต่อไปนี้หรือโดย การปรับขนาดมุมมองในเครื่องมือแก้ไข
• ตัดเนื้อหา: มุมมองจะขยายเฉพาะเท่าที่จำเป็นเพื่อให้พอดีกับเนื้อหา
• layout_constrainedWidth

ตั้งค่าเป็น true เพื่อให้มิติข้อมูลแนวนอนเปลี่ยนเป็น ตามข้อจำกัด โดยค่าเริ่มต้น วิดเจ็ตที่ตั้งค่าเป็น WRAP_CONTENT จะไม่ถูกจำกัดด้วยข้อจำกัด

• ข้อจำกัดในการจับคู่: มุมมองจะขยายให้มากที่สุดเท่าที่จะทำได้เพื่อให้เป็นไปตาม ข้อจำกัดในแต่ละด้าน หลังจากพิจารณามาร์จิ้นของมุมมองแล้ว อย่างไรก็ตาม คุณ สามารถแก้ไขลักษณะการทำงานดังกล่าวได้ด้วยแอตทริบิวต์และค่าต่อไปนี้ แอตทริบิวต์เหล่านี้จะมีผลเมื่อคุณตั้งค่าความกว้างของมุมมองเป็น "ตรงกับข้อจำกัด" เท่านั้น
  • layout_constraintWidth_min

    ซึ่งใช้มิติข้อมูล dp สำหรับความกว้างขั้นต่ำของมุมมอง

  • layout_constraintWidth_max

    ซึ่งใช้dpมิติข้อมูลสำหรับความกว้างสูงสุดของมุมมอง

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

ตั้งค่าขนาดเป็นอัตราส่วน

รูปที่ 15 โดยมุมมองจะตั้งค่าเป็นสัดส่วน 16:9 และกำหนดความกว้างตามอัตราส่วนของความสูง

คุณสามารถตั้งค่าขนาดมุมมองเป็นอัตราส่วน เช่น 16:9 หากตั้งค่ามิติข้อมูลมุมมองอย่างน้อย 1 รายการเป็น "ตรงกับข้อจำกัด" (0dp) หากต้องการเปิดใช้อัตราส่วน ให้คลิกสลับข้อจำกัดของสัดส่วนภาพ (คำอธิบายประกอบ 1 ในรูปที่ 14) แล้วป้อนอัตราส่วน width:height ในอินพุตที่ปรากฏ

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

เช่น หากตั้งค่าทั้ง 2 ด้านเป็น "ตรงกับข้อจำกัด" ให้คลิกสลับ ข้อจำกัดของสัดส่วนภาพ 2 ครั้งเพื่อตั้งค่าความกว้างให้เป็นสัดส่วนของความสูง ขนาดทั้งหมดจะกำหนดโดยความสูงของมุมมอง ซึ่งกำหนดได้ใน ทุกวิถีทาง ดังที่แสดงในรูปที่ 15

ปรับขอบการแสดงผล

หากต้องการให้มุมมองมีระยะห่างเท่ากัน ให้คลิกระยะขอบ ในแถบเครื่องมือเพื่อเลือกระยะขอบเริ่มต้นสําหรับแต่ละมุมมองที่คุณเพิ่มลงใน เลย์เอาต์ การเปลี่ยนแปลงใดๆ ที่คุณทำกับขอบเริ่มต้นจะมีผลกับมุมมองที่คุณเพิ่มหลังจากนั้นเท่านั้น

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

รูปที่ 16 ปุ่มขอบ ของแถบเครื่องมือ

ขอบทั้งหมดที่เครื่องมือนี้เสนอเป็นปัจจัยของ 8dp เพื่อช่วยให้มุมมองสอดคล้อง กับคำแนะนำตารางกริดสี่เหลี่ยม 8dp ของ Material Design

ควบคุมกลุ่มเชิงเส้นด้วยเชน

รูปที่ 17 เชนแนวนอนที่มี 2 มุมมอง

เชนคือกลุ่มของมุมมองที่ลิงก์กันด้วยข้อจํากัดด้านตําแหน่งแบบ 2 ทาง คุณสามารถจัดจำหน่ายช่องภายในเชนได้ทั้ง แนวตั้งหรือแนวนอน

รูปที่ 18 ตัวอย่างของแต่ละเชน สไตล์

คุณจัดรูปแบบเชนได้ด้วยวิธีใดวิธีหนึ่งต่อไปนี้

1. กระจาย: ระบบจะกระจายยอดดูอย่างเท่าเทียมกันหลังจากพิจารณาส่วนต่างแล้ว โดยตัวเลือกนี้คือค่าเริ่มต้น
2. กระจายภายใน: ระบบจะกำหนดการดูครั้งแรกและครั้งสุดท้ายให้กับข้อจำกัดที่ปลายแต่ละด้านของเชน และกระจายส่วนที่เหลืออย่างเท่าเทียมกัน
3. ถ่วงน้ำหนัก: เมื่อตั้งค่าเชนเป็นกระจายหรือ กระจายด้านใน คุณจะเติมพื้นที่ที่เหลือได้โดยตั้งค่า View อย่างน้อย 1 รายการเป็น "ตรงกับข้อจำกัด" (0dp) โดยค่าเริ่มต้น ระบบจะกระจายพื้นที่ อย่างเท่าเทียมกันระหว่าง View แต่ละรายการที่ตั้งค่าเป็น "ตรงกับข้อจำกัด" แต่ คุณสามารถกำหนดน้ำหนักความสำคัญให้กับ View แต่ละรายการได้โดยใช้แอตทริบิวต์ layout_constraintHorizontal_weight และ layout_constraintVertical_weight ซึ่งทำงานในลักษณะเดียวกับ layout_weight ในเลย์เอาต์เชิงเส้น โดยมุมมองที่มีค่าถ่วงน้ำหนักสูงสุดจะได้รับพื้นที่มากที่สุด และ มุมมองที่มีค่าถ่วงน้ำหนักเท่ากันจะได้รับพื้นที่เท่ากัน
4. แพ็ก: ระบบจะแพ็กมุมมองเข้าด้วยกันหลังจากพิจารณามาร์จิ้นแล้ว คุณปรับอคติของทั้งเชนได้ ไม่ว่าจะไปทางซ้ายหรือขวา หรือขึ้นหรือลง โดยเปลี่ยนอคติของมุมมอง "หัว" ของเชน

มุมมอง "หัว" ของเชน ซึ่งเป็นมุมมองซ้ายสุดในเชนแนวนอน (ในเลย์เอาต์จากซ้ายไปขวา) และมุมมองบนสุดในเชนแนวตั้ง จะกำหนดสไตล์ของเชนใน XML อย่างไรก็ตาม คุณสามารถสลับระหว่างกระจาย กระจายภายใน และ อัดแน่นได้โดยเลือกมุมมองใดก็ได้ในเชน แล้วคลิกปุ่มเชน ที่ปรากฏใต้มุมมอง

หากต้องการสร้างเชน ให้ทำดังนี้ตามที่แสดงในวิดีโอ 4

1. เลือกข้อมูลพร็อพเพอร์ตี้ทั้งหมดที่จะรวมไว้ในเชน
2. คลิกขวาที่มุมมองใดมุมมองหนึ่ง
3. เลือกเชน
4. เลือกจัดกึ่งกลางในแนวนอนหรือจัดกึ่งกลางในแนวตั้ง

สิ่งที่ควรคำนึงถึงเมื่อใช้เชนมีดังนี้

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

สร้างข้อจํากัดโดยอัตโนมัติ

แทนที่จะเพิ่มข้อจํากัดให้กับทุกมุมมองขณะวางในเลย์เอาต์ คุณสามารถย้ายแต่ละมุมมองไปยังตําแหน่งที่ต้องการในเครื่องมือสร้างเลย์เอาต์ และจากนั้นคลิกอนุมานข้อจํากัด เพื่อสร้างข้อจํากัดโดยอัตโนมัติ

อนุมานข้อจำกัดจะสแกนเลย์เอาต์เพื่อกำหนดชุดข้อจำกัดที่มีประสิทธิภาพสูงสุด สำหรับทุกมุมมอง โดยจะจำกัดมุมมองให้อยู่ในตำแหน่งปัจจุบัน พร้อมทั้งให้ความยืดหยุ่น คุณอาจต้องปรับเปลี่ยนเพื่อให้ เลย์เอาต์ตอบสนองตามที่คุณต้องการสำหรับขนาดหน้าจอและการวางแนวต่างๆ

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

ระบบจะปิดใช้การเชื่อมต่ออัตโนมัติโดยค่าเริ่มต้น โดยเปิดใช้ได้โดยคลิกเปิดใช้ การเชื่อมต่ออัตโนมัติกับองค์ประกอบหลัก ในแถบเครื่องมือของเครื่องมือสร้างเลย์เอาต์

ภาพเคลื่อนไหวคีย์เฟรม

ภายใน ConstraintLayout คุณสามารถทำให้การเปลี่ยนแปลงขนาด และตำแหน่งขององค์ประกอบเคลื่อนไหวได้โดยใช้ ConstraintSet และ TransitionManager

ConstraintSet คือออบเจ็กต์น้ำหนักเบาที่แสดงถึงข้อจำกัด ขอบ และระยะห่างจากขอบขององค์ประกอบย่อยทั้งหมดภายใน ConstraintLayout เมื่อใช้ ConstraintSet กับ ConstraintLayout ที่แสดงอยู่ เลย์เอาต์จะอัปเดตข้อจำกัดของ องค์ประกอบย่อยทั้งหมด

หากต้องการสร้างภาพเคลื่อนไหวโดยใช้ ConstraintSet ให้ระบุไฟล์เลย์เอาต์ 2 ไฟล์ที่ทำหน้าที่เป็นคีย์เฟรมเริ่มต้นและคีย์เฟรมสิ้นสุดสำหรับภาพเคลื่อนไหว จากนั้นคุณจะโหลด ConstraintSetจากไฟล์คีย์เฟรมที่ 2 และนำไปใช้กับ ConstraintLayoutที่แสดงได้

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีเคลื่อนไหวการย้ายปุ่มเดียวไปที่ด้านล่างของหน้าจอ

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

แหล่งข้อมูลเพิ่มเติม

ConstraintLayout ใช้ในแอปเดโม Sunflower