Android 约束布局示例教程

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

Android约束布局

使用android ConstraintLayout，确保你使用的是最新的Android Studio版本。最好使用Android Studio 2.2及以上版本。我们需要从SDK Manager中下载ConstraintLayout所需的SDK工具。创建一个新的空活动项目，并在build.gradle文件中添加以下依赖项。 compile ‘com.android.support.constraint:constraint-layout:1.0.0-beta4’创建一个新的布局，并将根类设置为ConstraintLayout，如下图所示。将旧的布局转换为ConstraintLayout。打开相应布局的设计面板，右键单击根组件，选择相关选项，如下图所示。

Android约束布局概述

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

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

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

• Wrap Content – This wraps the view to fill it’s content.
• Any Size – This is similar to match parent.
• Fixed Size – This allows us to set constant width and height.

以上布局的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 is the anchor point to the left of the view. toLeftOf signifies aligning the view to the left of the assigned view which is “parent” in this case.
  When the absolute positions are set on the view, the xml properties that are used are –

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）和推理（Inferences），用于自动创建约束条件。

1. 自动连接 – 点击可以启用此功能：正如其名称所示，自动连接会自动在两个相邻视图之间创建约束。

推理 – 点击可以启用此功能：推理引擎会在布局中的所有元素之间创建约束。推理引擎根据各种因素，如小部件的位置和大小，试图找到并创建最佳连接。

以下是Auto-Connect布局的演示：如上所示的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>

工具：layout_constraintTop_creator=”1″：创建约束的创作者属性用于跟踪谁创建了这些约束，特别是如果它们由推理引擎创建并分配为1。

删除限制

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