Constraint Layout Tutorial With Example In Android Studio [Step by Step]

Constraint Layout is a ViewGroup (i.e. a view that holds other views) which allows you to create large and complex layouts with a flat view hierarchy, and also allows you to position and size widgets in a very flexible way. It was created to help reduce the nesting of views and also improve the performance of layout files.

ConstraintLayout与 RelativeLayout 这样做是因为，视图是根据兄弟视图和父布局之间的关系进行布局的，但是它更加灵活，并且与Android Studio的布局编辑器配合得更好。它是在Google I/O 2016上发布的。自其存在之日起（即 Android studio 2.3），它已成为广泛使用的视图组，并支持Android 2.3或更高版本。

约束布局相对于其他布局的优势

constraintlayout的一大优点是，您可以用很少的代码在constraintlayout视图上执行动画。
2、只需在 Android Studio 设计编辑器。
3、您可以通过一行代码控制一组小部件发生的情况。
4、约束布局比其他布局提高性能

在Android Studio中使用约束布局：

它不是Android SDK的一部分，而是作为支持库提供的。因此，未来的任何更新都将与所有版本的Android兼容。

要使用约束布局，请确保您已在内部版本中声明了以下存储库。gradle文件

存储库{
    马文{
        url'https://maven.google.com'
    }
}

现在要在android项目中使用ConstraintLayout功能，我们需要将库添加到构建中。gradle应用程序模块依赖项部分。
打开您的构建。gradle（模块应用程序）并添加以下代码：

依赖项{
    编译com。安卓支持约束：约束布局：1.1.0-beta3'
}

Android Studio中的设计或蓝图模式：

在里面 Android Studio 增加了设计和蓝图模式，以设计和蓝图模式显示布局设计。您可以根据需要启用任何模式或同时启用这两种模式。

重要提示： 为了帮助您理解ConstraintLayout，我们将在本教程中同时启用（设计和蓝图模式）。

Understanding Handles or Anchor Points In Constraint Layout:

Lets suppose you drag a TextView element in ConstraintLayout visual editor of Android Studio. Immediately after dragging you will notice a error with a message, “This view is not constrained…” So this simply means the view we created is not Constrained and we need to fix it. If we don’t fix it, the view won’t render properly when it will run in App.

Now I hover around the button, you can see different points which can be called as handles or anchor points in Constraint Layout.

Click on the any handle and drag it to make connection with something else around it.

重要提示： You will need to make at least two connection of handles with something else to make it Constrained. So this way you can create Constrained.

Resize handle – To resize the view size, you can use resize handle found at the corners which keeps constraint intact. Just simply drag and resize it according to your App UI requirements.

Side handle – The side handle are circular handle used to set the top, left, bottom and right constraints of the view.

Attribute Window For ConstraintLayout:

On the right side you will notice a attribute window which share lots of details about the views that we used for View in ConstraintLayout.

You control sizing of the element by clicking on 4 side arrows to change wrap_content to match_constrained, fixed size etc.

Bias decides view placement between its constraints on an axis. By default it is set 50% and can be changed easily by dragging.

重要提示： Biasing is difficult to achieve in Linear Layout, Relative layout etc.

Deleting Constraint In ConstraintLayout:

To delete the constrained connection, simply click on handle point and thats it.

Different Tools In ConstraintLayout:

You can also use tools like Autoconnect to let Android Studio make automatic connection of view, clear all constraints to delete all constraints in one go and infer constraint to automatic figure our the constraints for all the views on screen.

约束布局中的相对定位：

相对定位是最重要的约束布局类型，被视为其中的基本块构建。它提供的不同约束选项与彼此的位置相关。这些相对定位仅在垂直轴和水平轴上工作。

使用横轴，您可以设置一个小部件在其他小部件的右、左、端和起始侧的位置。使用垂直轴时，可以设置底部、顶部和文本基线。

