Xây dựng giao diện người dùng thích ứng bằng ConstraintLayout   Thuộc Android Jetpack.

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

Hình 2. Giờ đây, khung hiển thị C bị hạn chế theo chiều dọc bên dưới khung hiển thị A.

Mặc dù một ràng buộc bị thiếu không gây ra lỗi biên dịch, nhưng Layout Editor sẽ cho biết các 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 Hiện cảnh báo và lỗi . Để giúp bạn tránh bỏ lỡ 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à suy luận quy tắc ràng buộc.

Thêm ConstraintLayout vào dự án

Để sử dụng ConstraintLayout trong dự án của bạ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 này 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.1"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.1"
   }

   Kotlin

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

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.

Giờ đây, 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 bố cục dựa trên ràng buộc, hãy làm theo các bước sau:

1. Mở bố cục của bạn trong Android Studio rồi nhấp vào thẻ 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 > Bố cục XML).
2. Nhập tên cho tệp bố cục và nhập "androidx.constraintlayout.widget.ConstraintLayout" cho Root Tag (Thẻ gốc).
3. Nhấp vào Hoàn tất.

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

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

1. 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 một khung hiển thị vào ConstraintLayout, khung hiển thị đó sẽ xuất hiện trong một hộp giới hạn có các ô điều khiển đổ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.

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 điểm điều khiển ràng buộc rồi kéo điểm đ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 khung hiển thị khác, cạnh của bố cục hoặc một đường dẫn hướng. Lưu ý rằng khi bạn kéo tay cầm của quy tắc ràng buộc, Layout Editor sẽ cho thấy các điểm 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. Mục Layout (Bố cục) của cửa sổ Attributes (Thuộc tính) cho phép bạn tạo các mối kết nối.

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

Khi tạo các điều kiện 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 đ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 các ràng buộc giữa một tay cầm ràng buộc và một điểm neo dùng chung mặt phẳng. Bạn chỉ có thể ràng buộc mặt phẳng thẳng đứng (các cạnh trái và phải) của một khung hiển thị với một mặt phẳng thẳng đứng khác, đồng thời chỉ có thể ràng buộc đường cơ sở với các đường cơ sở khác.
• Bạn chỉ có thể dùng mỗi ô điều khiển ràng buộc cho một ràng buộc, nhưng bạn có thể tạo nhiều ràng buộc từ các khung hiển thị khác nhau đến cùng một điểm liên kết.

Bạn có thể xoá một ràng buộc bằng cách thực hiện một trong những thao tác sau:

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

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

  

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

• Trong phần 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 ràng buộc, như minh hoạ trong hình 6.

  

  Hình 6. Nhấp vào một điểm neo ràng buộc để xoá điểm neo đó.

Nếu bạn thêm các ràng buộc đối lập vào một khung hiển thị, các đường ràng buộc sẽ cuộn lại 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 rõ ràng nhất khi kích thước khung hiển thị được đặt thành "cố định" hoặc "nội dung bao bọc". Trong trường hợp này, khung hiển thị sẽ được căn giữa giữa các ràng buộc. 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 điều kiện ràng buộc, hãy chuyển đổi kích thước thành "giới hạn so khớp". Nếu bạn muốn giữ nguyên kích thước hiện tại nhưng di chuyển khung hiển thị để khung hiển thị không nằm ở giữa, hãy điều chỉnh độ lệch ràng buộc.

Bạn có thể sử dụng cá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í của phần tử mẹ

Ràng buộc 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ía bên trái của khung hiển thị đượ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í đặ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ị buộc phải luôn ở bên phải A, còn C bị buộc phải ở bên dưới A. Tuy nhiên, các ràng buộc này không ngụ ý việc căn chỉnh, vì vậy B vẫn có thể di chuyển lên và xuống.

Hình 8. Một điều kiện ràng buộc theo chiều ngang và chiều dọc.

Căn chỉnh

Căn chỉnh cạnh của một khung hiển thị với cùng cạnh của một khung hiển thị khác.

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

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

Bạn cũng có thể chọn tất cả các khung hiển thị mà bạn muốn căn chỉnh, rồi nhấp vào Căn chỉnh trong thanh công cụ để chọn loại căn chỉnh.

Hình 9. Một điều kiện 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 ngang có độ lệch.

Căn theo đườ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 khung 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 đó, nhấp vào đường cơ sở văn bản và kéo đường này đến một đường cơ sở khác.

Hình 11. Một quy tắc ràng buộc căn chỉnh đường cơ sở.

