ConstraintLayout学习笔记

1.导入约束布局

在app/build.gradle文件中加入以下代码

...
repositories {
    maven {
        url 'https://maven.google.com'
    }
}
...
dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.1.0-beta2'
}

以下例子都基于 1.1-beta2版本

2.使用

Relative Positioning

ConstraintLayout具备相对布局的能力，这点和RelativeLayout类似，但是ConstraintLayout提供的能力更加强大一些。

layout_constraintSideA_toSideBOf

这个属性的作用主要看 SideA 和 SideB，并且这个属性除了可以用 @+id/ 指定要约束的 View 以外，还可以直接填 parent，指定当前 View 的约束对象为父容器。

属性名称	作用
layout_constraintLeft_toLeftOf	将当前View的左侧与指定View的左侧对齐
layout_constraintLeft_toRightOf	将当前View的左侧与指定View的右侧对齐
layout_constraintRight_toLeftOf	将当前View的右侧与指定View的左侧对齐
layout_constraintRight_toRightOf	将当前View的右侧与指定View的右侧对齐
layout_constraintTop_toTopOf	将当前View的顶部与指定View的顶部对齐
layout_constraintTop_toBottomOf	将当前View的顶部与指定View的底部对齐
layout_constraintBottom_toTopOf	将当前 View 的底部与指定 View 的顶部对齐
layout_constraintBottom_toBottomOf	将当前 View 的底部与指定 View 的底部对齐
layout_constraintBaseline_toBaselineOf	将当前 View 的基准线与指定 View 的基准线对齐,Baseline 只对 TextView 及其子类有效
layout_constraintStart_toEndOf	将当前 View 的左侧与指定 View 的右侧对齐
layout_constraintStart_toStartOf	将当前 View 的左侧与指定 View 的左侧对齐
layout_constraintEnd_toStartOf	将当前 View 的右侧与指定 View 的左侧对齐
layout_constraintEnd_toEndOf	将当前 View 的右侧与指定 View 的右侧对齐

Margin

在 ConstraintLayout 中，layout_margin 及其子属性的作用都被覆写了，margin 属性只对其相约束的 View 起作用。

举个栗子

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

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#cccccc"
        android:text="TextView1" />
    
    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#cccccc"
        android:layout_marginLeft="20dp"
        android:text="TextView2"
        app:layout_constraintLeft_toRightOf="@+id/text1" />
</android.support.constraint.ConstraintLayout>

在布局文件中，我们设置了 TextView2 在 TextView1 的右侧，并且左间距为20dp，实现效果如下。

效果图

假如我们把

app:layout_constraintLeft_toRightOf="@+id/text1"

这句话去掉，那么 margin 属性就不会生效了。

效果图

ConstraintLayout 还提供了另外一种间距效果。

Gone Margin

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

gone margin 只在当前 View 指定的约束目标为 GONE 时才生效。

居中操作

假如想要让一个 View 居中，那么我们可以如下操作:

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>
</android.support.constraint.ConstraintLayout>

即指定当前 View 和父容器左对齐且右对齐，那么这个 View 就会居中。

Bias

layout_constraintHorizontal_bias 浮点数,从0到1，View 必须设置了左右约束才生效
layout_constraintVertical_bias 浮点数,从0到1,View 必须设置了上下约束才生效

当我们指定当前 View 和父容器左对齐且右对齐时，默认情况下，这个 View 会居中。约束布局提供了一个 bias 属性，默认值 0.5，所以 View 是居中的，(假设是Horizontal_bias)假如我们将 bias 设为 0，那么这个 View 将会居左，同理，如果 bias 设为 1，那么这个 View 将会居右。

Circular positioning

约束布局提供了一个环形定位的功能，有以下三个属性:

layout_constraintCircle @+id/xxx,设置目标 View
layout_constraintCircleRadius 设置两个View的中心的距离
layout_constraintCircleAngle 设置当前View的中心与目标View的中心的连线与Y轴方向的夹角，从0-360

环形定位示意图1

环形定位示意图2

Dimensions constraints

约束布局中的子View有三种设置尺寸的方式

wrap_content
xdp,x为具体的数值
0dp，0dp代表 MATCH_CONSTRAINT

这里的 wrap_content 和 xdp 跟其他布局的表现效果是一样的，至于 0dp 的效果，按其 MATCH_CONSTRAINT 的字面意思理解，匹配约束，这里举个例子。

例子1

<?xml version="1.0" encoding="utf-8"?>
<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/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:textColor="#ffffff"
        android:text="TextView2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

