Android約束布局——實現移動端頁面布局精細化

一、概述

在移動應用開發中，移動端頁面的布局一直是一個難點。約束布局可以高效、簡便地解決這個問題。使用約束布局可以快速、精細地實現移動端頁面布局，提升用戶體驗。

二、約束布局的特點

約束布局的主要特點如下：

1、約束布局的布局方式類似於傳統的 RelativeLayout

2、約束布局支持水平和垂直的約束關係，支持多個控件之間的約束關係

3、約束布局可以根據不同的屏幕大小和分辨率，來自動調整控件的位置和大小

4、約束布局可以在布局文件中直接實現動畫效果，代碼實現動畫過程相對簡單

三、基本使用方法

在布局文件中引入約束布局庫後，可以開始使用約束布局。

示例代碼如下：

    
        <android.support.constraint.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">

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

        </android.support.constraint.ConstraintLayout>
    

在示例代碼中，約束布局的核心節點是 ConstraintLayout，它對應了整個布局。在 ConstraintLayout 中通過添加約束條件和控件的 margin 來確定控件的位置和大小。

四、控件之間的約束關係

約束布局的核心是不同控件之間的約束關係。控件可以約束到其他控件的上、下、左、右等位置，或者約束到父布局的邊緣。

示例代碼如下：

    
        <TextView
            android:id="@+id/textView1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="TextView 1"
            app:layout_constraintBottom_toTopOf="@+id/textView2"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="TextView 2"
            app:layout_constraintBottom_toTopOf="@+id/textView3"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView1" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="TextView 3"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2" />
    

在示例代碼中，TextView 1 約束了它的上下左右與父布局相等。TextView 2 約束了它的上為 TextView 1 的下，下為 TextView 3 的上，左右與父布局相等。TextView 3 約束了它的上為 TextView 2 的下，下與父布局相等，左右與父布局相等。

五、輔助工具的使用

約束布局的開發輔助工具可以提高開發效率，快速實現約束布局。

1、自動輔助線：在 XML 中按住 Control 鍵，將鼠標懸停在視圖之間，就可以看到自動線。自動輔助線會自動對齊控件，提高布局相對位置的精度。

2、布局編輯器：約束布局的布局編輯器可以直觀地看到控件的約束關係，可以更加直觀地進行布局設計。在布局文件中雙擊任何視圖，都可以打開此視圖的約束布局編輯器。

3、約束布局輔助器：使用約束布局輔助器可以對約束布局進行調整和查看。在布局文件中選擇視圖並點擊右鍵，選擇 Show in > ConstraintLayout Helper。

六、示例代碼

以下是一個約束布局的示例代碼：

    
        <android.support.constraint.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">

            <TextView
                android:id="@+id/textView1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:text="TextView 1"
                app:layout_constraintEnd_toEndOf="@+id/guideline2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:text="TextView 2"
                app:layout_constraintEnd_toEndOf="@+id/guideline2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView1" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:text="TextView 3"
                app:layout_constraintEnd_toEndOf="@+id/guideline2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView2" />

            <android.support.constraint.Guideline
                android:id="@+id/guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="0.25" />

            <android.support.constraint.Guideline
                android:id="@+id/guideline2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="0.75" />
        </android.support.constraint.ConstraintLayout>
    

在示例代碼中，TextView 1 約束了它的上下左與父布局相等。TextView 2 約束了它的上為 TextView 1 的下，下為 TextView 3 的上，左右與父布局相等。TextView 3 約束了它的上為 TextView 2 的下，下與父布局相等，左右與父布局相等。

此外，還有兩條 Guideline 控件。它們分別在布局高度的 0.25 和 0.75 的位置，可以用於布局設計。