Trang này được dịch bởi Cloud Translation API.

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.

ConstraintLayout cho phép bạn tạo các bố cục lớn, phức tạp với hệ phân cấp khung hiển thị phẳng – không có nhóm khung hiển thị lồng nhau. Tương tự như RelativeLayout, tất cả thành phần hiển thị đều được bố trí theo mối quan hệ giữa các thành phần hiển thị đồng cấp và bố cục mẹ, nhưng linh hoạt hơn RelativeLayout và dễ sử dụng hơn với Layout Editor của Android Studio.

Mọi sức mạnh của ConstraintLayout đều có sẵn trực tiếp từ các công cụ trực quan của Layout Editor, vì API bố cục và Layout Editor được xây dựng đặc biệt cho nhau. Bạn có thể tạo hoàn toàn bố cục bằng ConstraintLayout bằng cách kéo thay vì chỉnh sửa XML.

Trang này cho biết cách tạo bố cục bằng ConstraintLayout trong Android Studio 3.0 trở lên. Để biết thêm thông tin về Layout Editor (Trình chỉnh sửa bố cục), hãy xem bài viết Tạo giao diện người dùng bằng Layout Editor.

Để xem nhiều bố cục mà bạn có thể tạo bằng ConstraintLayout, hãy xem dự án Ví dụ về bố cục ràng buộc trên GitHub.

Tổng quan về các quy tắc ràng buộc

Để xác định vị trí của một thành phần hiển thị trong ConstraintLayout, bạn cần thêm ít nhất một quy tắc ràng buộc đối với chiều ngang và một quy tắc ràng buộc đối với chiều dọc cho thành phần hiển thị đó. Mỗi quy tắc ràng buộc đại diện cho một kết nối hoặc căn chỉnh với một thành phần hiển thị khác, bố cục mẹ hoặc một nguyên tắc vô hình. Mỗi quy tắc ràng buộc xác định vị trí của thành phần hiển thị dọc theo trục dọc hoặc trục ngang. Mỗi thành phần hiển thị phải có tối thiểu một quy tắc ràng buộc cho mỗi trục, nhưng thường thì bạn cần có quy tắc ràng buộc lớn hơn.

Khi bạn thả một khung hiển thị vào Layout Editor, khung hiển thị đó sẽ vẫn ở vị trí bạn rời khỏi đó ngay cả khi không có quy tắc ràng buộc nào. Thao tác này chỉ nhằm giúp bạn biên tập video dễ dàng hơn. Nếu khung hiển thị không có hạn chế nào khi bạn chạy bố cục trên thiết bị, thì khung hiển thị đó sẽ được vẽ ở vị trí [0,0] (góc trên cùng bên trái).

Ở hình 1, bố cục trông có vẻ đẹp trong trình chỉnh sửa, nhưng không có hạn chế theo chiều dọc đối với khung hiển thị C. Khi bố cục này vẽ trên một thiết bị, khung hiển thị C sẽ được căn chỉnh theo chiều ngang với các cạnh bên trái và bên phải của khung hiển thị A, nhưng xuất hiện ở đầu màn hình vì không có quy tắc ràng buộc theo chiều dọc.

Hình 1. Trình chỉnh sửa sẽ hiển thị khung hiển thị C bên dưới A, nhưng không có quy tắc ràng buộc theo chiều dọc.

Hình 2. Khung hiển thị C hiện bị ràng buộc theo chiều dọc bên dưới khung hiển thị A.

Mặc dù quy tắc ràng buộc bị thiếu không gây ra lỗi biên dịch, nhưng Layout Editor cho biết các quy tắc ràng buộc bị thiếu là một lỗi trên thanh công cụ. Để xem lỗi và các 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 bị thiếu các quy tắc ràng buộc, Layout Editor 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à dự đoán các quy tắc ràng buộc.

Thêm ConstraintLayout vào dự án của bạn

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

Đả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()
      }
    }

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 xuất hiện trong ví dụ này.

Groovy

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

Kotlin

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

