Xây dựng giao diện người dùng thích ứng bằng ConstraintLayout Một phần của Android Jetpack.

Mặc dù việc thiếu điều kiện ràng buộc không gây ra lỗi biên dịch, nhưng Layout Editor sẽ cho biết điều kiện ràng buộc bị thiếu dưới dạng lỗi trong thanh công cụ. Để xem các lỗi và cảnh báo khác, hãy nhấp vào biểu tượng Hiện cảnh báo và lỗi . Để giúp bạn tránh thiếu các quy tắc ràng buộc, Layout Editor (Trình chỉnh sửa bố cục) sẽ tự động thêm các quy tắc ràng buộc cho bạn bằng các tính năng Tự động kết nối và suy luận các quy tắc ràng buộc.

Thêm ConstraintLayout vào dự án

Để sử dụng ConstraintLayout trong dự án, hãy tiến hành như sau:

1. Đảm bảo bạn đã khai báo kho lưu trữ maven.google.com trong tệp settings.gradle:

   Groovy

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

   Kotlin

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

2. Thêm thư viện làm phần phụ thuộc trong tệp build.gradle ở cấp mô-đun, như trong ví dụ sau. Phiên bản mới nhất có thể khác với phiên bản trong ví dụ.

   Groovy

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

   Kotlin

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

3. Trong thanh công cụ hoặc thông báo đồng bộ hoá, hãy nhấp vào Đồng bộ hoá dự án với tệp Gradle.

Bây giờ, bạn đã sẵn sàng tạo bố cục bằng ConstraintLayout.

Chuyển đổi bố cục

Để chuyển đổi một bố cục hiện có thành một bố cục ràng buộc, hãy làm theo các bước sau:

1. Mở bố cục trong Android Studio rồi nhấp vào thẻ Design (Thiết kế) ở cuối cửa sổ trình chỉnh sửa.
2. Trong cửa sổ Component Tree (Cây thành phần), hãy nhấp chuột phải vào bố cục đó rồi nhấp vào Convert LinearLayout to ConstraintLayout (Chuyển đổi LinearLayout thành ConstraintLayout).

Tạo bố cục mới

Để bắt đầu một tệp bố cục ràng buộc mới, hãy làm theo các bước sau:

1. Trong cửa sổ Project (Dự án), hãy nhấp vào thư mục mô-đun rồi chọn File > New > XML > Layout XML (Tệp > Mới > XML > XML bố cục).
2. Nhập tên cho tệp bố cục rồi nhập "androidx.Constrainttlayout.Widget.ConstraintLayout" cho Thẻ gốc.
3. Nhấp vào Hoàn tất.

Thêm hoặc xoá quy tắc ràng buộc

Để thêm quy tắc ràng buộc, hãy làm như sau:

1. Kéo một thành phần hiển thị từ cửa sổ Palette (Bảng chế độ xem) vào trình chỉnh sửa.

   Khi bạn thêm thành phần hiển thị vào ConstraintLayout, thành phần hiển thị đó sẽ xuất hiện trong một hộp giới hạn có ô điều khiển thay đổi kích thước hình vuông ở mỗi góc và các ô điều khiển giới hạn dạng hình tròn ở mỗi bên.

2. Nhấp vào chế độ xem để chọn chế độ xem đó.
3. Thực hiện một trong những thao tác sau:
   • Nhấp vào một tay điều khiển quy tắc ràng buộc rồi kéo tay điều khiển đó đến một điểm neo có sẵn. Điểm này có thể là cạnh của một thành phần hiển thị khác, cạnh của bố cục hoặc một nguyên tắc. Lưu ý khi bạn kéo ô điều khiển ràng buộc, Layout Editor sẽ hiển thị các neo kết nối tiềm năng và lớp phủ màu xanh dương.

   • Nhấp vào một trong các nút Create a connection (Tạo kết nối) trong phần Layout (Bố cục) của cửa sổ Attributes (Thuộc tính), như minh hoạ trong hình 4.

     

     Hình 4. Phần Bố cục trong cửa sổ Thuộc tính cho phép bạn tạo các mối kết nối.