现在让我们通过一个例子来理解这个概念。在下面的示例中，我们将创建两个 TextView. 在第一个 TextView 我们将写Hello，然后再写AbhiAndroid。我们将在“Hello”的左侧设置“AbhiAndroid”的位置，但在右侧。以下是 XML 代码：

这里的约束意味着系统将尝试与双方共享同一位置。textview1是要约束到textview1右侧的textview2的左侧。

<?xml版本=“1.0”编码=“utf-8”？>
<android。支持限制ConstraintLayout xmlns：android=”http://schemas.android.com/apk/res/android"
    xmlns：应用程序=“http://schemas.android.com/apk/res-auto"
    xmlns：工具=”http://schemas.android.com/tools"
    android:layout\u width=“匹配父项”
    android:layout\u height=“match\u parent”
    工具：context=“.MainActivity”>

    <文本视图
        android:id=“@+id/textview1”
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:text=“你好”/>

    <文本视图
        android:id=“@+id/textview2”
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        应用程序：layout\u constraintLeft\u toRightOf=“@id/textview1”
        android:text=“AbhiAndroid”/>
</android。支持限制ConstraintLayout>

重要提示： 若要在ConstraintLayout中定义视图的位置，必须至少向视图添加一个水平约束和一个垂直约束。每个约束定义视图沿纵轴或横轴的位置；因此，每个视图的每个轴必须至少有一个约束，但通常需要更多约束。有几种类型的限制。具体而言，以下是可用于设置相对于其他项目的位置的一些限制：

layout\U constraintLeft\U toLeftOf布局： 元素的左边框相对于另一个元素的左边框定位

layout\u constraintLeft\u toRightOf布局： 元素的左边框相对于另一个元素的右边框定位

layout\U constraintRight\U toLeftOf布局： 元素的右边框相对于另一个元素的左边框定位

layout\U constraintRight\U toRightOf布局： 元素的右边框相对于另一个元素的右边框定位。

ConstraintLayout中的链：

链允许我们控制元素之间的空间，并将所有选定元素链接到另一个元素。

要创建链，请选择要构成链一部分的元素，然后右键单击–“链”–“创建水平或垂直链”。

不同的可用链样式有spread、spread\u inside和packed。

您可以同时进行水平链或垂直链。

The XML 创建链的不同之处在于，所有视图都定义了约束，并且 第一项 在链中指定链样式。

以下是示例 XML 约束布局中使用链的代码

<?xml版本=“1.0”编码=“utf-8”？>
<android。支持限制ConstraintLayout xmlns：android=”http://schemas.android.com/apk/res/android"
    xmlns：应用程序=“http://schemas.android.com/apk/res-auto"
    xmlns：工具=”http://schemas.android.com/tools"
    android:layout\u width=“匹配父项”
    android:layout\u height=“match\u parent”
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="81dp">

    <按钮
        android:id=“@+id/按钮5”
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:layout\u marginBottom=“8dp”
        android:layout_marginTop="8dp"
        android:text="Button"
        应用程序：layout\u constraintBottom\u toBottomOf=“父”
        应用程序：layout\u constraintEnd\u toStartOf=“@+id/按钮6”
        应用：layout\u constraintHorizontal\u bias=“0.5”
        app:layout\u constraintHorizontal\u chainStyle=“排列”
        app:layout_constraintStart_toStartOf="parent"
        应用程序：layout\u constraintTop\u toTopOf=“父”/>

    <按钮
        android:id=“@+id/按钮6”
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:layout\u marginBottom=“8dp”
        android:layout_marginTop="8dp"
        android:text="Button"
        应用程序：layout\u constraintBottom\u toBottomOf=“父”
        应用程序：layout\u constraintEnd\u toEndOf=“父”
        应用：layout\u constraintHorizontal\u bias=“0.5”
        应用程序：layout\u constraintStart\u toEndOf=“@+id/按钮5”
        应用程序：layout\u constraintTop\u toTopOf=“父”/>
</android。支持限制ConstraintLayout>

使用ConstraintLayout中的布局设计准则