Trong thanh công cụ hoặc thông báo đồng bộ hoá, hãy nhấp vào Sync Project with Gradle Files (Đồ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

Hình 3. Trình đơn để chuyển đổi một bố cục thành ConstraintLayout.

Để 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:

Mở bố cục trong Android Studio và nhấp vào thẻ Design (Thiết kế) ở cuối cửa sổ trình chỉnh sửa.
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:

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).
Nhập tên cho tệp bố cục rồi nhập "androidx.Constrainttlayout.Widget.ConstraintLayout" cho Thẻ gốc.
Nhấp vào Hoàn tất.

Thêm hoặc xoá một điều kiện ràng buộc

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

Video 1. Phần bên trái của khung hiển thị bị ràng buộc ở phần bên trái của thành phần mẹ.

Kéo một khung 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 ràng buộc hình tròn ở mỗi bên.
Nhấp vào chế độ xem để chọn.
Thực hiện một trong các thao tác sau:
- Nhấp vào một ô điều khiển ràng buộc rồi kéo ô này đế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 đường căn. 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 mục 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 Layout (Bố cục) của cửa sổ Attributes (Thuộc tính) cho phép bạn tạo các kết nối.

Khi quy tắc ràng buộc được tạo, trình chỉnh sửa sẽ cung cấp cho nó 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 khung hiển thị phải có ít nhất 2 quy tắc ràng buộc: một quy tắc ràng buộc theo chiều ngang và một quy tắc ràng buộc theo chiều dọc.
Bạn chỉ có thể tạo các quy tắc ràng buộc giữa một ô điều khiển quy tắc ràng buộc và một điểm neo có chung 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.
Bạn chỉ có thể sử dụng mỗi ô điều khiển quy tắc ràng buộc 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 khung 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 thực hiện một trong những thao tác sau đây:

Nhấp vào một quy tắc ràng buộc để chọn quy tắc đó, sau đó nhấp vào Xoá.
Control và nhấp (giữ phím Command và nhấp trên macOS) 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 rằng bạn có thể nhấp để xoá quy tắc này, như trong hình 5.

Hình 5. Một 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 đó.

Video 2. Thêm một quy tắc ràng buộc đối lập với quy tắc hiện có.

Nếu bạn thêm các điều kiện ràng buộc đối lập trên một khung hiển thị, thì các đường ràng buộc sẽ được cuộn như một lò xo để biểu thị các lực đối lập, như minh hoạ 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ữ kích thước hiện tại nhưng di chuyển khung hiển thị để khung hiển thị đó không được căn giữa, hãy điều chỉnh độ chệch của 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 của bố cục, như mô tả trong những phần sau.

Vị trí mẹ

Cố định một cạnh của khung hiển thị với cạnh tương ứng của bố cục.

Trong hình 7, phần bên trái của chế độ xem được kết nối với cạnh trái của bố cục mẹ. Bạn có thể xác định khoảng cách từ cạnh bằng lề.

Hình 7. Một điều kiện ràng buộc theo chiều ngang đối với thành phần mẹ.

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

Xác định thứ tự xuất hiện của 2 khung hiển thị, theo chiều dọc hoặc chiều ngang.

Trong hình 8, B bị ràng buộc phải luôn ở bên phải A, còn C bị ràng buộc bên dưới A. Tuy nhiên, những điều kiện ràng buộc này không ngụ ý việc căn chỉnh nên B vẫn có thể di chuyển lên và xuống.

Hình 8. Quy tắc ràng buộc đối với chiều ngang và chiều dọc.

Căn chỉnh

Căn chỉnh cạnh của một thành phần hiển thị theo cùng một cạnh của một thành phần hiển thị khác.

Trong hình 9, phần bên trái của B được căn chỉnh với phần bên trái của A. Nếu bạn muốn căn giữa các tâm khung hiển thị, hãy tạo một điều kiện ràng buộc ở cả hai bên.

Bạn có thể bù trừ căn chỉnh bằng cách kéo khung hiển thị vào trong từ điều kiện ràng buộc. Ví dụ: Hình 10 cho thấy B với căn chỉnh bù là 24 dp. Độ lệch được xác định bởi lề của khung hiển thị bị ràng buộc.

