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.

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

Hình 2. Khung hiển thị C hiện bị ràng buộc theo chiều dọc chế độ xem bên dưới 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 Trình chỉnh sửa cho biết các điều kiện ràng buộc bị thiếu dưới dạng 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 Hiển thị cảnh báo và lỗi . Để giúp bạn tránh thiếu các điều kiện ràng buộc, Layout Editor sẽ tự động thêm các hạn chế đối với bạn với Tự động kết nối và dự đoán các điều kiện ràng buộc các tính năng AI mới.

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:

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 ở cấp mô-đun build.gradle, như trong ví dụ sau. Mới nhất phiên bản có thể khác với thông tin được trình bày trong ví dụ.

   Groovy

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

   Kotlin

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

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 Gradle Tệp.

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

1. Mở bố cục trong Android Studio rồi nhấp vào thẻ Design (Thiết kế) trên 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 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 Tệp > Mới > XML > XML bố cục.
2. Nhập tên cho tệp bố cục và nhập "androidx.Constrainttlayout.Widget.ConstraintLayout" cho thư mục Root Thẻ.
3. 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:

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ó ô điều khiển thay đổi kích thước hình vuông ở mỗi góc và hình tròn các quy tắc ràng buộc ở mỗi bên.

2. Nhấp vào chế độ xem để chọn.
3. 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 . Lưu ý rằng khi bạn kéo ô điều khiển ràng buộc, Layout Trình chỉnh sửa 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 Tạo mối kết nối các nút 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. Bố cục của cửa sổ Attributes (Thuộc tính) giúp bạn tạo kết nối.

Khi tạo quy tắc ràng buộc, trình chỉnh sửa sẽ cung cấp quy tắc ràng buộc đó lề mặc định để phân tách hai khung 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 ngành 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 neo điểm ở cùng một mặt phẳng. Một mặt phẳng thẳng đứng—bên trái và bên phải cạnh — của một khung nhìn chỉ có thể bị hạn chế đối 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ị khác nhau đế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) neo ràng buộc. Giới hạn này chuyển sang màu đỏ để cho biết rằng bạn có thể nhấp vào xoá dữ liệu đó, như minh hoạ trong Hình 5.

  

  Hình 5. Hạn chế màu đỏ cho biết mà bạn có thể nhấp vào để xoá.

• Trong phần Bố cục của cửa sổ Thuộc tính, hãy nhấp vào một neo điều kiện ràng buộc, như minh hoạ trong hình 6.

  

  Hình 6. Nhấp vào một điều kiện ràng buộc neo để xóa báo cáo đó.

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ị, các đường ràng buộc sẽ trở thành được cuộn lại như một lò xo để biểu thị các lực đối nhau, như minh hoạ trong video 2. Chiến lược phát hành đĩa đơn hiệu ứng rõ ràng nhất khi kích thước khung hiển thị được đặt thành "cố định" hoặc "gói nội dung" trong trường hợp đó, khung hiển thị được căn giữa giữa các ràng buộc. Nếu bạn muốn khung hiển thị kéo dài kích thước để đáp ứng các hạn chế, chuyển đổi kích thước thành "phù hợp với các điều kiện 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 nằm ở giữa điều chỉnh độ chệch của ràng buộc.

Bạn có thể sử dụng các quy tắc ràng buộc để đạt được nhiều kiểu hành vi của bố cục, như được mô tả trong các 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 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. Hạn chế theo chiều ngang đối với phần tử mẹ.

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

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

Trong hình 8, B bị buộc phải luôn ở bên phải A, còn C là hạn chế 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, vì vậy B có thể vẫn di chuyển lên và xuống.

Hình 8. Ngang và dọc quy tắc ràng buộ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 của 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. Mức chênh lệch là được xác định theo 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 chế độ xem mà bạn muốn căn chỉnh, rồi nhấp vào Căn chỉnh trên thanh công cụ để chọn kiểu căn chỉnh.

Hình 9. Căn ngang quy tắc ràng buộc.

Hình 10. Bù trừ theo chiều ngang ràng buộc căn chỉnh.

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 quy tắc ràng buộc đường 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 Constraint rồi nhấp vào Show Baseline (Hiển thị đường cơ sở). Sau đó, nhấp vào văn bản đường cơ sở và kéo đường thẳng này đến một đường cơ sở khác.

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

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

Bạn có thể thêm đường căn dọc hoặc ngang để ràng buộc và không hiển thị với người dùng ứng dụng của bạn. Bạn có thể xác định vị trí của 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 so với cạnh của bố cục.

Để tạo nguyên tắc, hãy nhấp vào Nguyên tắc trên thanh công cụ, rồi nhấp vào Thêm nguyên tắc ngành dọc hoặc Thêm Đường căn ngang.

Kéo đường chấm để đặt lại vị trí đường kẻ và nhấp vào vòng tròn ở cạnh 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 với một .

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 ngoại trừ rào cản không xác định vị trí của chính nó. Thay vào đó, rào cản vị trí của bạn sẽ di chuyển theo vị trí của các thành phần hiển thị có trong đó. Đây là 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ị chế độ xem 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 ở "kết thúc" (hoặc bên phải, theo hướng từ trái sang phải bố cục) 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 phía bên phải của chế độ xem A hoặc của chế độ xem B ở xa nhất bên phải.

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

1. Nhấp vào Nguyên tắc trong 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 theo chiều ngang.
2. Trong cửa sổ Component Tree (Cây thành phần), hãy chọn chế độ xem bạn muốn bên trong rào chắn rồi kéo chúng vào thành phần rào chắn.
3. Chọn rào cản từ Component Tree (Cây thành phần), mở 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 chế độ xem 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ả các chế độ xem trong rào cản với nhau, ngay cả khi bạn không biết chế độ xem nào là dài nhất hay cao nhất.

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

