Khoảng cách đều nhau bằng cách sử dụng ConstraintLayout

Một cách sử dụng phổ biến cho các LinearLayoutkhung nhìn (trọng lượng) đồng đều, ví dụ:

Làm thế nào để bạn thực hiện các chế độ xem cách đều nhau như thế này bằng cách sử dụng cái mới ConstraintLayout?

ConstraintLayoutliên kết để tham khảo: bài đăng trên blog , video phiên I / O

Có hai cách để thực hiện việc này bằng cách sử dụng ConstraintLayout: Chuỗi và Nguyên tắc . Để sử dụng Chuỗi, hãy đảm bảo bạn đang sử dụng ConstraintLayoutBeta 3 hoặc mới hơn và nếu bạn muốn sử dụng trình chỉnh sửa bố cục trực quan trong Android Studio, hãy đảm bảo bạn đang sử dụng Android Studio 2.3 Beta 1 hoặc mới hơn.

Phương pháp 1 - Sử dụng Chuỗi

Mở trình soạn thảo bố cục và thêm các widget của bạn như bình thường, thêm các ràng buộc cha nếu cần. Trong trường hợp này, tôi đã thêm hai nút có ràng buộc ở dưới cùng của cha và bên của cha mẹ (bên trái cho nút Lưu và bên phải cho nút Chia sẻ):

Lưu ý rằng ở trạng thái này, nếu tôi chuyển sang chế độ xem ngang, các chế độ xem không lấp đầy cha mẹ mà được neo vào các góc:

Làm nổi bật cả hai chế độ xem, bằng cách nhấp Ctrl / Cmd hoặc bằng cách kéo hộp quanh các chế độ xem:

Sau đó nhấp chuột phải vào các chế độ xem và chọn "Trung tâm theo chiều ngang":

Điều này thiết lập một kết nối hai chiều giữa các khung nhìn (đó là cách xác định Chuỗi). Theo mặc định, kiểu chuỗi là "lây lan", được áp dụng ngay cả khi không bao gồm thuộc tính XML. Bám sát kiểu chuỗi này nhưng thiết lập độ rộng của các chế độ xem của chúng tôi để 0dpcho phép các chế độ xem lấp đầy không gian có sẵn, trải đều trên toàn bộ cha mẹ:

Điều này đáng chú ý hơn trong chế độ xem phong cảnh:

Nếu bạn muốn bỏ qua trình soạn thảo bố cục, XML kết quả sẽ trông như sau:

<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>

Chi tiết:

• đặt chiều rộng của mỗi mục thành 0dphoặc MATCH_CONSTRAINTcho phép các chế độ xem lấp đầy cha mẹ (tùy chọn)
• các khung nhìn phải được liên kết với nhau hai chiều (bên phải nút lưu liên kết đến nút chia sẻ, bên trái liên kết nút chia sẻ để lưu nút), điều này sẽ tự động xảy ra thông qua trình chỉnh sửa bố cục khi chọn "Trung tâm theo chiều ngang"
• Chế độ xem đầu tiên trong chuỗi có thể chỉ định kiểu chuỗi thông qua layout_constraintHorizontal_chainStyle, xem tài liệu về các kiểu chuỗi khác nhau, nếu kiểu chuỗi bị bỏ qua, mặc định là "lây lan"
• trọng số của chuỗi có thể được điều chỉnh thông qua layout_constraintHorizontal_weight
• ví dụ này dành cho chuỗi ngang, có các thuộc tính tương ứng cho chuỗi dọc

Phương pháp 2 - Sử dụng Hướng dẫn

Mở bố cục của bạn trong trình chỉnh sửa và nhấp vào nút hướng dẫn:

Sau đó chọn "Thêm hướng dẫn dọc":

Một hướng dẫn mới sẽ xuất hiện, theo mặc định, có thể sẽ được neo vào bên trái trong các giá trị tương đối (được biểu thị bằng mũi tên quay sang trái):

