มีสองวิธีที่จะบรรลุนี้โดยใช้เป็นConstraintLayout
: โซ่และแนวทาง ในการใช้ Chains ตรวจสอบให้แน่ใจว่าคุณใช้ConstraintLayout
เบต้า 3 หรือใหม่กว่าและหากคุณต้องการใช้โปรแกรมแก้ไขเค้าโครงภาพใน Android Studio ตรวจสอบให้แน่ใจว่าคุณใช้ Android Studio 2.3 Beta 1 หรือใหม่กว่า
วิธีที่ 1 - การใช้โซ่
เปิดตัวแก้ไขเค้าโครงและเพิ่มวิดเจ็ตของคุณตามปกติโดยเพิ่มข้อ จำกัด ระดับบนสุดตามต้องการ ในกรณีนี้ฉันได้เพิ่มปุ่มสองปุ่มพร้อมข้อ จำกัด ที่ด้านล่างของพาเรนต์และด้านข้างของพาเรนต์ (ด้านซ้ายสำหรับปุ่มบันทึกและด้านขวาสำหรับปุ่มแชร์):

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

ไฮไลต์มุมมองทั้งสองโดย Ctrl / Cmd คลิกหรือลากกล่องไปรอบ ๆ มุมมอง:

จากนั้นคลิกขวาที่มุมมองและเลือก "Center Horizontally":

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

สิ่งนี้เห็นได้ชัดเจนมากขึ้นในมุมมองแนวนอน:

หากคุณต้องการข้ามโปรแกรมแก้ไขเค้าโครง XML ที่ได้จะมีลักษณะดังนี้:
<android.support.constraint.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/button_save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/button_save_text"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="4dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button_share"
app:layout_constraintHorizontal_chainStyle="spread" />
<Button
android:id="@+id/button_share"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/button_share_text"
android:layout_marginStart="4dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintLeft_toRightOf="@+id/button_save"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
รายละเอียด:
- การตั้งค่าความกว้างของแต่ละรายการเป็น
0dp
หรือMATCH_CONSTRAINT
ให้มุมมองเติมพาเรนต์ (ไม่บังคับ)
- มุมมองจะต้องเชื่อมโยงกันแบบสองทิศทาง (ด้านขวาของลิงก์ปุ่มบันทึกเพื่อแชร์ปุ่มด้านซ้ายของลิงก์ปุ่มแชร์เพื่อบันทึกปุ่ม) สิ่งนี้จะเกิดขึ้นโดยอัตโนมัติผ่านตัวแก้ไขเค้าโครงเมื่อเลือก "กึ่งกลางแนวนอน"
- มุมมองแรกในห่วงโซ่สามารถระบุรูปแบบโซ่ผ่าน
layout_constraintHorizontal_chainStyle
ดูเอกสารสำหรับรูปแบบโซ่ต่างๆหากไม่ใส่สไตล์โซ่ค่าเริ่มต้นคือ "กระจาย"
- สามารถปรับการถ่วงน้ำหนักของโซ่ได้ทาง
layout_constraintHorizontal_weight
- ตัวอย่างนี้สำหรับโซ่แนวนอนมีแอตทริบิวต์ที่สอดคล้องกันสำหรับโซ่แนวตั้ง
วิธีที่ 2 - การใช้แนวทาง
เปิดเค้าโครงของคุณในตัวแก้ไขแล้วคลิกปุ่มแนวทาง:

จากนั้นเลือก "เพิ่มแนวตั้งแนวตั้ง":

แนวปฏิบัติใหม่จะปรากฏขึ้นซึ่งโดยค่าเริ่มต้นจะมีการยึดไว้ทางซ้ายในค่าสัมพัทธ์ (แสดงด้วยลูกศรชี้ไปทางซ้าย):

คลิกลูกศรชี้ไปทางซ้ายเพื่อเปลี่ยนเป็นค่าเปอร์เซ็นต์จากนั้นลากแนวทางไปที่เครื่องหมาย 50%:

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

หากคุณต้องการให้มุมมองเต็มพื้นที่ว่างควรตั้งค่าข้อ จำกัด เป็น "ขนาดใดก็ได้" (เส้นหยักที่วิ่งในแนวนอน):

(ซึ่งเป็นเช่นเดียวกับการตั้งค่าlayout_width
การ0dp
)
นอกจากนี้ยังสามารถสร้างแนวทางใน XML ได้ค่อนข้างง่ายแทนที่จะใช้ตัวแก้ไขโครงร่าง:
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />