Tìm hiểu Constraint Layout Android - Insurance Finances

Constraint Layout Android dùng để thiết kế một giao diện của một ứng dụng, để thực hiện được giao diện bạn phải năm rõ những cấu trúc của layout và các thuộc tính của nó, vì thế tôi sẽ giới thiệu những cấu trúc của layout bên dưới để các bạn có thể dễ dàng theo dõi.

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 bố cục lớn và phức tạp với hệ thống phân cấp dạng xem phẳng, đồng thời cũng 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 chế độ xem lồng vào nhau và cũng cải thiện hiệu suất của các tệp bố cục.

ConstraintLayout rất giống với RelativeLayout theo cách như vậy bởi vì, các chế độ xem được sắp xếp theo mối quan hệ giữa các chế độ xem anh chị em và bố cục mẹ nhưng nó linh hoạt hơn rất nhiều và hoạt động tốt hơn với Trình chỉnh sửa bố cục 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 bố cục ràng buộc so với các bố cục khác

1. Một lợi thế lớn của sự ràng buộc là bạn có thể thực hiện các hoạt ảnh trên các khung nhìn ConstraintLayout của mình với rất ít mã.

2. Bạn có thể tạo bố cục 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.

3. 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ã.

4. Bố cục Ràng buộc cải thiện hiệu suất so với bố cục khác

Sử dụng bố cục ràng buộc trong Android Studio:

Nó không được đóng gói như một phần của Android SDK và có sẵn dưới dạng thư viện hỗ trợ. Do đó, bất kỳ bản cập nhật nào trong tương lai sẽ tương thích với tất cả các phiên bản của Android.

Để sử dụng Constraint Layout, hãy đảm bảo rằng bạn đã khai báo kho lưu trữ bên dưới trong tệp build.gradle

repositories {

    maven {

        url 'https://maven.google.com'

    }

}

Bây giờ để sử dụng các tính năng ConstraintLayout trong dự án Android của chúng tôi, chúng tôi sẽ cần thêm thư viện vào phần phụ thuộc mô-đun ứng dụng build.gradle của chúng tôi.

Mở build.gradle (Ứng dụng mô-đun) của bạn và thêm mã bên dưới:

dependencies {

    compile 'com.android.support.constraint:constraint-layout:1.1.0-beta3'

}

Chế độ thiết kế hoặc kế hoạch chi tiết trong Android Studio:

Trong Android Studio, thiết kế và chế độ thiết kế chi tiết được thêm vào để hiển thị thiết kế bố cục 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 xử lý hoặc điểm neo trong bố cục ràng buộc:

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 “Chế độ xem này không bị ràng buộc…” Vì vậy, điều này đơn giản có nghĩa là chế độ xem 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, chế độ xem sẽ không hiển thị đúng khi nó chạy trong Ứng dụng.

Bây giờ tôi di chuột quanh nút, bạn có thể thấy các điểm khác nhau có thể được gọi là chốt hoặc điểm neo trong Bố cục ràng buộc

Nhấp vào tay cầm bất kỳ và kéo nó để tạo kết nối với 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.

Resize handle : Để thay đổi kích thước kích thước chế độ xem, 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.

Side handle : 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.

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ẻ rất nhiều chi tiết về các dạng xem mà chúng tôi đã sử dụng cho Chế độ xem 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 xu hướng trong Bố cục Tuyến tính, Bố cục Tương đối, v.v.

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ư Autoconnect để cho phép Android Studio tự động kết nối chế độ xem, 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 chế độ xem trên màn hình.

Định vị Tương đối trong Bố cục Ràng buộc:

Định vị tương đối là loại quan trọng nhất của Bố cục Ràng buộc 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 theo 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 mặt dưới, mặt trên 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 “Hello” 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.

<?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/textview1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Hello "/>

    <TextView

        android:id="@+id/textview2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        app:layout_constraintLeft_toRightOf="@id/textview1"

        android:text="AbhiAndroid"/>

</android.support.constraint.ConstraintLayout>

Lưu ý quan trọng: Để xác định vị trí của chế độ xem 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 chế độ xem. 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.

Chains In 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”.

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 khung nhìn đề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 Bố cục Ràng buộc