Khi tạo quy tắc ràng buộc, trình chỉnh sửa sẽ cung cấp cho quy tắc đó một lề mặc định để phân tách hai thành phần hiển thị.

Khi tạo quy tắc ràng buộc, hãy nhớ các quy tắc sau:

• Mỗi thành phần hiển thị phải có ít nhất hai điều kiện ràng buộc: một điều kiện ràng buộc theo chiều ngang và một điều kiện ràng buộc theo chiều dọc.
• Bạn chỉ có thể tạo quy tắc ràng buộc giữa một tay điều khiển quy tắc ràng buộc và một điểm neo có cùng một mặt phẳng. Một mặt phẳng thẳng đứng (phía bên trái và bên phải) của một khung hiển thị chỉ có thể bị hạn chế với một mặt phẳng thẳng đứng khác và đường cơ sở chỉ có thể ràng buộc với các đường cơ sở khác.
• Mỗi tay điều khiển quy tắc ràng buộc chỉ có thể được dùng cho một quy tắc ràng buộc, nhưng bạn có thể tạo nhiều quy tắc ràng buộc từ nhiều thành phần hiển thị đến cùng một điểm neo.

Bạn có thể xoá một quy tắc ràng buộc bằng cách làm theo một trong những cách sau:

• Nhấp vào một quy tắc ràng buộc để chọn quy tắc đó, rồi nhấp vào Xoá.

• Nhấp chuột giữ phím Control (nhấp chuột giữ phím Command trên macOS) vào một điểm neo của quy tắc ràng buộc. Quy tắc ràng buộc chuyển sang màu đỏ để cho biết bạn có thể nhấp để xoá quy tắc đó, như minh hoạ trong hình 5.

  

  Hình 5. Quy tắc ràng buộc màu đỏ cho biết bạn có thể nhấp vào để xoá quy tắc đó.

• Trong mục Layout (Bố cục) của cửa sổ Attributes (Thuộc tính), hãy nhấp vào một điểm neo của quy tắc ràng buộc, như trong hình 6.

  

  Hình 6. Hãy nhấp vào một điểm neo của quy tắc ràng buộc để xoá điểm neo đó.

Nếu bạn thêm các điều kiện ràng buộc đối lập trên một thành phần hiển thị, các đường điều kiện ràng buộc sẽ cuộn lại như một lò xo để cho biết các lực đối lập, như trong video 2. Hiệu ứng này thể hiện rõ nhất khi kích thước thành phần hiển thị được đặt thành "cố định" hoặc "wrap nội dung". Trong trường hợp đó, thành phần hiển thị được căn giữa giữa các quy tắc ràng buộc. Thay vào đó, nếu bạn muốn khung hiển thị kéo dài kích thước để đáp ứng các quy tắc ràng buộc, hãy chuyển đổi kích thước để "khớp với các quy tắc ràng buộc". Nếu bạn muốn giữ nguyên kích thước hiện tại nhưng di chuyển thành phần hiển thị để không nằm ở giữa, hãy điều chỉnh độ lệch quy tắc ràng buộc.

Bạn có thể sử dụng các quy tắc ràng buộc để đạt được nhiều loại hành vi bố cục, như mô tả trong các phần sau.

Vị trí mẹ

Vị trí đơn đặt hàng

Căn chỉnh

Căn theo đường cơ sở

Giới hạn theo nguyên tắc

Ràng buộc với một rào cản

Điều chỉnh độ chệch của hạn chế

Khi bạn thêm một điều kiện ràng buộc vào cả hai bên của một thành phần hiển thị và kích thước thành phần hiển thị cho cùng một phương diện là "cố định" hoặc "gói nội dung", thì thành phần hiển thị sẽ nằm giữa hai điều kiện ràng buộc với độ lệch là 50% theo mặc định. Bạn có thể điều chỉnh độ chệch bằng cách kéo thanh trượt độ chệch trong cửa sổ Attributes (Thuộc tính) hoặc bằng cách kéo thành phần hiển thị, như trong video 3.

