Sử dụng ConstraintLayout trong Android
Bài viết được sự cho phép của tác giả Trần Hữu Cương
I. Giới thiệu
ConstraintLayout là một layout mới mà Google cung cấp cho chúng ta để xây dựng giao diện cho các ứng dụng Android
ConstraintLayout giúp cho việc thiết kế các layouts phức tạp trở nên đơn giản hơn bằng cách cho phép các views kết nối với nhau thông qua các ràng buộc dựa trên mối quan hệ giữa các views khác nhau.
ConstraintLayout hướng tới việc thiết kếgiảm các views lồng nhau ,điều này sẽ làm tăng hiệu suất thực thi cho các tập tin layout.
II.Làm Quen Với ConstraintLayout
Định vị các views
ConstraintLayout cung cấp các thuộc tính cho phép chúng ta định vị view hiện tại một cách dễ dàng. Các thuộc tính được mô tả như bảng sau:
| Các thuộc tính | Mô tả |
| layout_constraintTop_toTopOf | Ràng buộc phần trên (top) của view hiện tại đến phần trên của view khác. |
| layout_constraintTop_toBottomOf | Ràng buộc phần trên của view hiện tại đến phần dưới (bottom) của view khác. |
| layout_constraintBottom_toTopOf | Ràng buộc phần dưới của view hiện tại đến phần trên của view khác. |
| layout_constraintBottom_toBottomOf | Ràng buộc phần dưới của view hiện tại đến phần dưới của view khác. |
| layout_constraintLeft_toTopOf | Ràng buộc bên trái (left) của view hiện tại đến phần trên của view khác. |
| layout_constraintLeft_toBottomOf | Ràng buộc bên trái của view hiện tại đến phần dưới của view khác. |
| layout_constraintLeft_toLeftOf | Ràng buộc bên trái của view hiện tại đến bên trái của view khác. |
| layout_constraintLeft_toRightOf | Ràng buộc bên trái của view hiện tại đến bên phải (right) của view khác. |
| layout_constraintRight_toTopOf | Ràng buộc bên phải của view hiện tại đến phần trên của view khác. |
| layout_constraintRight_toBottomOf | Ràng buộc bên phải của view hiện tại đến phần dưới của view khác. |
| layout_constraintRight_toLeftOf | Ràng buộc bên phải của view hiện tại đến bên trái của view khác. |
| layout_constraintRight_toRightOf | Ràng buộc bên phải của view hiện tại đến bên phải của view khác. |
| Start, End | Chúng ta có thể dùng Start để thay thế cho Left và dùng End để thay thế cho Right. Lưu ý rằng, khi dùng Start thì phải dùng Start hay End tương ứng, không được dùng Start kết hợp với Left hay Right.Ví dụ layout_constraintRight_toLeftOf tương đương với layout_constraintEnd_toStartOf |
| layout_constraintHorizontal_bias | Định vị view theo trục ngang màn hình. |
| layout_constraintVertical_bias | Định vị view theo trục dọc màn hình. |
Ví dụ :Cho Textview ở giữa màn hình và button cuối màn hình và ở dưới textview
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sử dụng constrainLayout"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView"
/>
</android.support.constraint.ConstraintLayout>
Kích cỡ các views
Giống như các views, ConstraintLayout cung cấp hai thuộc tính là layout_width và layout_heightcho phép chúng ta điểu khiển kích cỡ của ConstraintLayout như ý. Có 3 kiểu giá trị phổ biến dùng cho layout_width và layout_height như sau:
- Tùy ý, ví 18dp hay 133dp: kích cỡ layout là cố định theo giá trị cho trước
- wrap_content: điều chỉnh kích cỡ layout vừa khớp với nội dung bên trong nó
- match_parent: mở rộng kích cỡ layout khớp kích cỡ của view cha hay view chứa nó
Bias
bias – có thể hiểu là bạn muốn sắp xếp View này thiên về bên nào hơn. Giá trị của bias nằm trong khoảng từ 0 đến 1 và có kiểu Float. Thuộc tính này chỉ có tác dụng khi View đang neo 2 cạnh đối diện hoặc cả 4 cạnh. ConstraintLayout cung cấp thuộc tính này cho cả chiều ngang (horizontal) và chiều dọc (vertical). Và nếu khi đã neo 2 cạnh hoặc 4 cạnh, nếu không có giá trị bias nào được chỉ định, bias sẽ có giá trị mặc định là 0.5, tức là vào giữa của 2 hoặc 4 điểm neo.
Hy vọng bài hôm nay sẽ giúp các bạn sử dụng tốt Constraint layout trong Android.
Bài viết gốc được đăng tải tại codecute.com
Có thể bạn quan tâm:
Xem thêm các tuyển dụng android hấp dẫn tại Station D
Bạn có thể quan tâm
- 7 Hướng đi đáng giá cho mọi Lập trình viên web trong năm 2024(Tài Nguyên)
- Vừa đủ để đi (go)(Công Nghệ)
- Xây dựng hệ thống referral trong Laravel(Công Nghệ)