在设计应用程序布局时，可以使用指南定义任何垂直或水平指南。这将帮助您将视图与参考线进行约束连接，并在设计布局时牢记参考线。

重要提示： 更改基准线的边距或百分比时，也会自动更改所有连接视图的边距或百分比。

ConstraintLayout中的维度百分比：

The 百分比 constraint Width\u default的值，允许我们将小部件设置为占用一定百分比的可用空间。

<!-- 小部件将占用80%的可用空间-->

app:layout\u constraintWidth\u default=“百分比”
app:layout_constraintWidth_percent="0.8"

Barriers In ConstraintLayout:

The Barriers usually avoid one or more widgets/elements to bypass it. When a widget tries to pass through it, the Barrier will move itself, and avoiding the widget to be placed above it.

Below is the example XML code of using Barriers in ConstraintLayout

<?xml版本=“1.0”编码=“utf-8”？>
<android。支持限制ConstraintLayout xmlns：android=”http://schemas.android.com/apk/res/android"
    xmlns：应用程序=“http://schemas.android.com/apk/res-auto"
    xmlns：工具=”http://schemas.android.com/tools"
    android:layout\u width=“匹配父项”
    android:layout\u height=“match\u parent”
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="81dp">


    <按钮
        android:id="@+id/button13"
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintStart_toStartOf="parent"
        应用程序：layout\u constraintTop\u toTopOf=“父”/>

    <文本视图
        android:id="@+id/textView8"
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Barriers avoid overlapping of elements"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button13" />

    

    <按钮
        android:id="@+id/button14"
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:layout_marginStart="8dp"
        android:text="Button"
        app:layout_constraintStart_toEndOf="@+id/barrier8"
        tools:layout_editor_absoluteY="34dp" />
</android。支持限制ConstraintLayout>

Group In ConstraintLayout:

Group in android helps to carry out some actions on a set of widgets with the most common case being to control the visibility of a collection of widgets.

When faced with this scenario, the most common solution was to maintain yourself a list or set of views inside the Activity or Fragment, or even adding a ViewGroup and put all the views inside of it, then control the visibility of the container. Now to carry out the action on the views, you only need to add their ids as the referenced ids in the group, and group in the ConstraintLayout will propagate the actions to all plugged views.

In the below XML example code of using Groups in ConstraintLayout, we have set visibility to invisible of two 按钮:

<?xml版本=“1.0”编码=“utf-8”？>
<android。支持限制ConstraintLayout xmlns：android=”http://schemas.android.com/apk/res/android"
    xmlns：应用程序=“http://schemas.android.com/apk/res-auto"
    xmlns：工具=”http://schemas.android.com/tools"
    android:layout\u width=“匹配父项”
    android:layout\u height=“match\u parent”
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="81dp">


    <按钮
        android:id="@+id/button15"
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:text="Button"
        tools:layout_editor_absoluteX="44dp"
        tools:layout_editor_absoluteY="28dp" />

    <按钮
        android:id="@+id/button16"
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:text="Button"
        tools:layout_editor_absoluteX="89dp"
        tools:layout_editor_absoluteY="118dp" />

    <android。支持限制组
        android:id=“@+id/组”
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android：可见性=“不可见”
        app:constraint\u referenced\u id=“button16，button15”/>
</android。支持限制ConstraintLayout>

Android Studio中的约束布局示例：

下面我们在Constraint Layout中设计简单的登录屏幕。我们曾经 ImageView, EditText, 按钮 和文本视图，用于设计以下布局。

步骤1： 创建新项目 ConstraintLayout和activity主活动。在此，我们将创建约束布局：

<?xml版本=“1.0”编码=“utf-8”？>
<android。支持限制ConstraintLayout xmlns：android=”http://schemas.android.com/apk/res/android"
    xmlns：应用程序=“http://schemas.android.com/apk/res-auto"
    xmlns：工具=”http://schemas.android.com/tools"
    android:id=“@+id/constraintLayout”
    android:layout\u width=“匹配父项”
    android:layout\u height=“match\u parent”
    android：背景=“#80C938”>

