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

รูปที่ 1 เครื่องมือแก้ไขแสดงมุมมอง C ต่ำกว่า A แต่ ไม่มีข้อจำกัดแนวตั้ง

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

แม้ว่าข้อจำกัดที่ขาดหายไปจะไม่ทำให้เกิดข้อผิดพลาดในการคอมไพล์ แต่เค้าโครง 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.0-alpha14"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14"
   }
   

   Kotlin

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

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

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

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

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

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

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

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

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

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

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

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

1. ลากมุมมองจากหน้าต่างชุดสีลงในเครื่องมือแก้ไข

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

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

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

     

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

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

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

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

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

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

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

  

  รูปที่ 5 จุดยึดสีแดงบ่งชี้ว่า ที่คุณสามารถคลิกเพื่อลบไฟล์นั้นๆ ได้

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

  

  รูปที่ 6 คลิกจุดยึด Anchor เพื่อลบ

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

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

ตำแหน่งหลัก

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

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

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

ตำแหน่งคำสั่งซื้อ

กำหนดลำดับของการแสดงผลสำหรับ 2 มุมมอง คือแนวตั้งหรือแนวตั้ง ในแนวนอน

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

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

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

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

ในรูปที่ 9 ด้านซ้ายของ B อยู่ในแนวเดียวกับด้านซ้ายของ A หากคุณต้องการ เพื่อปรับจุดศูนย์กลางของมุมมอง ให้สร้างจุดยึดทั้งสองด้าน

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

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

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

รูปที่ 10 ออฟเซ็ตแนวนอน จุดยึด

การปรับเกณฑ์พื้นฐาน

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

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

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

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

จำกัดให้เป็นไปตามหลักเกณฑ์

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

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

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

รูปที่ 12 มุมมองจำกัดเป็น ของเรา

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

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

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

ทำตามขั้นตอนต่อไปนี้เพื่อสร้างเกราะป้องกัน

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

ตอนนี้คุณสร้างจุดยึดจากมุมมองอื่นให้เป็นอุปสรรคได้แล้ว

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

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

รูปที่ 13 มุมมอง C เป็นสิ่งกีดขวาง ซึ่งจะย้ายไปตามตำแหน่งและขนาดของทั้งมุมมอง A และการแสดงผล B

ปรับการให้น้ำหนักข้อจำกัด

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

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

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

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

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

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

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

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

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

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

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

  • layout_constraintWidth_max

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

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

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

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

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

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

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

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

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

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

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

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

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

รูปที่ 17 ห่วงโซ่แนวนอนที่มี 2 มุมมอง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// 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 ถูกใช้ใน ดอกทานตะวัน แอปเดโม