这里 TextView 的宽度为 wrap_content,根据之前讲过的 RelativePositioning，这个 View 会居中显示，如果这里我们把宽度设为 0dp，即 MATCH_CONSTRAINT,那么实现效果如下:

image.png

可以看到，View 的宽度是整个父容器的宽度。

例子2

<?xml version="1.0" encoding="utf-8"?>
<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/text1"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"
        android:text="TextView1"
        android:textColor="#ffffff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:text="TextView2"
        android:textColor="#ffffff"
        app:layout_constraintBottom_toBottomOf="@+id/text1"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

效果图如下:

image.png

TextView2 的底部和 TextView1 的底部对齐，顶部和父容器的顶部对齐，如果 layout_height 是 wrap_content 的话，此时TextView2 高度是文字的高度，然后位置是居中的(在父容器顶部到 TextView1 底部之间居中)，但是这里设置了0dp(MATCH_CONSTRAINT)，所以TextView2 的高度被拉伸，填满了整个约束的范围。

WRAP_CONTENT : enforcing constraints

如果一个 View 的尺寸被设置为wrap_content，那么当 View 的内容太多时，可能会超出约束规定的范围，约束布局提供了两种属性给我们限制 View 的尺寸:

app:layout_constrainedWidth="true|false",默认为false
app:layout_constraintedHeight="true|false",默认为false

例子

<?xml version="1.0" encoding="utf-8"?>
<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/text1"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"
        android:text="TextView1"
        android:textColor="#ffffff"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="50dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:text="TextView2\nTextView2\nTextView2\nTextView2\nTextView2\nTextView2"
        android:textColor="#ffffff"
        app:layout_constraintVertical_bias="0"
        app:layout_constrainedHeight="false"
        app:layout_constraintBottom_toTopOf="@+id/text1"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

在本例中，TextView2 高度为 WRAP_CONTENT 底部与 TextView1 的顶部对齐，顶部和父容器顶部对齐，并且贴紧顶部(bias=0)。由于内容较多，高度超出了约束规定的范围，即 TextView2 的底部超出了 TextView1 的顶部的位置，如下图。

app:layout_constrainedHeight="false"

如果我们设置 app:layout_constrainedHeight="true",那么 TextView2 的底部的将会被限制在 TextView1 顶部的位置，如下图:

app:layout_constrainedHeight="true"

layout_constrainedWidth 的作用也是类似的，这里不再赘述。

MATCH_CONSTRAINT dimensions

当 View 的宽或者高设置了 MATCH_CONSTRAINT 之后，View 的尺寸会填充满整个约束范围内的可用空间。约束布局提供了一些属性来决定 View 的尺寸:

属性名称	作用
layout_constraintWidth_min	View的最小宽度
layout_constraintHeight_min	View的最小高度
layout_constraintWidth_max	View的最大宽度
layout_constraintHeight_max	View的最大高度
layout_constraintWidth_percent	View的宽度占父容器的百分比,浮点数
layout_constraintHeight_percent	View的高度占父容器的百分比,浮点数
layout_constraintWidth_default	View的宽度模式,共有三种 percent/wrap/spread,默认为spread
layout_constraintHeight_default	View的高度模式,共有三种 percent/wrap/spread,默认为spread

接下来具体说明一下属性的使用

属性介绍

前文说过，View的尺寸有三种模式

具体数值
wrap_content
MATCH_CONSTRAINT

这三种模式需要配合 layout_constraintWidth_default(这里只介绍宽度，高度是相同的运作方式)属性使用，具体数值和 wrap_content 优先级最高，不管 default 属性是什么都生效;MATCH_CONSTRAINT 只在 percent 或者 spread 模式下生效。
如果要使用 layout_constraintWidth_percent 属性，那么 default 需要设置为 percent，并且宽度需要设置为 MATCH_CONSTRAINT。

Ratio

约束布局提供了一个 ratio 属性，顾名思义，宽高的比例。通过这个属性，我们可以限制 View 的宽高之间的比例，比如设置成 1:1，那么 View 的尺寸就是个正方形了。ratio 的值可以是浮点数，也可以是一个比例关系，比如 1:1,前者为宽，后者为高。

使用 Ratio 属性，宽高两个尺寸中至少要有一个是 MATCH_CONSTRAINT。如果宽高都设置为MATCH_CONSTRAINT,那么约束布局会计算出一个满足约束条件和比例的最大的尺寸。

