Constraint Layout là một ViewGroup (nghĩa là một dạng xem chứa các dạng xem khác) cho phép bạn tạo các layout lớn và phức tạp với hệ thống phân cấp dạng xem phẳng, đồng thời cho phép bạn định vị và định kích thước các widget theo cách rất linh hoạt. Nó được tạo ra để giúp giảm bớt các View lồng vào nhau và cũng cải thiện hiệu suất của các tệp layout.
ConstraintLayout rất giống với RelativeLayout theo cách như vậy bởi vì, các View được sắp xếp theo mối quan hệ giữa các View anh chị em và layout parent nhưng nó linh hoạt hơn rất nhiều và hoạt động tốt hơn với Layout Editor của Android Studio. Nó được phát hành tại Google I / O 2016. Kể từ khi nó ra đời (tức là ở Android studio 2.3), nó đã trở thành một nhóm xem được sử dụng rộng rãi và hỗ trợ Android 2.3 trở lên.
Ưu điểm của Constraint Layout so với các layout khác
- Một lợi thế lớn của Constraint là bạn có thể thực hiện các animation trên các khung nhìn ConstraintLayout của mình với rất ít mã.
- Bạn có thể xây dựng layout hoàn chỉnh của mình bằng cách kéo và thả đơn giản trên trình chỉnh sửa thiết kế Android Studio.
- Bạn có thể kiểm soát những gì xảy ra với một nhóm widget thông qua một dòng mã.
- Constraint Layout cải thiện hiệu suất so với layout khác
Sử dụng Constraint Layout trong Android Studio:
Khi bạn muốn sử dụng Constraint Layout trong Android Studio, điều đầu tiên cần biết là nó không phải là một phần mặc định của Android SDK, mà được cung cấp qua một thư viện hỗ trợ. Điều này có nghĩa là bạn có thể sử dụng nó với bất kỳ phiên bản Android nào mà không lo lắng về tính tương thích.
Để bắt đầu, bạn cần thêm một địa chỉ kho lưu trữ vào tệp build.gradle của mình. Mở tệp này và thêm đoạn mã sau đây vào phần repositories:
repositories {
maven {
url 'https://maven.google.com'
}
}Tiếp theo, bạn cần thêm thư viện Constraint Layout vào danh sách phụ thuộc của dự án. Mở tệp build.gradle (Module: app) và thêm dòng sau vào phần dependencies:
dependencies {
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}Hãy chú ý rằng bạn cần sử dụng phiên bản mới nhất của thư viện Constraint Layout để có được tính năng tốt nhất.
Chế độ design hoặc blueprint trong Android Studio:
Trong Android Studio, thiết kế và chế độ kế hoạch chi tiết được thêm vào để hiển thị thiết kế layout trong chế độ thiết kế và kế hoạch chi tiết. Bạn có thể bật bất kỳ chế độ nào hoặc cả hai cùng nhau theo yêu cầu của bạn.
Lưu ý quan trọng: Để giúp bạn hiểu ConstraintLayout, chúng tôi sẽ bật cả hai (chế độ thiết kế và chi tiết) cho hướng dẫn này.
Hiểu các điểm handel hoặc anchor point trong Constraint Layout:
Giả sử bạn kéo một phần tử TextView trong trình chỉnh sửa trực quan ConstraintLayout của Android Studio. Ngay sau khi kéo, bạn sẽ nhận thấy lỗi với thông báo “View này không bị ràng buộc…” Vì vậy, điều này đơn giản có nghĩa là View chúng tôi đã tạo không bị ràng buộc và chúng tôi cần sửa nó. Nếu chúng tôi không khắc phục, View sẽ không hiển thị đúng khi nó chạy trong Ứng dụng.
Bây giờ tôi di chuột quanh button, bạn có thể thấy các điểm khác nhau có thể được gọi là điểm điều khiển hoặc điểm neo trong Constraint Layout.
Nhấp vào tay cầm bất kỳ và kéo nó để tạo kết nối với một thứ khác xung quanh nó.
Lưu ý quan trọng: Bạn sẽ cần thực hiện ít nhất hai kết nối của tay cầm với một thứ khác để làm cho nó Bị ràng buộc. Vì vậy, bằng cách này bạn có thể tạo Constrained.
Điều khiển thay đổi kích thước – Để thay đổi kích thước kích thước View, bạn có thể sử dụng điều khiển thay đổi kích thước được tìm thấy ở các góc để giữ nguyên giới hạn. Chỉ cần kéo và thay đổi kích thước nó theo yêu cầu Giao diện người dùng ứng dụng của bạn.
Tay cầm bên – Tay cầm bên là tay cầm tròn được sử dụng để thiết lập các ràng buộc trên, trái, dưới và bên phải của dạng xem.
Cửa sổ thuộc tính cho ConstraintLayout:
Ở phía bên phải, bạn sẽ thấy một cửa sổ thuộc tính chia sẻ nhiều thông tin chi tiết về các dạng View mà chúng tôi đã sử dụng cho View trong ConstraintLayout.
Bạn kiểm soát kích thước của phần tử bằng cách nhấp vào 4 mũi tên bên để thay đổi wrap_content thành match_constrained, kích thước cố định, v.v.
Bias quyết định vị trí xem giữa các ràng buộc của nó trên một trục. Theo mặc định, nó được đặt 50% và có thể thay đổi dễ dàng bằng cách kéo.
Lưu ý quan trọng: Khó đạt được hình dạng trong Linear Layout, Relative layout, v.v.
Xóa Ràng buộc Trong Contraint Layout:
Để xóa kết nối bị hạn chế, chỉ cần nhấp vào điểm xử lý và đó là điểm kết nối.
Xóa Constraint Layout ràng buộc Android Studio
Các công cụ khác nhau trong ConstraintLayout:
Bạn cũng có thể sử dụng các công cụ như Tự động kết nối để cho phép Android Studio tự động kết nối View, xóa tất cả các ràng buộc để xóa tất cả các ràng buộc trong một lần và suy ra ràng buộc để tự động tìm ra các ràng buộc của chúng tôi cho tất cả các View trên màn hình.
Định vị Tương đối trong Constraint Layout:
Định vị tương đối là loại quan trọng nhất của Constraint Layout và được coi là khối cơ bản trong đó. Tùy chọn ràng buộc khác nhau mà nó cung cấp hoạt động trong mối quan hệ / liên quan đến vị trí của nhau. Những định vị tương đối đó chỉ hoạt động trong trục dọc và trục ngang.
Sử dụng trục ngang, bạn có thể đặt vị trí của một tiện ích con ở các cạnh bên phải, trái, cuối và đầu của tiện ích con khác. Trong khi sử dụng trục tung, bạn có thể đặt các cạnh dưới cùng, trên cùng và đường cơ sở văn bản.
Bây giờ chúng ta hãy hiểu khái niệm này bằng cách lấy một ví dụ. Trong ví dụ dưới đây, chúng tôi sẽ tạo hai TextView. Trong TextView đầu tiên, chúng ta sẽ viết Hello và trong thứ hai, chúng ta sẽ viết AbhiAndroid. Chúng tôi sẽ đặt vị trí của “AbhiAndroid” bên trái của “Xin chào” nhưng ở phía bên phải. Dưới đây là mã XML:
Ở đây ràng buộc có nghĩa là hệ thống sẽ cố gắng chia sẻ cùng một vị trí với cả hai bên. Textview1 là phía bên trái của textview2 được giới hạn ở phía bên phải của textview1.
Lưu ý quan trọng: Để xác định vị trí của View trong ConstraintLayout, bạn phải thêm ít nhất một ràng buộc ngang và một ràng buộc dọc vào View. Mỗi ràng buộc xác định vị trí của khung nhìn dọc theo trục dọc hoặc trục ngang; vì vậy mỗi khung nhìn phải có tối thiểu một ràng buộc cho mỗi trục, nhưng thường thì nhiều hơn là cần thiết. Có một số loại hạn chế. Cụ thể, sau đây là một số hạn chế có thể được sử dụng để đặt vị trí so với một mục khác:
layout_constraintLeft_toLeftOf: đường viền bên trái của phần tử được định vị so với đường viền bên trái của phần tử khác
layout_constraintLeft_toRightOf: đường viền bên trái của phần tử được định vị so với đường viền bên phải của phần tử khác
layout_constraintRight_toLeftOf: đường viền bên phải của phần tử được định vị so với đường viền bên trái của phần tử khác
layout_constraintRight_toRightOf: đường viền bên phải của phần tử được định vị so với đường viền bên phải của phần tử khác.
Chuỗi trong ConstraintLayout
Chuỗi cho phép chúng tôi kiểm soát không gian giữa các phần tử và chuỗi tất cả các phần tử đã chọn sang một phần tử khác.
Để tạo một chuỗi, hãy chọn các phần tử mà bạn muốn tạo thành một phần của chuỗi, sau đó nhấp chuột phải vào – “Chuỗi” – “Tạo Chuỗi ngang hoặc Dọc”.
Các kiểu chuỗi có sẵn khác nhau là spread, spread_inside và packedi.
Bạn có thể thực hiện cả Chuỗi ngang hoặc Chuỗi dọc cùng một lúc.
XML để tạo chuỗi khác ở chỗ tất cả các dạng xem đều có các ràng buộc được xác định trên chúng và mục đầu tiên trong chuỗi chỉ định chainStyle.
Dưới đây là mã XML ví dụ về việc sử dụng chuỗi trong Constraint Layout
Sử dụng các Guideline để thiết kế layout trong ConstraintLayout
Bạn có thể sử dụng các Guidelines để xác định bất kỳ hướng dẫn dọc hoặc ngang nào trong khi thiết kế layout ứng dụng của mình. Điều này sẽ giúp bạn thực hiện kết nối Có giới hạn của View với hướng dẫn và lưu giữ Guidelines layout thiết kế.
Lưu ý quan trọng: Khi thay đổi lề hoặc tỷ lệ phần trăm của đường dẫn, nó cũng sẽ tự động thay đổi cho tất cả các View được kết nối.
Phần trăm thứ nguyên trong ConstraintLayout:
Giá trị phần trăm của ràng buộc Width_default, cho phép chúng tôi thiết lập một widget để chiếm một số phần trăm không gian có sẵn.
Barriers trong ConstraintLayout
Các barriers thường tránh một hoặc nhiều widget / phần tử để vượt qua nó. Khi một tiện ích con cố gắng đi qua nó, barriers sẽ tự di chuyển và tránh để tiện ích con được đặt phía trên nó.
Dưới đây là mã XML mẫu về việc sử dụng barriers trong ConstraintLayout
Group trong ConstraintLayout:
Group trong android giúp thực hiện một số hành động trên một tập hợp các widget với trường hợp phổ biến nhất là kiểm soát mức độ hiển thị của một tập hợp các widget.
Khi đối mặt với tình huống này, giải pháp phổ biến nhất là duy trì cho mình một danh sách hoặc tập hợp các View bên trong Hoạt động hoặc Phân đoạn, hoặc thậm chí thêm một Nhóm xem và đặt tất cả các View bên trong nó, sau đó kiểm soát khả năng hiển thị của vùng chứa. Bây giờ để thực hiện hành động trên các View, bạn chỉ cần thêm id của chúng làm id được tham chiếu trong nhóm và nhóm trong ConstraintLayout sẽ truyền bá các hành động cho tất cả các View được cắm.
Trong mã ví dụ XML dưới đây về việc sử dụng Groups trong ConstraintLayout, chúng tôi đã đặt khả năng hiển thị thành ẩn của hai Button:
Ví dụ Constraint Layout
Bước 1: Tạo một dự án mới ConstraintLayout và hoạt động Hoạt động chính. Ở đây, chúng tôi sẽ tạo một Bố cục Ràng buộc:
Bước 2: Thêm các View khác (View hình ảnh, văn bản, nút và View văn bản) bằng cách thêm cả ràng buộc ngang và dọc cho chúng:
Bước 3: Mã xml hoàn chỉnh của ví dụ Bố cục ràng buộc đơn giản:
Đầu ra:
Bây giờ hãy nhìn vào layout ở chế độ thiết kế để xem layout của màn hình Đăng nhập đơn giản được tạo bằng Constraint Layout.
Các điểm quan trọng về Constraint Layout:
Để sử dụng ConstraintLayout,
Tôi. Phiên bản Android Studio của bạn phải từ 2.3 trở lên.
ii. Trước tiên, bạn phải bao gồm thư viện hỗ trợ của ConstraintLayout.
iii. Bạn phải có ít nhất một ràng buộc dọc và một ngang.
Tóm lại, ConstraintLayout là lựa chọn nhanh hơn, tốt hơn và hiệu quả hơn nhiều để thiết kế layout lớn và thẩm mỹ trong giao diện người dùng Android của bạn.