Nếu bạn muốn thành phần hiển thị kéo giãn kích thước để đáp ứng các quy tắc ràng buộc, hãy chuyển kích thước thành "khớp với các quy tắc ràng buộc".

Điều chỉnh kích thước chế độ xem

Bạn có thể sử dụng các ô điều khiển ở góc để đổi kích thước thành phần hiển thị, nhưng thao tác này sẽ mã hoá cứng kích thước – thành phần hiển thị không đổi kích thước cho nhiều nội dung hoặc kích thước màn hình. Để chọn một chế độ định cỡ khác, hãy nhấp vào một khung hiển thị rồi mở cửa sổ Attributes (Thuộc tính) ở bên phải của trình chỉnh sửa.

Gần đầu cửa sổ Attributes (Thuộc tính) là trình kiểm tra khung hiển thị, trong đó có các chế độ điều khiển cho một số thuộc tính bố cục, như trong hình 14. Tính năng này chỉ có sẵn cho các thành phần hiển thị trong bố cục ràng buộc.

Bạn có thể thay đổi cách tính chiều cao và chiều rộng bằng cách nhấp vào các biểu tượng được chỉ định bằng chú thích 3 trong hình 14. Những ký hiệu này biểu thị chế độ kích thước như sau. Nhấp vào biểu tượng để bật/tắt giữa các chế độ cài đặt sau:

• Đã cố định: chỉ định một kích thước cụ thể trong hộp văn bản sau hoặc bằng cách đổi kích thước thành phần hiển thị trong trình chỉnh sửa.
• Gói nội dung: thành phần hiển thị chỉ mở rộng khi cần thiết để vừa với nội dung.
• layout_ConstraintWidth

Đặt giá trị này thành true để cho phép kích thước theo chiều ngang thay đổi để tuân thủ các quy tắc ràng buộc. Theo mặc định, một tiện ích được đặt thành WRAP_CONTENT sẽ không bị giới hạn bởi các quy tắc ràng buộc.

• Match Constraints (So khớp các quy tắc ràng buộc): thành phần hiển thị mở rộng nhiều nhất có thể để đáp ứng các quy tắc ràng buộc ở mỗi bên, sau khi tính đến lề của thành phần hiển thị. Tuy nhiên, bạn có thể sửa đổi hành vi đó bằng các thuộc tính và giá trị sau. Các thuộc tính này chỉ có hiệu lực khi bạn đặt chiều rộng của thành phần hiển thị thành "khớp các điều kiện ràng buộc":
  • layout_constraintWidth_min

    Phương thức này sẽ lấy kích thước dp cho chiều rộng tối thiểu của thành phần hiển thị.

  • layout_constraintWidth_max

    Thao tác này sẽ lấy kích thước dp cho chiều rộng tối đa của thành phần hiển thị.

  Tuy nhiên, nếu phương diện đã cho chỉ có một quy tắc ràng buộc, thì khung hiển thị sẽ mở rộng để phù hợp với nội dung của khung hiển thị đó. Việc sử dụng chế độ này trên chiều cao hoặc chiều rộng cũng cho phép bạn đặt tỷ lệ kích thước.

Đặt kích thước dưới dạng tỷ lệ

Bạn có thể đặt kích thước thành một tỷ lệ, chẳng hạn như 16:9, nếu ít nhất một trong các kích thước chế độ xem được đặt thành "khớp với quy tắc ràng buộc" (0dp). Để bật tỷ lệ, hãy nhấp vào Bật/tắt quy tắc ràng buộc về tỷ lệ khung hình (chú thích 1 trong hình 14) rồi nhập tỷ lệ width:height vào trường nhập xuất hiện.

Nếu cả chiều rộng và chiều cao đều được đặt thành "khớp với các điều kiện ràng buộc", bạn có thể nhấp vào Bật/tắt điều kiện ràng buộc về tỷ lệ khung hình để chọn phương diện dựa trên tỷ lệ của phương diện còn lại. Trình kiểm tra khung hiển thị cho biết kích thước nào được đặt làm tỷ lệ bằng cách kết nối các cạnh tương ứng bằng một đường liền nét.

