Android ConstraintLayout 示例教程

教程

Android

在这个教程中，我们将讨论Android ConstraintLayout的复杂性。Google在2016年的Google I/O大会上推出了Android约束布局编辑器。新的布局编辑器具有一组强大的工具，允许开发人员为其复杂的布局创建扁平UI层次结构。

Android ConstraintLayout

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

Android Constraint Layout概述

Android ConstraintLayout用于通过将每个子视图/小部件相对于其他视图分配约束条件来定义布局。ConstraintLayout类似于RelativeLayout，但功能更强大。 ConstraintLayout的目标是通过使用平面和灵活的设计来消除嵌套视图，从而提高应用程序的性能。 ConstraintLayout中的视图在每个边上都有处理点（或锚点），用于分配约束条件。让我们在布局上拖放一个TextView并为其分配约束条件。上面的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 和 Inferences，用于自动创建约束。

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

A demo of Auto-Connect layout is given below: As you can see in the above gif, The constraints are animated automatically. Notice the horizontal and vertical sliders in the properties pane. They are called horizontal and vertical bias respectively. They allow us to position a view along the horizontal or vertical axis using a bias value, this will be relative to it’s constrained position. The xml code for the above demo is given below:

<?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"：创建者属性用于跟踪创建约束的人，特别是如果它们是由推断引擎创建的，则分配为1。

删除约束

要删除单个约束，请将鼠标悬停在圆形手柄上，单击它使其变为红色。要删除视图的所有约束，请单击下面看起来像这样的符号：下面给出了一个示例演示gif：本教程到此结束。您可以继续尝试使用约束布局替换您自己的一些布局。

Source:
https://www.digitalocean.com/community/tutorials/android-constraintlayout