Nhấp vào mũi tên quay sang trái để chuyển nó thành giá trị phần trăm, sau đó kéo hướng dẫn đến dấu 50%:

Hướng dẫn bây giờ có thể được sử dụng như một mỏ neo cho các quan điểm khác. Trong ví dụ của tôi, tôi đã gắn bên phải nút lưu và bên trái nút chia sẻ với hướng dẫn:

Nếu bạn muốn các khung nhìn lấp đầy không gian có sẵn thì ràng buộc phải được đặt thành "Bất kỳ kích thước nào" (các đường uốn lượn chạy theo chiều ngang):

(Điều này giống như cài đặt layout_widththành 0dp).

Một hướng dẫn cũng có thể được tạo bằng XML khá dễ dàng thay vì sử dụng trình soạn thảo bố cục:

<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" />

Để tạo 2 chế độ xem trong cùng một dòng, chiều rộng bằng nhau, chỉ cần xác định

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"  
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button1" />

</android.support.constraint.ConstraintLayout>

Ghi chú

• chiều rộng = 0dp ( MATCH_CONSTRAINT)
• Ràng buộc button1và button2phải như trên

Kết quả

THÊM
Nếu bạn muốn View1lớn hơn View2bạn có thể sử dụng weighthoặc percent.
Ví dụ, View1chiều rộng = 2 * View2chiều rộng sử dụng trọng lượng

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toStartOf="parent"
        />

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/button3"
        />

</android.support.constraint.ConstraintLayout>

Kết quả

Ví dụ: View1width = 2 * View2width sử dụng phần trăm

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 5"
        app:layout_constraintEnd_toStartOf="@+id/button6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent="0.667"
        />

    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button5"
        app:layout_constraintWidth_percent="0.333"
        />

</android.support.constraint.ConstraintLayout>

Kết quả

Vâng, nếu nó giúp được ai đó

các chính là ở đây app:layout_constraintHorizontal_weight="1"và
điều tuyệt vời nhất về bố trí hạn chế là nó hỗ trợ phụ thuộc vòng tròn và đây là những gì tôi đã thực hiện bằng chính xác điều đó.

Cho con đầu lòng.
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"

Cho con thứ hai

app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"

đây là bản demo hoàn chỉnh

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputParent"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <EditText
        android:id="@+id/editTextParent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/state" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputFirstChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/pin_code" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputSecondChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildSecond"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/country" />
</android.support.design.widget.TextInputLayout>

Bạn shoul đọc về chuỗi trọng số. Một ví dụ về mã ở đây.

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <TextView
        android:id="@+id/figure_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_2"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="1"
        />

    <TextView
        android:id="@+id/figure_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_3"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_1"
        tools:text="2"
        />

    <TextView
        android:id="@+id/figure_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_2"
        tools:text="3"
        />

    <TextView
        android:id="@+id/figure_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_3"
        tools:text="4"
        />
</android.support.constraint.ConstraintLayout>

Vì vậy, thiết lập android:layout_width="0dp", app:layout_constraintHorizontal_weight="1"và liên kết tất cả các quan điểm với các nước láng giềng như:

app:layout_constraintStart_toEndOf="@id/figure_2"
app:layout_constraintEnd_toStartOf="@id/figure_4"

Khi bạn có các mục bị xiềng xích, bạn vẫn có thể sử dụng các trọng số trên chúng như bố cục tương đối để giữ chúng cách đều nhau. Ví dụ dưới đây cho thấy cách giữ cho chúng cách đều nhau với các textView kích thước khác nhau.

<TextView1
     app:layout_constraintHorizontal_weight="1" />
 <TextView2
     app:layout_constraintHorizontal_weight="1" />
 <TextView3
     app:layout_constraintHorizontal_weight="1" />
 <TextView4
     app:layout_constraintHorizontal_weight="1" />