当宽高都是 MATCH_CONSTRAINT 时，ratio 还提供了另外一个功能，我们可以在比例之前加上W或者H，即 W,1:2(宽为2,高为1,即 H:W = 1:2) 或者 H,1:2(高为2,宽为1,即 W:H=1:2)。使用这个功能，我们可以主动限制宽或者高。

举个栗子

<?xml version="1.0" encoding="utf-8"?>
<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">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:text="button"
        android:textColor="#ffffff"
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_max="100dp" />
</android.support.constraint.ConstraintLayout>

这里我们宽高都是 0dp，并且 ratio 为 2:1,宽度最大为 100dp,那么约束布局会计算出一个符合比例并且最大的尺寸，这里我们可以预见，宽是 100dp，高度是宽度的一半。

效果图

假如我们将ratio设置为

app:layout_constraintDimensionRatio="W,2:1"

此时 ratio 的意思是，宽为1，高为2，那么高度就是宽度的两倍。

W,2:1效果图

Chains

约束布局提供了一个链条的功能，当一组View在某个方向上接连的互相存在约束关系时，这组View就形成了一条链条。
下面举个例子

示例

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:text="Chain Head"
        android:textColor="#ffffff"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/text2" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:text="Chain Child1"
        android:textColor="#ffffff"
        app:layout_constraintLeft_toRightOf="@+id/text1"
        app:layout_constraintRight_toLeftOf="@+id/text3" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:text="Chain Child2"
        android:textColor="#ffffff"
        app:layout_constraintLeft_toRightOf="@+id/text2"
        app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

布局预览如下:

布局预览效果

这个例子中，第一个View的左侧与父容器的左侧对齐，并且设置了右边与第二个View的左边对齐;第二个View设置左侧与第一个View的右侧对齐;第三个View先设置了左侧与第二个View的右侧对齐，然后设置了右侧与父容器的右侧对齐。这三个View和父容器相互之前存在约束关系，形成了一条链条。

Chain 的样式属性只需要写在第一个 View 上，如本例的布局文件所示，只有第一个 View 设置了 chainStyle 属性

Chain style

链条的空间分配方式由两个属性决定:

layout_constraintHorizontal_chainStyle 水平链条的样式
layout_constraintVertical_chainStyle 竖直链条的样式

链条共有五种样式，需要配合

layout_constraintHorizontal_weight
layout_constraintVertical_weight
layout_constraintVertical_bias
layout_constraintHorizontal_bias

这四个属性使用。五个样式的效果如下图所示:

ChainStyle示意图

实际效果:

spread

spread效果

spread_inside

spread_inside效果

packed

packed效果

weighted chain
这个模式需要将 View 的宽度设为 MATCH_CONSTRAINT,然后设置layout_constraintHorizontal_weight 的值，这里分别设置1-2-2;只要链中有一个 View 设置了weighted 模式，那么整个可用空间都会被这些 View 占满，这点和线性布局是一致的。

weighted chain

packed chain with bias
这个模式下，chainStyle 设置为 packed,然后设置 bias 偏移来调整 View 的位置，本例中 bias 为0.1

packed chain with bias

Barrier Added in 1.1

A Barrier references multiple widgets as input, and creates a virtual guideline based on the most extreme widget on the specified side. For example, a left barrier will align to the left of all the referenced views.

Barrier，翻译过来就是屏障。它是一个虚拟的辅助控件，可以防止它引用的View的位置超过自己。
Barrier主要涉及到的属性有两个:

app:barrierDirection="left | top | right | bottom | start | end"
app:constraint_referenced_ids="id1,id2,...,idn"

barrierDirection 属性作用

枚举值	作用
left	保证被引用的View的左侧不超过屏障,此时屏障类似一条竖直的线
top	保证被引用的View的顶部不超过屏障,此时屏障类似一条横向的线
right	保证被引用的View的右侧不超过屏障,此时屏障类似一条竖直的线
bottom	保证被引用的View的底部不超过屏障,此时屏障类似一条竖直的线
start	同left
end	同right

示例

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="vertical">
    
    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="text1,text2,button1" />

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:text="TextView1"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@color/colorPrimary"
        android:text="TextView2"
        android:textColor="#ffffff"
        app:layout_constraintTop_toBottomOf="@+id/text1" />

    <View
        android:layout_width="1px"
        android:layout_height="0dp"
        android:background="#000000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="增加TextView2的长度"
        app:layout_constraintTop_toBottomOf="@+id/text2" />
</android.support.constraint.ConstraintLayout>

本例中 Barrier 的 barrierDirection 的值为 right，那么它保证所有被引用的View的右侧不会超过它的位置。
实现效果如下：

Barrier效果图