Giới hạn theo đường kẻ chỉ dẫn

Bạn có thể thêm một đường hướng dẫn dọc hoặc ngang để hạn chế các khung hiển thị và người dùng ứng dụng sẽ không nhìn thấy đường này. Bạn có thể đặt đường căn trong bố cục dựa trên đơn vị dp hoặc tỷ lệ phần trăm so với cạnh của bố cục.

Để tạo đường dẫn hướng, hãy nhấp vào Đường dẫn hướng trong thanh công cụ, sau đó nhấp vào Thêm đường dẫn hướng dọc hoặc Thêm đường dẫn hướng ngang.

Kéo đường chấm nét để định vị lại đường này, rồi nhấp vào vòng tròn ở cạnh của đường dẫn hướng để chuyển đổi chế độ đo lường.

Hình 12. Một khung hiển thị bị ràng buộc với đường căn.

Giới hạn trong một rào cản

Tương tự như đường dẫn, rào cản là một đường thẳng vô hình mà bạn có thể hạn chế các khung hiển thị, ngoại trừ việc rào cản không xác định vị trí của chính 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 hữu ích khi bạn muốn ràng buộc một khung hiển thị với một nhóm 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ị ràng buộc với phía bên phải của một rào cản. Rào cản được đặt ở "cuối" (hoặc bên phải, trong bố cục từ trái sang phải) của cả khung hiển thị A và khung hiển thị B. Rào cản di chuyển tuỳ thuộc vào việc phía bên phải của khung hiển thị A hay khung hiển thị B nằm ở phía xa nhất bên phải.

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

1. Nhấp vào Nguyên tắc trên thanh công cụ, rồi nhấp vào Thêm rào cản dọc hoặc Thêm rào cản ngang.
2. 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 đặt bên trong rào cản rồi kéo chúng vào thành phần rào cản.
3. Chọn rào cản trong Component Tree (Cây thành phần), mở cửa sổ Attributes (Thuộc tính) , rồi đặt barrierDirection.

Giờ đây, 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 đến rào cản.

Bạn cũng có thể hạn chế các khung hiển thị bên trong rào cản đối với rào cản. Bằng cách này, bạn có thể căn chỉnh tất cả cá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 hoặc cao nhất.

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

Hình 13. Khung hiển thị C bị ràng buộc với một rào cản, rào cản này 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 bên của một khung hiển thị và kích thước khung hiển thị cho cùng một phương diện là "cố định" hoặc "nội dung bao bọc", khung hiển thị sẽ được căn giữa giữa hai điều kiện ràng buộc với độ lệch mặc định là 50%. 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ổ Thuộc tính hoặc bằng cách kéo khung hiển thị, như minh hoạ trong video 3.

Nếu bạn muốn khung hiển thị kéo dài kích thước để đáp ứng các ràng buộc, hãy chuyển kích thước thành "match constraints" (khớp các ràng buộc).

Đ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ẽ có các chế độ kiểm soát cho 1 tỷ lệ kích thước, 2 xoá các quy tắc ràng buộc, 3 chế độ chiều cao hoặc chiều rộng, 4 lề và 5 độ lệch quy tắc ràng buộc. Bạn cũng có thể làm nổi bật từng quy tắc ràng buộc trong Layout Editor (Trình chỉnh sửa bố cục) bằng cách nhấp vào quy tắc đó trong danh sách quy tắc ràng buộc 6.

Bạn có thể dùng các ô điều khiển ở góc để đổi kích thước khung hiển thị, nhưng thao tác này sẽ mã hoá cứng kích thước – khung hiển thị không đổi kích thước cho nội dung hoặc kích thước màn hình khác nhau. Để chọn một chế độ đổi kích thướ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 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ị, bao gồm các chế độ điều khiển cho một số thuộc tính bố cục, như minh hoạ trong hình 14. Chế độ này chỉ dùng được cho các khung 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ỉ ra bằng chú thích 3 trong hình 14. Các biểu tượng 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 hoặc bằng cách đổi kích thước khung hiển thị trong trình chỉnh sửa.
• Wrap Content: khung hiển thị chỉ mở rộng khi cần thiết để phù hợp với nội dung của khung hiển thị.
• layout_constrainedWidth

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