</android。支持限制ConstraintLayout>

第2步： 添加其他视图(图像视图, 编辑文本，按钮和文本视图），通过向其添加水平和垂直约束：

<图像视图
android:layout\u width=“146dp”
android:layout\u height=“100dp”
android:src=“@可绘制/abhi\u android”
android:id=“@+id/图像视图”
android:layout\u marginTop=“96dp”
应用程序：layout\u constraintTop\u toTopOf=“父”
android:layout\u marginEnd=“16dp”
应用程序：layout\u constraintRight\u toRightOf=“父”
android:layout\u marginRight=“16dp”
android:layout\u margintart=“16dp”
应用程序：layout\u constraintLeft\u toLeftOf=“父”
android:layout\u marginLeft=“16dp”/>

<编辑文本
android:layout\u width=“包装内容”
android:layout\u height=“包装内容”
android:inputType=“textPersonName”
android:ems=“10”
android:id=“@+id/编辑文本”
android:layout\u margintart=“16dp”
android：padding=“12dp”
应用程序：layout\u constraintLeft\u toLeftOf=“父”
android:layout\u marginLeft=“16dp”
android:layout\u marginEnd=“16dp”
应用程序：layout\u constraintRight\u toRightOf=“父”
android:layout\u marginRight=“16dp”
android:hint=“电子邮件”
android:background=“#ffffff”
android:layout\u marginTop=“232dp”
应用程序：layout\u constraintTop\u toTopOf=“父”/>

<编辑文本
android:layout\u width=“包装内容”
android:layout\u height=“包装内容”
android:inputType=“textPassword”
android:ems=“10”
android:id=“@+id/编辑文本2”
android：padding=“12dp”
android:background=“#ffffff”
android:layout\u marginEnd=“16dp”
应用程序：layout\u constraintRight\u toRightOf=“父”
android:layout\u marginRight=“16dp”
android:layout\u margintart=“16dp”
应用程序：layout\u constraintLeft\u toLeftOf=“父”
android:layout\u marginLeft=“16dp”
android:hint=“密码”
android:layout\u marginTop=“304dp”
应用程序：layout\u constraintTop\u toTopOf=“父”/>

<按钮
android:text=“登录”
android:layout\u width=“包装内容”
android:layout\u height=“包装内容”
android:background=“#00773F”
android:id=“@+id/按钮1”
android:layout\u margintart=“16dp”
android:paddingLeft=“30dp”
android:paddingRight=“30dp”
android:textColor=“#ffffff”
应用程序：layout\u constraintLeft\u toLeftOf=“父”
android:layout\u marginLeft=“16dp”
android:layout\u marginEnd=“16dp”
应用程序：layout\u constraintRight\u toRightOf=“父”
android:layout\u marginRight=“16dp”
android:layout\u marginTop=“408dp”
应用程序：layout\u constraintTop\u toTopOf=“父”/>

<文本视图
android:text=“没有帐户？”
android:layout\u width=“包装内容”
android:layout\u height=“包装内容”
android:id=“@+id/textView”
android:layout\u marginEnd=“16dp”
应用程序：layout\u constraintRight\u toRightOf=“父”
android:layout\u marginRight=“16dp”
android:layout\u margintart=“16dp”
android:textColor=“#aaffffff”
应用程序：layout\u constraintLeft\u toLeftOf=“父”
android:layout\u marginLeft=“16dp”
android:layout\u marginTop=“480dp”
应用程序：layout\u constraintTop\u toTopOf=“父”/>

步骤3： 简单约束布局示例的完整xml代码：

<?xml版本=“1.0”编码=“utf-8”？>
<android。支持限制ConstraintLayout xmlns：android=”http://schemas.android.com/apk/res/android"
    xmlns：应用程序=“http://schemas.android.com/apk/res-auto"
    xmlns：工具=”http://schemas.android.com/tools"
    android:id=“@+id/constraintLayout”
    android:layout\u width=“匹配父项”
    android:layout\u height=“match\u parent”
    android：背景=“#80C938”>

<图像视图
        android:layout\u width=“146dp”
        android:layout\u height=“100dp”
        android:src=“@可绘制/abhi\u android”
        android:id=“@+id/图像视图”
        android:layout\u marginTop=“96dp”
        应用程序：layout\u constraintTop\u toTopOf=“父”
        android:layout\u marginEnd=“16dp”
        应用程序：layout\u constraintRight\u toRightOf=“父”
        android:layout\u marginRight=“16dp”
        android:layout\u margintart=“16dp”
        应用程序：layout\u constraintLeft\u toLeftOf=“父”
        android:layout\u marginLeft=“16dp”/>

    <编辑文本
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:inputType=“textPersonName”
        android:ems=“10”
        android:id=“@+id/编辑文本”
        android:layout\u margintart=“16dp”
        android：padding=“12dp”
        应用程序：layout\u constraintLeft\u toLeftOf=“父”
        android:layout\u marginLeft=“16dp”
        android:layout\u marginEnd=“16dp”
        应用程序：layout\u constraintRight\u toRightOf=“父”
        android:layout\u marginRight=“16dp”
        android:hint=“电子邮件”
        android:background=“#ffffff”
        android:layout\u marginTop=“232dp”
        应用程序：layout\u constraintTop\u toTopOf=“父”/>

    <编辑文本
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:inputType=“textPassword”
        android:ems=“10”
        android:id=“@+id/编辑文本2”
        android：padding=“12dp”
        android:background=“#ffffff”
        android:layout\u marginEnd=“16dp”
        应用程序：layout\u constraintRight\u toRightOf=“父”
        android:layout\u marginRight=“16dp”
        android:layout\u margintart=“16dp”
        应用程序：layout\u constraintLeft\u toLeftOf=“父”
        android:layout\u marginLeft=“16dp”
        android:hint=“密码”
        android:layout\u marginTop=“304dp”
        应用程序：layout\u constraintTop\u toTopOf=“父”/>

    <按钮
        android:text=“登录”
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:background=“#00773F”
        android:id=“@+id/按钮1”
        android:layout\u margintart=“16dp”
        android:paddingLeft=“30dp”
        android:paddingRight=“30dp”
        android:textColor=“#ffffff”
        应用程序：layout\u constraintLeft\u toLeftOf=“父”
        android:layout\u marginLeft=“16dp”
        android:layout\u marginEnd=“16dp”
        应用程序：layout\u constraintRight\u toRightOf=“父”
        android:layout\u marginRight=“16dp”
        android:layout\u marginTop=“408dp”
        应用程序：layout\u constraintTop\u toTopOf=“父”/>

    <文本视图
        android:text=“没有帐户？”
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:id=“@+id/textView”
        android:layout\u marginEnd=“16dp”
        应用程序：layout\u constraintRight\u toRightOf=“父”
        android:layout\u marginRight=“16dp”
        android:layout\u margintart=“16dp”
        android:textColor=“#aaffffff”
        应用程序：layout\u constraintLeft\u toLeftOf=“父”
        android:layout\u marginLeft=“16dp”
        android:layout\u marginTop=“480dp”
        应用程序：layout\u constraintTop\u toTopOf=“父”/>


</android。支持限制ConstraintLayout>

输出：

现在在设计模式下查看布局，以查看使用约束布局创建的简单登录屏幕的布局。

关于约束布局的要点：

要使用ConstraintLayout，
i、 您的Android Studio版本必须为2.3或更高版本。
二。你必须先 包括 ConstraintLayout的支持库。
iii.必须至少有一个垂直约束和一个水平约束。

总之，ConstraintLayout是在Android UI中设计大型美观布局的更快、更好、更高效的选择。

DOWNLOAD THIS FREE eBook!

This free eBook will help you master the learning of Android App Development in Android Studio!

Name

Email

Subscribe & Download eBook Now >>