Bạn cũng có thể chọn tất cả khung hiển thị muốn căn chỉnh, sau đó nhấp vào biểu tượng Căn chỉnh trên thanh công cụ để chọn kiểu căn chỉnh.

Hình 9. Quy tắc ràng buộc căn chỉnh theo chiều ngang.

Hình 10. Một điều kiện ràng buộc căn chỉnh theo chiều ngang có độ lệch.

Căn chỉnh đường cơ sở

Căn chỉnh đường cơ sở văn bản của một khung hiển thị với đường cơ sở văn bản của một khung hiển thị khác.

Trong hình 11, dòng đầu tiên của B được căn chỉnh với văn bản trong A.

Để tạo một quy tắc ràng buộc cơ sở, hãy nhấp chuột phải vào thành phần hiển thị văn bản mà bạn muốn ràng buộc rồi nhấp vào Show Baseline (Hiện đường cơ sở). Sau đó, hãy nhấp vào đường cơ sở của văn bản rồi kéo đường cơ sở đó đến một đường cơ sở khác.

Hình 11. Giới hạn căn chỉnh đường cơ sở.

Cố định với một nguyên tắc

Bạn có thể thêm một nguyên tắc theo chiều dọc hoặc chiều ngang để ràng buộc các chế độ xem và người dùng ứng dụng của bạn không nhìn thấy. Bạn có thể định vị nguyên tắc này trong bố cục dựa trên đơn vị dp hoặc tỷ lệ phần trăm tương ứng với cạnh của bố cục.

Để tạo đường căn, hãy nhấp vào biểu tượng Nguyên tắc trong thanh công cụ, sau đó nhấp vào Thêm đường căn dọc hoặc Thêm đường kẻ ngang.

Kéo đường chấm để đặt lại vị trí và nhấp vào vòng tròn ở cạnh của hướng dẫn để bật/tắt chế độ đo lường.

Hình 12. Một khung hiển thị bị ràng buộc theo một nguyên tắc.

Cố định vào hàng rào

Tương tự như nguyên tắc, rào cản là một đường vô hình mà bạn có thể ràng buộc khung hiển thị, ngoại trừ rào cản không xác định vị trí riêng của rào cản đó. Thay vào đó, vị trí rào cản sẽ di chuyển dựa trên vị trí của các khung hiển thị có trong đó. Điều này rất hữu ích khi bạn muốn ràng buộc một khung hiển thị với một tập hợp khung hiển thị thay vì một khung hiển thị cụ thể.

Ví dụ: trong hình 13, khung hiển thị C bị hạn chế ở phía bên phải của rào cản. Hàng rào được đặt thành "cuối" (hoặc phía bên phải, trong bố cục từ trái sang phải) của cả chế độ xem A và chế độ xem B. Hàng rào sẽ di chuyển tuỳ thuộc vào việc cạnh bên phải của khung hiển thị A hay của khung hiển thị B nằm ở ngoài cùng bên phải.

Để tạo rào cản, hãy làm theo các bước sau:

Nhấp vào biểu tượng Guidelines (Nguyên tắc) trong thanh công cụ, sau đó nhấp vào Add Verticaler (Thêm rào cản dọc) hoặc Add Horizontaler (Thêm rào cản ngang).
Trong cửa sổ Component Tree (Cây thành phần), hãy chọn những khung hiển thị mà bạn muốn bên trong rào cản rồi kéo vào thành phần rào cản.
Chọn rào cản từ Component Tree (Cây thành phần), mở cửa sổ Attributes (Thuộc tính) rồi đặt barrierDirection.

Bây giờ, bạn có thể tạo một điều kiện ràng buộc từ một khung hiển thị khác tới rào cản.

Bạn cũng có thể ràng buộc các khung hiển thị bên trong hàng rào với rào cản. Bằng cách này, bạn có thể căn chỉnh tất cả khung hiển thị trong rào cản với nhau, ngay cả khi bạn không biết khung hiển thị nào dài nhất hay cao nhất.