Ví dụ: nếu bạn đặt cả hai bên thành "khớp với các quy tắc ràng buộc", hãy nhấp đúp vào Bật/tắt quy tắc ràng buộc về tỷ lệ khung hình để đặt chiều rộng thành tỷ lệ của chiều cao. Toàn bộ kích thước được quyết định bởi chiều cao của thành phần hiển thị. Bạn có thể xác định giá trị này theo bất kỳ cách nào, như minh hoạ trong hình 15.

Điều chỉnh lề chế độ xem

Để các thành phần hiển thị có khoảng cách đều nhau, hãy nhấp vào biểu tượng Lề trên thanh công cụ để chọn lề mặc định cho mỗi thành phần hiển thị mà bạn thêm vào bố cục. Mọi thay đổi bạn thực hiện đối với lề mặc định chỉ áp dụng cho các thành phần hiển thị bạn thêm từ đó trở đi.

Bạn có thể kiểm soát lề cho mỗi thành phần hiển thị trong cửa sổ Attributes (Thuộc tính) bằng cách nhấp vào số trên dòng đại diện cho từng quy tắc ràng buộc. Trong hình 14, chú thích 4 cho thấy lề dưới được đặt thành 16 dp.

Hình 16. Nút Margin (Lề) trên thanh công cụ.

Tất cả lề mà công cụ cung cấp đều là các hệ số của 8 dp để giúp các thành phần hiển thị của bạn căn chỉnh với đề xuất lưới hình vuông 8 dp của Material Design.

Kiểm soát nhóm tuyến tính bằng một chuỗi

Chuỗi là một nhóm khung hiển thị liên kết với nhau bằng các điều kiện ràng buộc về vị trí hai chiều. Các khung hiển thị trong một chuỗi có thể được phân phối theo chiều dọc hoặc chiều ngang.

Bạn có thể tạo kiểu cho chuỗi theo một trong những cách sau:

1. Spread (Phân tán): các thành phần hiển thị được phân bổ đồng đều sau khi tính đến lề. Đây là tuỳ chọn mặc định.
2. Phân bố bên trong: thành phần hiển thị đầu tiên và cuối cùng được gắn vào các điều kiện ràng buộc ở mỗi đầu chuỗi và phần còn lại được phân bổ đồng đều.
3. Được tính trọng số: khi chuỗi được đặt thành phát tán hoặc phát tán bên trong, bạn có thể lấp đầy không gian còn lại bằng cách đặt một hoặc nhiều thành phần hiển thị thành "điều kiện ràng buộc khớp" (0dp). Theo mặc định, không gian được phân bổ đều giữa mỗi thành phần hiển thị được đặt thành "điều kiện ràng buộc khớp", nhưng bạn có thể chỉ định trọng số quan trọng cho mỗi thành phần hiển thị bằng cách sử dụng các thuộc tính layout_constraintHorizontal_weight và layout_constraintVertical_weight. Cách này hoạt động giống như layout_weight trong bố cục tuyến tính: thành phần hiển thị có giá trị trọng số cao nhất sẽ nhận được nhiều không gian nhất và các thành phần hiển thị có cùng trọng số sẽ nhận được cùng một không gian.
4. Đã đóng gói: các thành phần hiển thị được đóng gói với nhau sau khi tính đến lề. Bạn có thể điều chỉnh độ lệch của toàn bộ chuỗi (bên trái hoặc bên phải, lên hoặc xuống) bằng cách thay đổi độ lệch chế độ xem "đầu" của chuỗi.

Chế độ xem "đầu" của chuỗi – chế độ xem ngoài cùng bên trái trong một chuỗi ngang (theo bố cục từ trái sang phải) và chế độ xem trên cùng trong chuỗi dọc – xác định kiểu của chuỗi trong XML. Tuy nhiên, bạn có thể chuyển đổi giữa chế độ rải, rải bên trong và đóng gói bằng cách chọn bất kỳ thành phần hiển thị nào trong chuỗi và nhấp vào nút chuỗi xuất hiện bên dưới thành phần hiển thị đó.