<?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"

    tools:layout_editor_absoluteY="81dp">

    <Button

        android:id="@+id/button5"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginBottom="8dp"

        android:layout_marginTop="8dp"

        android:text="Button"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toStartOf="@+id/button6"

        app:layout_constraintHorizontal_bias="0.5"

        app:layout_constraintHorizontal_chainStyle="spread"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

    <Button

        android:id="@+id/button6"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginBottom="8dp"

        android:layout_marginTop="8dp"

        android:text="Button"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="0.5"

        app:layout_constraintStart_toEndOf="@+id/button5"

        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Using Guidelines For Designing Layout In ConstraintLayout

Bạn có thể sử dụng các nguyên tắc để xác định bất kỳ hướng dẫn dọc hoặc ngang nào trong khi thiết kế Bố cục ứ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 chế độ xem với hướng dẫn và lưu giữ nguyên tắc bố trí thiết kế.

Percent dimensions In 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.

app:layout_constraintWidth_default="percent"

app:layout_constraintWidth_percent="0.8"

Barriers In ConstraintLayout:

Các Rào cản thường tránh một hoặc nhiều widget / phần tử để vượt qua nó. Khi một widget cố gắng đi qua nó, Barrier sẽ tự di chuyển và tránh để widget được đặt phía trên nó.

Dưới đây là mã XML mẫu về việc sử dụng Rào cản trong ConstraintLayout

<?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"

    tools:layout_editor_absoluteY="81dp">

    <Button

        android:id="@+id/button13"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:text="Button"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

    <TextView

        android:id="@+id/textView8"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:text="Barriers avoid overlapping of elements"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/button13" />

    <android.support.constraint.Barrier

        android:id="@+id/barrier8"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        app:barrierDirection="right"

        app:constraint_referenced_ids="button13,textView8"

        tools:layout_editor_absoluteY="511dp" />

    <Button

        android:id="@+id/button14"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="8dp"

        android:text="Button"

        app:layout_constraintStart_toEndOf="@+id/barrier8"

        tools:layout_editor_absoluteY="34dp" />

</android.support.constraint.ConstraintLayout>

Group In 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 chế độ xem 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 chế độ xem 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 chế độ xem, bạn chỉ cần thêm id của họ 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 chế độ xem được cắm. 

<?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"

    tools:layout_editor_absoluteY="81dp">

    <Button

        android:id="@+id/button15"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button"

        tools:layout_editor_absoluteX="44dp"

        tools:layout_editor_absoluteY="28dp" />

    <Button

        android:id="@+id/button16"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button"

        tools:layout_editor_absoluteX="89dp"

        tools:layout_editor_absoluteY="118dp" />

    <android.support.constraint.Group

        android:id="@+id/group"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:visibility="invisible"

        app:constraint_referenced_ids="button16,button15" />

</android.support.constraint.ConstraintLayout>

Sau đây tạo ví dụ Constraint Layout Example in Android Studio:

Dưới đây chúng tôi thiết kế màn hình Đăng nhập đơn giản trong Bố cục Ràng buộc. Chúng tôi đã sử dụng ImageView, EditText, Button và TextView để thiết kế bố cục bên dưới.

Bước 1: Tạo một dự án mới ConstraintLayout và hoạt động Main Activity. Ở đây chúng tôi sẽ tạo một Bố cục Ràng buộc:

<?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:id="@+id/constraintLayout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#80C938">

</android.support.constraint.ConstraintLayout>

Bước 2: Thêm các chế độ xem khác (chế độ xem hình ảnh, văn bản chỉnh sửa, chế độ xem nút và chế độ xem văn bản) bằng cách thêm cả ràng buộc ngang và dọc cho chúng:

<ImageView

android:layout_width="146dp"

android:layout_height="100dp"

android:src="@drawable/abhi_android"

android:id="@+id/imageView"

android:layout_marginTop="96dp"

app:layout_constraintTop_toTopOf="parent"

android:layout_marginEnd="16dp"

app:layout_constraintRight_toRightOf="parent"

android:layout_marginRight="16dp"

android:layout_marginStart="16dp"

app:layout_constraintLeft_toLeftOf="parent"

android:layout_marginLeft="16dp" />

<EditText

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:inputType="textPersonName"

android:ems="10"

android:id="@+id/editText"

android:layout_marginStart="16dp"

android:padding="12dp"

app:layout_constraintLeft_toLeftOf="parent"

android:layout_marginLeft="16dp"

android:layout_marginEnd="16dp"

app:layout_constraintRight_toRightOf="parent"

android:layout_marginRight="16dp"

android:hint="Email"

android:background="#ffffff"

android:layout_marginTop="232dp"

app:layout_constraintTop_toTopOf="parent" />