Bạn cũng có thể đưa nguyên tắc vào bên trong một rào cản để đảm bảo vị trí "tối thiểu" cho rào cản.

Hình 13. Khung hiển thị C bị ràng buộc với một rào cản. Hàng rào này sẽ di chuyển dựa trên vị trí và kích thước của cả khung hiển thị A và khung hiển thị B.

Đ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 phía của một khung hiển thị và kích thước khung hiển thị cho cùng một kích thước là "cố định" hoặc "bao bọc nội dung", thì khung hiển thị đó sẽ được căn giữa giữa 2 đ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 kéo khung hiển thị, như minh hoạ trong video 3.

Thay vào đó, nếu bạn muốn thành phần 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".

Video 3. Điều chỉnh độ chệch hạn chế.

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

Hình 14. Khi chọn một khung hiển thị, cửa sổ Attributes (Thuộc tính) sẽ chứa các chế độ điều khiển cho tỷ lệ kích thước 1, 2 xoá các điều kiện ràng buộc, 3 chế độ chiều cao hoặc chiều rộng, 4 lề và độ chệch hạn chế 5. Bạn cũng có thể làm nổi bật từng quy tắc ràng buộc trong Layout Editor bằng cách nhấp vào các quy tắc đó trong danh sách quy tắc ràng buộc 6.

Bạn có thể sử dụng ô điều khiển góc để đổi kích thước một khung hiển thị, nhưng thao tác này cố định kích thước — khung hiển thị không đổi kích thước đối với các kích thước màn hình hoặc nội dung khác nhau. Để 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ỉ dùng được cho các khung hiển thị trong một 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 biểu thị 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 để chuyển đổi 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 đây 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.
Xuống dòng tự động: khung hiển thị chỉ mở rộng khi cần thiết để vừa với nội dung.

layout_ConstraintWidth

Hãy đặt giá trị này thành true để cho phép thay đổi kích thước theo chiều ngang nhằm tuân theo 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.

So khớp các điều kiện ràng buộc: khung hiển thị sẽ 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 khung 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_ConstrainttWidth_min
  Kích thước này sẽ lấy kích thước dp cho chiều rộng tối thiểu của chế độ xem.
- layout_ConstrainttWidth_max
  Thao tác này sẽ lấy kích thước dp cho chiều rộng tối đa của chế độ xem.
Tuy nhiên, nếu kích thước nhất định chỉ có một quy tắc ràng buộc, thì thành phần hiển thị sẽ mở rộng để vừa với nội dung. 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.

Lưu ý: Bạn không thể sử dụng match_parent cho bất kỳ chế độ xem nào trong ConstraintLayout. Thay vào đó, hãy sử dụng quy tắc "khớp các điều kiện ràng buộc" (0dp).

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

Hình 15. Khung hiển thị được đặt thành khung hình 16:9 với chiều rộng dựa trên tỷ lệ chiều cao.

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

Nếu đặt cả chiều rộng và chiều cao thành "phù hợp với giới hạn", thì bạn có thể nhấp vào Bật/tắt giới hạn tỷ lệ khung hình để chọn kích thước dựa trên tỷ lệ của kích thước 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 "phù hợp với các điều kiện ràng buộc", hãy nhấp vào Bật/tắt giới hạn tỷ lệ khung hình hai lần để đặt chiều rộng thành tỷ lệ 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ề của chế độ xem

Để giãn cách các thành phần hiển thị đề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ị mà bạn thêm từ thời điểm đó 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ùng đượ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ụ này cung cấp đều là các hệ số 8 dp để giúp khung hiển thị phù hợp với đề xuất lưới vuông 8 dp của Material Design.

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

Hình 17. Một chuỗi ngang có 2 khung hiển thị.

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 thành phần 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.

Hình 18. Ví dụ về mỗi kiểu chuỗi.

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

