Android约束布局实战教程：10个实用示例详解

2 年 ago

雅, 悟

3 minutes

这是文章《Android 约束布局示例教程》的第1部分（共1部分）。

在本教程中，我们将讨论Android约束布局的复杂性。谷歌在2016年的Google I/O开发者大会上推出了Android约束布局编辑器。这个新的布局编辑器具有一系列强大的工具，让开发者能够为他们的复杂布局创建扁平化UI层次结构。

Android约束布局

使用Android约束布局，确保你使用的是最新的Android Studio版本。最好使用Android Studio 2.2及以上版本。我们需要从SDK Manager中下载约束布局所需的SDK工具。创建一个新的空活动项目，并在build.gradle文件中添加以下依赖项：

compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'

创建一个新的布局，并将根类设置为ConstraintLayout，如下图所示。将旧的布局转换为ConstraintLayout。打开相应布局的设计面板，右键单击根组件，选择相关选项，如下图所示。

Android约束布局概述

Android约束布局用于通过将约束分配给每个子视图/小部件来定义布局。约束布局类似于相对布局（RelativeLayout），但功能更强大。约束布局的目的是通过删除嵌套视图并采用平面和灵活的设计来提高应用程序的性能。约束布局内部的视图在每个边上都有句柄（或锚点），用于分配约束。让我们将一个TextView拖放到布局上并对其进行约束分配。上述TextView有三种类型的句柄：

调整大小手柄 – 它位于四个角落，用于调整视图的大小，但保持其约束不变。
侧边手柄 – 位于每个边的中心的圆形手柄。用于设置视图的顶部、左侧、底部和右侧约束。
基线手柄 – 用于将基线与布局中的另一个文本视图对齐。

让我们为TextView指定约束并查看其XML代码。注意右侧的属性检查器面板：它显示了视图各边的边距设置。它还可以通过在以下模式之间切换来改变视图的大小。

包裹内容 – 这种模式会将视图包裹其内容大小。
任意大小 – 这类似于匹配父容器。
固定大小 – 这允许我们设置恒定的宽度和高度。

以上布局的XML代码如下：sample.xml。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp" />
</android.support.constraint.ConstraintLayout>

app:layout_constraintLeft_toLeftOf=”parent” – constraintLeft是视图左侧的锚点。toLeftOf表示将视图对齐到指定视图的左侧，在本例中是”parent”。当在视图上设置绝对位置时，使用的XML属性是：

tools:layout_editor_absoluteY="48dp"
tools:layout_editor_absoluteX="40dp"

我们添加另一个TextView并对齐它们的基线。以上布局的XML代码是：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginStart="16dp"
        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="16dp"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        app:layout_constraintBaseline_toBaselineOf="@+id/textView"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        app:layout_constraintRight_toLeftOf="@+id/textView"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp" />

</android.support.constraint.ConstraintLayout>

还有另外两个工具——自动连接（Auto-connect）和推断（Inference），用于自动创建约束条件。

自动连接 – 点击可以启用此功能：正如其名称所示，自动连接会自动在两个相邻视图之间创建约束。
推断 – 点击可以启用此功能：推断引擎会在布局中的所有元素之间创建约束。推断引擎根据各种因素，如小部件的位置和大小，试图找到并创建最佳连接。

以下是自动连接布局的演示：如上所示的GIF动画中，约束会自动进行动画变化。请注意属性面板中的水平和垂直滑块，分别称为水平和垂直偏置。它们允许我们使用偏置值沿水平或垂直轴将视图定位，相对于其约束位置。以下是上述演示的XML代码。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/imageView7"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.58000004"
        app:layout_constraintHorizontal_bias="0.47" />
</android.support.constraint.ConstraintLayout>

以下给出了一个启用推断的布局示例：上面的GIF的XML代码为：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView22"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="59dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        android:layout_marginEnd="31dp"
        app:layout_constraintRight_toRightOf="@+id/textView22"
        android:layout_marginTop="178dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginRight="31dp" />
</android.support.constraint.ConstraintLayout>

tools:layout_constraintTop_creator=”1″：创建约束的creator属性用于跟踪谁创建了这些约束，特别是当它们由推断引擎创建时会被赋值为1。

删除约束

要删除单个约束条件，请将鼠标悬停在圆形手柄上并点击，直到它变为红色。要删除视图的所有约束条件，请点击其下方看起来像尺子的图标。下面是一个示例演示GIF：至此，本教程结束。您可以尝试使用约束布局来替换一些自己的布局。

#Android开发 #Android教程 #ConstraintLayout #UI设计 #约束布局