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.

Thử cách sử dụng Compose
Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách sử dụng bố cục trong ứng dụng Compose.

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

Tất cả sức mạnh của ConstraintLayout đều có sẵn trực tiếp từ các công cụ hình ảnh của Layout Editor, vì Layout API (API bố cục) và Layout Editor (Trình chỉnh sửa bố cục) đượ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, 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, vui lòng 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 theo chiều ngang và một quy tắc ràng buộc theo 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 sự 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 ẩn. 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 khung 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 cần nhiều hơn.

Khi bạn thả một thành phần hiển thị vào Layout Editor, thành phần 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. Việc này chỉ giúp bạn chỉnh sửa dễ dàng hơn. Nếu một khung hiển thị không có giới hạn khi bạn chạy bố cục trên một 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 đẹp trong trình chỉnh sửa, nhưng không có sự ràng buộc 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ă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 bố cục này 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 hiển thị chế độ xem 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 những quy tắc 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 biểu tượng Hiện cảnh báo và lỗi . Để giúp bạn tránh bỏ lỡ các điều kiện 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 điều kiện 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 trình bày trong ví dụ.

    Groovy

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

    Kotlin

    dependencies {
        implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha07")
        // To use constraintlayout in compose
        implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha07")
    }
    
  3. Trên 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 các 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 bố cục thành ConstraintLayout.

Để chuyển đổi một bố cục hiện có sang 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 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 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á một quy tắc ràng buộc

Để thêm một điều kiện 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 với phía bên trái của khung hiển thị mẹ.

  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 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à ô điều khiển ràng buộc bo tròn ở mỗi bên.

  2. Nhấp vào chế độ xem để chọn.
  3. Thực hiện một trong những thao tác sau:
    • Nhấp vào điểm điều khiển ràng buộc và kéo điểm neo đó tới một điểm neo hiện có. Đ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 Layout (Bố cục) trong 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 quy tắc đó một lề mặc định để phân tách hai khung hiển thị.

Khi tạo các 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 khung hiển thị ngang và một khung hiển thị dọc.
  • Bạn chỉ có thể tạo các quy tắc ràng buộc giữa điểm đ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 (bên trái và bên phải) của một khung hiển thị chỉ có thể bị ràng buộc với một mặt phẳng dọc 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 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ừ các 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 thao tác bất kỳ sau đây:

  • Nhấp vào một điều kiện ràng buộc để chọn quy tắc đó, sau đó nhấp vào Xoá.
  • Giữ phím Control và nhấp (giữ phím Command và nhấp trên macOS) một điểm neo ràng buộc. Quy tắc ràng buộc này chuyển sang màu đỏ để cho bạn biết rằng bạn có thể nhấp để xoá quy tắc ràng buộ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 để xoá quy tắc ràng buộ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 của quy tắc ràng buộc, như minh hoạ trong hình 6.

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

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

Nếu bạn thêm các điều kiện ràng buộc đối nhau vào một khung hiển thị, các đường ràng buộc sẽ trở nên được 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 sẽ hiện rõ nhất khi kích thước khung hiển thị được đặt thành "Fixed" (cố định) hoặc "wrap_content", trong trường hợp này, thành phần hiển thị sẽ đượ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 giãn kích thước để đáp ứng các ràng buộc, hãy chuyển kích thước thành "khớp 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ị để không nằm chính giữa, hãy điều chỉnh độ chệch của quy tắc ràng buộc.

Bạn có thể dùng các điều kiện ràng buộc để đạt được các loại hành vi bố cục khác nhau, như mô tả trong những phần sau.

Vị trí gốc

Cố định cạnh của chế độ xem với cạnh tương ứng của bố cục.

Trong hình 7, phần bên trái của thành phần 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 quy tắc 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ự giao diện cho 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 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 hạn chế 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 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ị với cùng một cạnh của một thành phần hiển thị khác.

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

Bạn có thể bù trừ phần căn chỉnh bằng cách kéo khung hiển thị vào trong từ quy tắc ràng buộc. Ví dụ: Hình 10 cho thấy B với căn chỉnh 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ả thành phần hiển thị mà bạn 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. Một quy tắc ràng buộc căn chỉnh ngang.

Hình 10. Một điều kiện ràng buộc căn chỉnh theo chiều ngang chênh 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 đường 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, sau đó nhấp vào Show Baseline (Hiện đường cơ sở). Sau đó, hãy nhấp vào đường cơ sở văn bản rồi kéo đường đó đến một đường cơ sở khác.

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

Tuân theo một nguyên tắc

Bạn có thể thêm nguyên tắc dọc hoặc ngang để ràng buộc khung hiển thị và người dùng ứng dụng sẽ không nhìn thấy. Bạn có thể đặt nguyên tắc 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 một nguyên tắc, hãy nhấp vào Guidelines (Nguyên tắc) trên thanh công cụ, sau đó nhấp vào Add Vertical Guidelines (Thêm nguyên tắc theo chiều dọc) hoặc Add (Thêm nguyên tắc theo chiều ngang).