Hình 13. Chế độ xem C bị hạn chế với một rào cản, di chuyển dựa trên vị trí và kích thước của cả chế độ xem A và chế độ xem 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ị, cũng như kích thước khung hiển thị cùng một kích thước là "cố định" hoặc "wrap nội dung", chế độ xem sẽ trở thành chính giữa giữa hai giới hạn với độ lệch 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 chế độ xem, 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 hạn chế, chuyển đổi kích thước thành "phù hợp với các điều kiện ràng buộc".

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

Hình 14. Khi chọn một chế độ xem, Cửa sổ Attributes (Thuộc tính) bao gồm các chế độ kiểm soát cho 1 tỷ lệ kích thước, 2 xoá quy tắc ràng buộc, 3 chế độ chiều cao hoặc chiều rộng, 4 lề và Giới hạn thiên kiến 5. Bạn cũng có thể đánh dấu các quy tắc ràng buộc riêng lẻ trong Layout Editor bằng cách nhấp vào các quy tắc đó trong 6 danh sách quy tắc ràng buộc.

Bạn có thể sử dụng ô đ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 – chế độ xem không đổi kích thước đối với các nội dung hoặc kích thước màn hình khác nhau. Người nhận chọn một chế độ kích thước khác, nhấp vào chế độ xem và mở 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 tuỳ chọn điều khiển cho một số thuộc tính bố cục, như minh hoạ trong hình 14. Đây là chỉ dành cho các chế độ xem 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 ký hiệu đượ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 để bật/tắt giữa các chế độ cài đặt sau:

• Cố định: chỉ định kích thước cụ thể trong hộp văn bản sau đây hoặc bằng đổi kích thước khung 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 .
• layout_ConstraintWidth

Đặt giá trị này thành true để thay đổi kích thước theo chiều ngang thành tuân theo các hạn chế. Theo mặc định, tiện ích được đặt thành WRAP_CONTENT không bị hạn chế.

• Khớp với các điều kiện ràng buộc: khung hiển thị sẽ mở rộng hết mức có thể để đáp ứng 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 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 "phù hợp với 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 phương diện đã cho chỉ có một quy tắc ràng buộc, thì chế độ xem sẽ mở rộng cho vừa với nội dung. Việc sử dụng chế độ này trên cả chiều cao hoặc chiều rộ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. Chế độ xem đượ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 thành phần hiển thị theo tỷ lệ, chẳng hạn như 16:9, nếu có ít nhất một trong kích thước khung 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ệ khung hình, 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) và nhập Tỷ lệ width:height trong đầu vào hiện ra.

Nếu cả chiều rộng và chiều cao được đặt thành "phù hợ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 tuỳ chọn ràng buộc tỷ lệ khung hình để chọn phương diện dựa trên tỷ lệ của phần tử khác. Trình kiểm tra khung hiển thị cho biết phương diện nào được đặt làm bằng cách 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", 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 sẽ tuỳ thuộc vào chiều cao của khung hiển thị, có thể được xác định trong như minh hoạ trong Hình 15.

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

Để giãn cách các chế độ xem đều nhau, hãy nhấp vào Lề trên thanh công cụ để chọn lề mặc định cho mỗi chế độ xem mà bạn thêm vào của bạn. Mọi thay đổi bạn thực hiện cho lề mặc định chỉ áp dụng cho các chế độ xem mà bạn thêm từ đó trở đi.

Bạn có thể kiểm soát lề cho mỗi khung 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 16dp.

Hình 16. Thẻ Margin (Lề) của 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 chế độ xem của bạn căn chỉnh theo các đề xuất về 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 chế độ xem.

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

Hình 18. Ví dụ về từng chuỗi phong cách.

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

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

Phần đầu của chuỗi chế độ xem – 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à khung hiển thị ở 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 lây lan, chia sẻ bên trong và đã được đó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 chế độ xem.

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

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

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à chuỗi dọc, do đó bạn có thể tạo bố cục lưới linh hoạt.
• Một chuỗi chỉ hoạt động bình thường nếu mỗi đầu của chuỗi bị ràng buộc vào một đối tượng khác trên cùng 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 hãy sử dụng một không căn chỉnh các chế độ xem theo hướng đó. Để có được vị trí thích hợp cho mỗi thành phần hiển thị trong chuỗi sẽ bao gồm các hạn chế khác, chẳng hạn như các hạn chế 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 các quy tắc đó trong bố cục, bạn có thể di chuyển từng thành phần hiển thị đến vị trí mong muốn trong Layout Editor và sau đó nhấp vào Infer Constraints (Giới hạn suy luậ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 hiệu quả nhất hạn chế cho tất cả khung hiển thị. Định dạng này ràng buộc các chế độ xem theo vị trí hiện tại của chúng mà vẫn đảm bảo tính linh hoạt. Bạn có thể cần phải điều chỉnh để bố cục sẽ phản hồi theo ý bạn cho các kích thước và hướng màn hình khác nhau.

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. Thời gian nó được bật và bạn thêm chế độ xem con vào chế độ xem mẹ, thì tính năng này tự động tạo 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 chúng vào nhưng chỉ khi thích hợp để ràng buộc chế độ xem với chế độ xem mẹ của bạn. 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. Bật tính năng này bằng cách nhấp vào Bật Tự động kết nối với nhà xuất bản mẹ trong thanh công cụ của 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 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 ConstraintSet cho một hiển thị ConstraintLayout, bố cục sẽ cập nhật các điều kiện ràng buộc của tất cả các phần tử con của nó.

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

Ví dụ về mã sau đây cho thấy cách tạo ảnh động khi di chuyển một nút đến 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 Hoa hướng dương ứng dụng minh hoạ.