<EditText

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:inputType="textPassword"

android:ems="10"

android:id="@+id/editText2"

android:padding="12dp"

android:background="#ffffff"

android:layout_marginEnd="16dp"

app:layout_constraintRight_toRightOf="parent"

android:layout_marginRight="16dp"

android:layout_marginStart="16dp"

app:layout_constraintLeft_toLeftOf="parent"

android:layout_marginLeft="16dp"

android:hint="Password"

android:layout_marginTop="304dp"

app:layout_constraintTop_toTopOf="parent" />

<Button

android:text="SIGN IN"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#00773F"

android:id="@+id/button1"

android:layout_marginStart="16dp"

android:paddingLeft="30dp"

android:paddingRight="30dp"

android:textColor="#ffffff"

app:layout_constraintLeft_toLeftOf="parent"

android:layout_marginLeft="16dp"

android:layout_marginEnd="16dp"

app:layout_constraintRight_toRightOf="parent"

android:layout_marginRight="16dp"

android:layout_marginTop="408dp"

app:layout_constraintTop_toTopOf="parent" />

<TextView

android:text="Don't have an account?"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/textView"

android:layout_marginEnd="16dp"

app:layout_constraintRight_toRightOf="parent"

android:layout_marginRight="16dp"

android:layout_marginStart="16dp"

android:textColor="#aaffffff"

app:layout_constraintLeft_toLeftOf="parent"

android:layout_marginLeft="16dp"

android:layout_marginTop="480dp"

app:layout_constraintTop_toTopOf="parent" />

Bước 3: Mã xml hoàn chỉnh của ví dụ Bố cục ràng buộc đơn giản:

<?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:id="@+id/constraintLayout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#80C938">

<ImageView

        android:layout_width="146dp"

        android:layout_height="100dp"

        android:src="@drawable/abhi_android"

        android:id="@+id/imageView"

        android:layout_marginTop="96dp"

        app:layout_constraintTop_toTopOf="parent"

        android:layout_marginEnd="16dp"

        app:layout_constraintRight_toRightOf="parent"

        android:layout_marginRight="16dp"

        android:layout_marginStart="16dp"

        app:layout_constraintLeft_toLeftOf="parent"

        android:layout_marginLeft="16dp" />

    <EditText

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:inputType="textPersonName"

        android:ems="10"

        android:id="@+id/editText"

        android:layout_marginStart="16dp"

        android:padding="12dp"

        app:layout_constraintLeft_toLeftOf="parent"

        android:layout_marginLeft="16dp"

        android:layout_marginEnd="16dp"

        app:layout_constraintRight_toRightOf="parent"

        android:layout_marginRight="16dp"

        android:hint="Email"

        android:background="#ffffff"

        android:layout_marginTop="232dp"

        app:layout_constraintTop_toTopOf="parent" />

    <EditText

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:inputType="textPassword"

        android:ems="10"

        android:id="@+id/editText2"

        android:padding="12dp"

        android:background="#ffffff"

        android:layout_marginEnd="16dp"

        app:layout_constraintRight_toRightOf="parent"

        android:layout_marginRight="16dp"

        android:layout_marginStart="16dp"

        app:layout_constraintLeft_toLeftOf="parent"

        android:layout_marginLeft="16dp"

        android:hint="Password"

        android:layout_marginTop="304dp"

        app:layout_constraintTop_toTopOf="parent" />

    <Button

        android:text="SIGN IN"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:background="#00773F"

        android:id="@+id/button1"

        android:layout_marginStart="16dp"

        android:paddingLeft="30dp"

        android:paddingRight="30dp"

        android:textColor="#ffffff"

        app:layout_constraintLeft_toLeftOf="parent"

        android:layout_marginLeft="16dp"

        android:layout_marginEnd="16dp"

        app:layout_constraintRight_toRightOf="parent"

        android:layout_marginRight="16dp"

        android:layout_marginTop="408dp"

        app:layout_constraintTop_toTopOf="parent" />

    <TextView

        android:text="Don't have an account?"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/textView"

        android:layout_marginEnd="16dp"

        app:layout_constraintRight_toRightOf="parent"

        android:layout_marginRight="16dp"

        android:layout_marginStart="16dp"

        android:textColor="#aaffffff"

        app:layout_constraintLeft_toLeftOf="parent"

        android:layout_marginLeft="16dp"

        android:layout_marginTop="480dp"

        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Kết quả:

Related Posts