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 的位置，可以用于布局设计。