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

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

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

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

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

   Groovy

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

   Kotlin

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

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

   ดึงดูด

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.0-beta01"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01"
   }
   

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.0-beta01")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01")
   }
   

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

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

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

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

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

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

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

1. ในหน้าต่างโปรเจ็กต์ ให้คลิกโฟลเดอร์โมดูล แล้วเลือกไฟล์ > ใหม่ > XML > Layout 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 คุณจะเห็นเอฟเฟกต์มากที่สุดเมื่อตั้งค่าขนาดมุมมองเป็น "คงที่" หรือ "รวมเนื้อหา" ซึ่งในกรณีนี้มุมมองจะอยู่ตรงกลางระหว่างข้อจำกัด หากต้องการยืดขนาดมุมมองให้เป็นไปตามข้อจำกัดแทน ให้เปลี่ยนขนาดเป็น "ตรงกับข้อจำกัด" หากต้องการคงขนาดปัจจุบันไว้แต่ย้ายมุมมองให้ไม่อยู่ตรงกลาง ให้ปรับค่าความเอียงของข้อจำกัด

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

ตำแหน่งของผู้ปกครอง

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

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

การจัดแนวตามเส้นฐาน

จำกัดตามหลักเกณฑ์

กำหนดให้อยู่ภายในสิ่งกีดขวาง

ปรับความลำเอียงของข้อจำกัด

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

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

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

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

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

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

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

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

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

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

  • layout_constraintWidth_max

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

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

กำหนดขนาดเป็นอัตราส่วน

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

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

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

ปรับระยะขอบของมุมมอง

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

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

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

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

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

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

คุณจัดสไตล์โซ่ได้ 1 ใน 2 วิธีต่อไปนี้

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

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

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

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

สิ่งที่ควรพิจารณาเมื่อใช้เชนมีดังนี้

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

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

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

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

เชื่อมต่อกับอุปกรณ์หลักโดยอัตโนมัติเป็นฟีเจอร์แยกต่างหากที่คุณเปิดใช้ได้ เมื่อเปิดใช้งานและเพิ่มข้อมูลพร็อพเพอร์ตี้ย่อยลงในมุมมองระดับบนสุด ฟีเจอร์นี้จะสร้างข้อจำกัดอย่างน้อย 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