如图所示，黑色的线为 Barrier 示意图，当 TextView2 的文字增加时，Barrier 的位置也会跟着改变，保证 Barrier 始终跟这三个 View 的最右端对齐。

Group Added in 1.1

This class controls the visibility of a set of referenced widgets. Widgets are referenced by being added to a comma separated list of ids.

Group可以统一管理多个View的显示和隐藏

例子

<?xml version="1.0" encoding="utf-8"?>
<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">
    
    <android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:constraint_referenced_ids="text1,text2"/>
    
    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"
        android:text="TextView1"
        android:textColor="#ffffff"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="50dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:text="TextView2\nTextView2\nTextView2\nTextView2\nTextView2\nTextView2"
        android:textColor="#ffffff"
        app:layout_constraintVertical_bias="0"
        app:layout_constrainedHeight="false"
        app:layout_constraintBottom_toTopOf="@+id/text1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="1:1"/>
</android.support.constraint.ConstraintLayout>

在本例中，我们把 constraint_referenced_ids 设为 text1,text2,那么当我们改变Group 的可见性时，会同时改变 TextView1 和 TextView2 的可见性。

gone

visible

Group支持同时有多个存在，假如有两个Group引用了相同的View，那么在xml中，后一个Group将覆盖前一个Group的可见性。

Guideline

约束布局库提供了一个Guideline类，可见性为Gone，主要作用是充当一个锚点。

Horizontal Guideline 高度为0dp，宽度与父容器等宽
Vertical Guideline 宽度为0dp，高度与父容器等高

Guideline提供了三个属性来设置它的位置

app:layout_constraintGuide_begin —— Guideline距离父容器左边或者顶部的距离
app:layout_constraintGuide_end —— Guideline距离父容器右边或者底部的距离
app:layout_constraintGuide_percent —— Guideline距离父容器左边或者顶部的距离占父容器的宽或者高的百分比

当三个属性都设置时，优先级: percent > end > begin

示例

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="vertical">

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:text="TextView1"
        android:textColor="#ffffff"
        app:layout_constraintBottom_toTopOf="@+id/guideline1"
        app:layout_constraintRight_toLeftOf="@+id/guideline" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:text="TextView2"
        android:textColor="#ffffff"
        app:layout_constraintLeft_toRightOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/guideline1" />

    <View
        android:layout_width="1px"
        android:layout_height="0dp"
        android:background="#000000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:layout_width="0dp"
        android:layout_height="1px"
        android:background="#000000"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline1" />
</android.support.constraint.ConstraintLayout>

效果如下:

guideline效果图

布局中，两个View用来绘制Guideline

PlaceHolder Added in 1.1

A Placeholder provides a virtual object which can position an existing object.

PlaceHolder，顾名思义，占位符，它可以用来放置其他的View。有了这个类，我们可以写一些布局模板。

举个例子

模板布局文件

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

    <android.support.constraint.Placeholder
        android:id="@+id/holder1"
        android:layout_width="60dp"
        android:layout_height="60dp"
        app:content="@+id/left"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/holder2" />

    <android.support.constraint.Placeholder
        android:id="@+id/holder2"
        android:layout_width="60dp"
        android:layout_height="60dp"
        app:content="@+id/middle"
        app:layout_constraintLeft_toRightOf="@+id/holder1"
        app:layout_constraintRight_toLeftOf="@+id/holder3" />

    <android.support.constraint.Placeholder
        android:id="@+id/holder3"
        android:layout_width="60dp"
        android:layout_height="60dp"
        app:content="@+id/right"
        app:layout_constraintLeft_toRightOf="@+id/holder2"
        app:layout_constraintRight_toRightOf="parent" />
</merge>

这里我们使用 tools:parentTag 标签，将其设为约束布局，使得编辑器将当前 merge 标签当做约束布局来预览。

PlaceHolder 的属性我们只需要关心一个 content 即可，这个属性表示的是要填入这个占位符的 View 的 id。当 View 的 id 和 PlaceHolder 的 content 对应时，View 会被移动到 PlaceHolder 的位置。

预览图如下:

模板预览图

主布局文件

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

    <include layout="@layout/template" />

    <ImageView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/middle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />
</android.support.constraint.ConstraintLayout>

实际运行效果：

模板运行效果

参考文章

最后编辑于：2017.12.10 06:14:50

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,723评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,485评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,998评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,323评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,355评论 5赞 374
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,079评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,389评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,019评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,519评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,971评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,100评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,738评论 4赞 324
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,293评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,289评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,517评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,547评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,834评论 2赞 345