Để tạo chuỗi, hãy làm như sau, như trong video 4:

1. Chọn tất cả thành phần hiển thị sẽ có trong chuỗi.
2. Nhấp chuột phải vào một trong các thành phần hiển thị.
3. Chọn Chuỗi.
4. Chọn Giữa theo chiều ngang hoặc Giữa theo chiều dọc.

Sau đây là một vài điều cần cân nhắc khi sử dụng chuỗi:

• Khung hiển thị có thể là một phần của cả chuỗi ngang và dọc, nhờ đó, bạn có thể tạo bố cục lưới linh hoạt.
• Chuỗi chỉ hoạt động đúng cách nếu mỗi đầu của chuỗi được ràng buộc với một đối tượng khác trên cùng một trục, như minh hoạ trong hình 14.
• Mặc dù hướng của chuỗi là dọc hoặc ngang, nhưng việc sử dụng một chuỗi sẽ không căn chỉnh các khung hiển thị theo hướng đó. Để đạt được vị trí thích hợp cho mỗi thành phần hiển thị trong chuỗi, hãy thêm các điều kiện ràng buộc khác, chẳng hạn như các điều kiện ràng buộc về căn chỉnh.

Tự động tạo quy tắc ràng buộc

Thay vì thêm các điều kiện ràng buộc vào mọi thành phần hiển thị khi bạn đặt các thành phần đó vào bố cục, bạn có thể di chuyển từng thành phần hiển thị vào vị trí bạn muốn trong Layout Editor (Trình chỉnh sửa bố cục) rồi nhấp vào biểu tượng Infer Constraints (Suy luận các điều kiện ràng buộc) để tự động tạo các điều kiện ràng buộc.

Giới hạn suy luận quét bố cục để xác định tập hợp giới hạn hiệu quả nhất cho tất cả khung hiển thị. Phương thức này ràng buộc các thành phần hiển thị ở vị trí hiện tại đồng thời mang lại sự linh hoạt. Bạn có thể cần điều chỉnh để bố cục phản hồi như mong muốn cho nhiều kích thước và hướng màn hình.

Tự động kết nối với mẹ là một tính năng riêng biệt mà bạn có thể bật. Khi bạn bật tính năng này và thêm thành phần hiển thị con vào thành phần hiển thị mẹ, tính năng này sẽ tự động tạo ra hai hoặc nhiều quy tắc ràng buộc cho mỗi thành phần hiển thị khi bạn thêm các thành phần hiển thị đó vào bố cục, nhưng chỉ khi thích hợp để ràng buộc thành phần hiển thị với bố cục mẹ. Tính năng tự động kết nối không tạo quy tắc ràng buộc cho các thành phần hiển thị khác trong bố cục.

Tính năng Tự động kết nối bị tắt theo mặc định. Bật tính năng này bằng cách nhấp vào Enable Autoconnection to Parent (Bật tính năng Tự động kết nối với mẹ) trên thanh công cụ Layout Editor.

Ảnh động khung hình chính

Trong ConstraintLayout, bạn có thể tạo ảnh động cho các thay đổi về kích thước và vị trí của các phần tử bằng cách sử dụng ConstraintSet và TransitionManager.

ConstraintSet là một đối tượng nhẹ đại diện cho các điều kiện ràng buộc, lề và khoảng đệm của tất cả phần tử con trong ConstraintLayout. Khi bạn áp dụng ConstraintSet cho một ConstraintLayout hiển thị, bố cục sẽ cập nhật các điều kiện ràng buộc của tất cả phần tử con.

Để tạo ảnh động bằng ConstraintSet, hãy chỉ định hai tệp bố cục đóng vai trò là khung hình bắt đầu và kết thúc cho ảnh động. Sau đó, bạn có thể tải ConstraintSet từ tệp khung hình chính thứ hai và áp dụng tệp đó cho ConstraintLayout hiển thị.

Mã ví dụ sau đây cho thấy cách tạo ảnh động di chuyển một nút duy nhất xuống cuối màn hình.

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

Tài nguyên khác

ConstraintLayout được dùng trong ứng dụng minh hoạ Sunflower.