Kéo đường chấm để đặt lại vị trí và nhấp vào vòng tròn ở cạnh của nguyên tắc đó để 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ới một rào cản

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 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 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 ở bên phải của một rào cản. Rào chắn được đặt thành "cuối" (hoặc bên phải, theo bố cục từ trái sang phải) của cả chế độ xem A và chế độ xem B. Rào chắn sẽ di chuyển tuỳ thuộc vào việc phía bên phải của chế độ xem A hay chế độ xem B là xa nhất về 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 Guidelines (Nguyên tắc) trên thanh công cụ, sau đó nhấp vào Add Landscape cháy (Thêm rào cản theo chiều dọc) hoặc Add LandscapeC (Thêm) Landscape (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 khung hiển thị bạn muốn 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 từ 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 điều kiện ràng buộc từ khung hiển thị khác đối với rào cản.

Bạn cũng có thể ràng buộc những 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ả 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 nguyên tắc vào 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 bởi một rào cản. Khung 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 quy tắc ràng buộc vào cả hai bên của thành phần hiển thị và kích thước thành phần hiển thị cho cùng một chiều là "cố định" hoặc "gói nội dung", thì thành phần hiển thị đó sẽ trở thành chính giữa giữa hai ràng buộc với độ lệch 50% theo mặc định. Bạn có thể điều chỉnh độ lệ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 khung hiển thị, như minh hoạ trong video 3.

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 ràng buộc, hãy chuyển kích thước thành "khớp các điều kiện ràng buộc".

Video 3. Điều chỉnh độ chệch của quy tắ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ẽ bao gồm các tuỳ chọn đ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, lề 4 và độ chệch giới hạn 5. Bạn cũng có thể làm nổi bật từng 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 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 đối với nhiều kích thước màn hình hoặc nội dung. Để chọn chế độ kích thước khác, hãy nhấp vào một thành phần 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. Tính năng này chỉ dành 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 ký hiệu được biểu thị bằng chú thích 3 trong hình 14. Những ký hiệu này đại diện cho 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:

  • 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.
  • Nội dung bao bọc: khung hiển thị chỉ mở rộng khi cần thiết để vừa với nội dung.
    • layout_bindingWidth
    • Đặt thuộc tính này thành true để cho phép kích thước ngang thay đổi 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 theo các quy tắc ràng buộc.

  • 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 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 khung hiển thị thành "khớp các điều kiện ràng buộc":
    • layout_ConstrainttWidth_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

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

    Tuy nhiên, nếu kích thước đã cho chỉ có một quy tắc ràng buộc, thì khung 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.

Thiết lập kích thước dưới dạng một 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 khung hiển thị theo 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 "giới hạn so khớp" (0dp). Để bật tỷ lệ này, 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) và nhập tỷ lệ width:height vào dữ liệu đầu vào hiện ra.

Nếu cả chiều rộng và chiều cao đều được đặt thành "khớp các điều kiện ràng buộc", 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ệ 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 "khớp các 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ị, có thể được xác định theo bất kỳ cách nào, như trong hình 15.

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

Để giãn cách các khung hiển thị bằng 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 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 các chế độ xem mà bạn thêm vào từ thời điểm đó 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ùng được đặt thành 16 dp.

Hình 16. Nút Lề của thanh công cụ.

Tất cả lề mà công cụ này cung cấp đều là các yếu tố có kích thước 8 dp để giúp khung hiển thị phù hợp với các đề xuất về lưới vuông 8 dp của Material Design.

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

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

Chuỗi là một nhóm thành phần hiển thị được liên kết với nhau bằng các quy tắc ràng buộc hai chiều về vị trí. 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 các cách sau:

  1. Độ phân tán: các khung hiển thị sẽ được phân bổ đồng đều sau khi tính đến lề. Đây là tuỳ chọn mặc định.
  2. Trải rộng bên trong:thành phần 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à phần còn lại được phân phối đồng đều.
  3. Trọng số:khi chuỗi được đặt thành trải rộng hoặc trải rộng 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 chế độ xem thành "giới hạn so khớp" (0dp). Theo mặc định, không gian được phân bổ đồng đề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ị sử dụng thuộc tính layout_constraintHorizontal_weightlayout_constraintVertical_weight. Phương thứ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 các thành phần hiển thị có cùng trọng số sẽ có cùng không gian.
  4. Packed (Đóng gói): các khung hiển thị được nhóm lạ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 – trái, phải, lên hoặc xuống – bằng cách thay đổi độ lệ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 các chế độ mở rộng, trải rộng bên trongđóng gói 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 trong video 4:

  1. Chọn tất 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 Căn giữa theo chiều ngang hoặc Căn giữa theo chiều dọc.

Video 4. Tạo chuỗi ngang.

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à chuỗi dọc, vì vậy, bạn có thể tạo bố cục lưới linh hoạt.
  • Chuỗi chỉ hoạt động đúng cách khi 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 khung hiển thị theo hướng đó. Để đạt được vị trí thích hợp cho từng 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 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 khung hiển thị khi đặ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í mong muốn trong Layout Editor, sau đó nhấp vào Infer Constraints (Dự đoán ràng buộc) để tự động tạo các quy tắc ràng buộc.

Infer Constraints (Dự đoán ràng buộc) quét bố cục để xác định tập hợp quy tắc ràng buộc hiệu quả nhất cho tất cả khung hiển thị. Thuộc tính này ràng buộc các khung hiển thị ở vị trí hiện tại trong khi vẫn 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ư dự kiế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 các khung hiển thị con vào một bố cục mẹ, tính năng này sẽ tự động tạo ít nhất 2 quy tắc ràng buộc cho mỗi khung hiển thị khi bạn thêm các khung hiển thị đó vào bố cục – nhưng chỉ khi thích hợp để ràng buộc khung 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 khung 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 biểu tượng Enable Autoconnection to parent (Bật tính năng tự động kết nối với mẹ) trong thanh công cụ Layout Editor.

Ảnh động dạ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 ConstraintSetTransitionManager.

ConstraintSet là một đối tượng nhẹ đại diện cho các giới hạn, lề và khoảng đệm của mọi 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 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ị.

Mã ví dụ sau đây cho thấy cách tạo ảnh động khi 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.