• Match Constraints (Điều kiện ràng buộc trùng khớp): khung hiển thị mở rộng nhiều nhất có thể để đáp ứng các điều kiện 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 khung hiển thị thành "match constraints" (khớp các ràng buộc):
  • layout_constraintWidth_min

    Thao tác này sẽ lấy một phương diện dp cho chiều rộng tối thiểu của khung hiển thị.

  • layout_constraintWidth_max

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

  Tuy nhiên, nếu kích thước đã cho chỉ có một giới hạn, thì khung hiển thị sẽ mở rộng để phù hợp với nội dung của nó. Việc sử dụng chế độ này cho 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ạng tỷ lệ

Hình 15. Khung hiển thị được đặt thành tỷ lệ 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 khung hiển thị thành một tỷ lệ, chẳng hạn như 16:9, nếu ít nhất một trong các phương diện khung hiển thị được đặt thành "match constraints" (khớp các quy tắc ràng buộc) (0dp). Để bật tỷ lệ này, hãy nhấp vào Toggle Aspect Ratio Constraint (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 đầu vào 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 Toggle Aspect Ratio Constraint (Bật/tắt điều kiện ràng buộc về 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 "match constraints" (khớp các ràng buộc), hãy nhấp vào Toggle Aspect Ratio Constraint (Bật/tắt ràng buộc tỷ lệ khung hình) hai lần để đặt chiều rộng thành một tỷ lệ của chiều cao. Toàn bộ kích thước được xác định bằng chiều cao của khung hiển thị. Bạn có thể xác định chiều cao theo bất kỳ cách nào, như minh hoạ trong hình 15.

Điều chỉnh lề của khung hiển thị

Để các khung hiển thị có khoảng cách đều nhau, hãy nhấp vào Lề trong thanh công cụ để chọn lề mặc định cho mỗi khung 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 sẽ chỉ áp dụng cho những khung 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 từng thành phần hiển thị trong cửa sổ Thuộc tính bằng cách nhấp vào số trên dòng đại diện cho từng 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 Lề của thanh công cụ.

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

Điều khiển các 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ị được liên kết với nhau bằng các hạn chế về vị trí theo 2 hướng. 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.

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

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

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

Thành phần hiển thị "đầu" của chuỗi – thành phần hiển thị ở ngoài cùng bên trái trong một chuỗi ngang (trong bố cục từ trái sang phải) và thành phần hiển thị ở trên cùng trong một 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 spread (trải rộng), spread inside (trải rộng bên trong) và packed (đóng gói) bằng cách chọn một khung hiển thị bất kỳ trong chuỗi và nhấp vào nút chuỗi xuất hiện bên dưới khung hiển thị.

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

1. Chọn tất cả các khung hiển thị sẽ được đưa vào chuỗi.
2. Nhấp chuột phải vào một trong các khung hiển thị.
3. Chọn Chuỗi.
4. Chọn Căn giữa theo chiều ngang hoặc Căn giữa theo chiều dọc.

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

• Một khung hiển thị có thể là một phần của cả chuỗi ngang và chuỗi dọc, vì vậy, 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 một chuỗi là dọc hoặc ngang, nhưng việc sử dụng một hướng 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ư điều kiện ràng buộc căn chỉnh.

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

Thay vì thêm các điều kiện ràng buộc vào mọi khung hiển thị khi bạn đặt chúng vào bố cục, bạn có thể di chuyển từng khung hiển thị vào vị trí bạn muốn trong Layout Editor rồi nhấp vào 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.

Infer Constraints (Suy luận các điều kiện ràng buộc) quét bố cục để xác định tập hợp điều kiện ràng buộc hiệu quả nhất cho tất cả các khung hiển thị. Thao tác này sẽ giới hạn các khung hiển thị ở 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 theo ý muốn đối với các kích thước màn hình và hướng khác nhau.

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 được bật và bạn thêm thành phần hiển thị con vào một thành phần hiển thị gốc, tính năng này sẽ tự động tạo hai hoặc nhiều điều kiện 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 gốc. 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 khung 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ụ của Layout Editor.

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

Trong ConstraintLayout, bạn có thể tạo hiệu ứng chuyển độ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 đơn giản, đại diện cho các ràng buộc, lề và khoảng đệm của tất cả các phần tử con trong một ConstraintLayout. Khi bạn áp dụng một ConstraintSet cho ConstraintLayout được hiển thị, bố cục sẽ cập nhật các ràng buộc của tất cả các thành phần con.

Để tạo một ả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 một ConstraintSet từ tệp khung hình khoá thứ hai và áp dụng tệp đó cho ConstraintLayout được hiển thị.

Ví dụ về mã sau đây cho thấy cách tạo hiệu ứng chuyển động cho 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.