Trải rộng: các chế độ xem được phân bổ đồng đều sau khi tính đến lề. Đây là tuỳ chọn mặc định.
Trải rộng bên trong: khung hiển thị đầu tiên và cuối cùng được gắn với các quy tắc ràng buộc ở mỗi đầu của chuỗi và các khung hiển thị còn lại sẽ được phân phối đồng đều.
Có trọng số: khi chuỗi được thiết lập thành spread hoặc spread 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 khung hiển thị thành "khớp các điều kiện ràng buộc" (0dp). Theo mặc định, không gian sẽ được phân bổ đồng đều giữa mỗi khung hiển thị được đặt thành "khớp các điều kiện ràng buộc", nhưng bạn có thể chỉ định trọng số quan trọng cho từng khung hiển thị bằng thuộc tính layout_constraintHorizontal_weight và layout_constraintVertical_weight. Việc 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, còn thành phần hiển thị có cùng trọng số sẽ có cùng không gian.
Đóng gói: các thành phần hiển thị được tập hợp lại với nhau sau khi tính đến lề. Bạn có thể điều chỉnh độ chệch của toàn bộ chuỗi (trái hoặc phải, lên hoặc xuống) bằng cách thay đổi độ chệch khung hiển thị "đầ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 các spread, spread bên trong và packed bằng cách chọn bất kỳ khung hiển thị nào trong chuỗi rồi nhấp vào nút chuỗi xuất hiện bên dưới khung hiển thị đó.

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

Chọn tất cả các chế độ xem để đưa vào chuỗi.
Nhấp chuột phải vào một trong các chế độ xem.
Chọn Chuỗi.
Chọn Giữa theo chiều ngang hoặc Giữa theo chiều dọc.

Video 4. Tạo một chuỗi ngang.

Dưới đâ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.
Một chuỗi chỉ hoạt động đúng cách nếu mỗi đầu của chuỗi bị 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 quy tắc ràng buộc khác, chẳng hạn như giới hạn về căn chỉnh.

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

Thay vì thêm các quy tắc ràng buộc vào mọi thành phần hiển thị khi đặt chúng trong bố cục, bạn có thể di chuyển từng thành phần hiển thị vào các vị trí bạn muốn trong Layout Editor, sau đó nhấp vào Infer Constraints (Dự đoán giới hạn) để tự động tạo các quy tắc 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ị. Định dạng này ràng buộc các thành phần hiển thị theo vị trí hiện tại trong khi vẫn đảm bảo tính linh hoạt. Bạn có thể cần điều chỉnh để bố cục phản hồi như bạn 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 cha mẹ là một tính năng riêng biệt mà bạn có thể bật. Khi được bật và bạn 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 2 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 quy tắc ràng buộc đó 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 ra các quy tắc ràng buộc đối với các thành phần hiển thị khác trong bố cục.

Theo mặc định, tính năng tự động kết nối bị tắt. Hãy bật chế độ này bằng cách nhấp vào Enable Auto connections 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 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 mọi phần tử con trong ConstraintLayout. Khi bạn áp dụng ConstraintSet cho ConstraintLayout được hiển thị, bố cục sẽ cập nhật các quy tắc ràng buộc của tất cả phần tử con.

Để tạo ảnh động bằng ConstraintSet, hãy chỉ định 2 tệp bố cục đóng vai trò là khung hình chí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 khung hình đó cho ConstraintLayout được hiển thị.

Lưu ý: Ảnh động ConstraintSet chỉ tạo ảnh động cho kích thước và vị trí của các phần tử con. Chúng không tạo ảnh động cho các thuộc tính khác, chẳng hạn như màu sắc.

Ví dụ về mã sau đây cho thấy cách tạo ảnh động khi di chuyển một nú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>

Lưu ý: Với Android Studio 3.6 trở lên, tính năng liên kết thành phần hiển thị có thể thay thế các lệnh gọi findViewById(). Cấu hình này cũng đảm bảo an toàn về kiểu trong thời gian biên dịch cho mã tương tác với thành phần hiển thị. Hãy cân nhắc sử dụng tính năng liên kết thành phần hiển thị thay vì findViewById().

Tài nguyên khác

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