Sử dụng ConstraintLayout trong Android

meo mong bu » 5 năm ago

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.

Tags: Sử dụng ConstraintLayout trong Android