介绍
约束布局ConstraintLayout?是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。从?Android Studio 2.3?起，官方的模板默认使用?ConstraintLayout。
ConstraintLayout官方文档
解析ConstraintLayout的性能优势
ConstraintLayout拖拽
使用
1 相对定位
下面来看看相对定位的常用属性：
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
2 角度定位
在约束布局中，大多数约束由屏幕尺寸指定——水平和垂直。在约束布局 1.1 版本中，有一个新的类型约束constraintCircle，它允许指定沿着一个圆形进行约束。不必提供水平和垂直边距，而是指定圆的角度和半径。这对于像径向菜单这样的角度偏移的视图将非常有用
创建圆形约束时，角度从顶部开始并顺时针进行，指的是可以用一个角度和一个距离来约束两个空间的中心
android:id="@+id/tv_1"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/shape_red_circle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
/>
android:id="@+id/tv_2"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/shape_red_circle"
app:layout_constraintCircle="@id/tv_1"
app:layout_constraintCircleRadius="50dp"
app:layout_constraintCircleAngle="270"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
/>
android:id="@+id/tv_3"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/shape_red_circle"
app:layout_constraintCircle="@id/tv_1"
app:layout_constraintCircleRadius="50dp"
app:layout_constraintCircleAngle="315"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
/>
android:id="@+id/tv_4"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/shape_red_circle"
app:layout_constraintCircle="@id/tv_1"
app:layout_constraintCircleRadius="50dp"
app:layout_constraintCircleAngle="360"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
/>
3 边距
ConstraintLayout的边距常用属性如下：
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
看起来跟别的布局没有什么差别，但实际上控件在ConstraintLayout里面要实现margin，必须先约束该控件在ConstraintLayout里的位置
goneMargin
goneMargin主要用于约束的控件可见性被设置为gone的时候使用的margin值，属性如下：
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
当控件设为GONE时，被认为尺寸为0。可以理解为布局上的一个点。?
若GONE的控件对其它控件有约束，则约束保留并生效。
示例：
有三个TextView，三个都展示时每个中间是没有距离的，但是只展示两个的时候希望两个中间有距离
android:id="@+id/tv_1"
android:layout_width="90dp"
android:layout_height="50dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="20dp"
android:background="@color/c4f5992"
android:gravity="center"
android:text="text1"
android:textColor="@color/c010"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
android:id="@+id/tv_2"
android:layout_width="90dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@color/ccb"
android:gravity="center"
android:visibility="gone"
android:text="text2"
android:textColor="@color/c004"
app:layout_constraintLeft_toRightOf="@id/tv_1"
app:layout_constraintTop_toTopOf="parent" />
android:id="@+id/tv_3"
android:layout_width="90dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@color/c_order_red"
android:gravity="center"
android:text="text3"
android:textColor="@color/c004"
app:layout_constraintLeft_toRightOf="@id/tv_2"
app:layout_constraintTop_toTopOf="parent"
app:layout_goneMarginLeft="20dp" />
4 偏移
layout_constraintHorizontal_bias 水平偏移
layout_constraintVertical_bias 垂直偏移
android:id="@+id/tv_1"
android:layout_width="90dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@color/c4f5992"
android:gravity="center"
android:text="text1"
android:textColor="@color/c010"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
偏移仅限控件的约束左右或者上下约束为parent，范围为 0-1
5 尺寸约束
控件的尺寸可以通过四种不同方式指定：
使用指定的尺寸
使用wrap_content，让控件自己计算大小
当控件的高度或宽度为wrap_content时，可以使用下列属性来控制最大、最小的高度或宽度：
android:minWidth 最小的宽度
android:minHeight 最小的高度
android:maxWidth 最大的宽度
android:maxHeight 最大的高度
注意！当ConstraintLayout为1.1版本以下时，使用这些属性需要加上强制约束，如下所示：
app:constrainedWidth=”true”
app:constrainedHeight=”true”
当一个控件设为wrap_content时，再添加约束尺寸是不起效果的。如需生效，需要设置上边属性为true:
使用 0dp (MATCH_CONSTRAINT)
官方不推荐在ConstraintLayout中使用match_parent，可以设置 0dp (MATCH_CONSTRAINT) 配合约束代替match_parent
layout_constraintWidth_default
layout_constraintHeight_default
只有在View的宽度定义为0dp的时候才生效，其余情况下设置这个属性是不起任何作用的。
layout_constraintWidth_default有三个值：wrap、spread和percent。
wrap：等价于android:layout_width="wrap_content" ，自适应大小，但又不超过约束条件下的最大尺寸，常用在Toolbar中间的标题设置。
spread：等价于android:layout_width="match_parent"，此模式为默认模式，表示约束条件下的最大尺寸
percent：设置View的宽度为parent的比例值，比例值默认是100%，即宽度是match_parent。这个比例值通过属性app:layout_constraintWidth_percent设置。
layout_constraintWidth_percent
layout_constraintHeight_percent
当且仅当View的宽度为0dp并且app:layout_constraintWidth_default的属性值为percent时才起作用。它的值范围是0-1，默认是1即100%，表示View的宽高占parent的比例值。
宽高比
当宽或高至少有一个尺寸被设置为0dp时，可以通过属性layout_constraintDimensionRatio设置宽高比
android:id="@+id/tv_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@color/c4f5992"
app:layout_constraintDimensionRatio="1"
android:gravity="center" android:textColor="@color/c010"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
除此之外，在设置宽高比的值的时候，还可以在前面加W或H，分别指定宽度或高度限制。 例如：
app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3
app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3
6 链
如果两个或以上控件通过下图的方式约束在一起，就可以认为是他们是一条链（图为横向的链，纵向同理）。
第一个控件是这个链条的头head，可以在head里设置链条的样式layout_constraintHorizontal_chainStyle
packed
spread
spread_inside
也可以设置权重，有点类似于线性布局中的weight,设置权重
android:id="@+id/tv_1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@color/c4f5992"
android:gravity="center"
android:text="text1"
android:textColor="@color/c010"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/tv_2"
app:layout_constraintTop_toTopOf="parent"
/>
android:id="@+id/tv_2"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@color/ccb"
android:gravity="center"
app:layout_constraintHorizontal_weight="2"
android:text="text2"
android:textColor="@color/c004"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintLeft_toRightOf="@id/tv_1"
app:layout_constraintRight_toLeftOf="@id/tv_3"
app:layout_constraintTop_toTopOf="parent" />
android:id="@+id/tv_3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@color/c_order_red"
android:gravity="center"
app:layout_constraintHorizontal_weight="3"
android:text="text3"
android:textColor="@color/c004"
app:layout_constraintLeft_toRightOf="@id/tv_2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_goneMarginLeft="20dp" />
7 Barrier
屏障
如图，有三个控件，3在1和2的右边，1和2的宽度都不一定，不知道是谁比较宽，这时候可以用屏障，Barrier可以在多个控件的一侧建立一个屏障
app:barrierDirection为屏障所在的位置，可设置的值有：bottom、end、left、right、start、top
app:constraint_referenced_ids为屏障引用的控件，可设置多个(用“,”隔开)
<TextView
android:id="@+id/tv_1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@color/c4f5992"
android:gravity="center"
android:text="text111111111111111"
android:textColor="@color/c010"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
android:id="@+id/tv_2"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@color/ccb"
android:gravity="center"
android:text="text2"
android:textColor="@color/c004"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/tv_3"
app:layout_constraintTop_toBottomOf="@id/tv_1" />
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="right"
app:constraint_referenced_ids="tv_1, tv_2"/>
android:id="@+id/tv_3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@color/c_order_red"
android:gravity="center"
android:text="text3"
android:textColor="@color/c004"
app:layout_constraintLeft_toRightOf="@id/barrier"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_goneMarginLeft="20dp" />
8 ?Group
Group可以把多个控件归为一组，方便隐藏或显示一组控件?
constraint_referenced_ids
假设有三个控件，想让 1跟3 不展示
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="tv_1,tv_3"
/>
但是group只适合用于同时控制显隐，如果情况是又有同时显隐，又有单独一个或者几个显隐，用了group之后控制就会失效（group里的控件必须显隐一致）
9 Guideline
Guildline像辅助线一样，在预览的时候帮助你完成布局（不会显示在界面上）。
Guildline的主要属性：
android:orientation 垂直vertical，水平horizontal
layout_constraintGuide_begin 开始位置
layout_constraintGuide_end 结束位置
layout_constraintGuide_percent 距离顶部的百分比(orientation = horizontal时则为距离左边)
代码中设置ConstraintLayout?
通过ConstraintSet来设置相关属性
此类允许你在代码中定义与ConstraintLayout一起使用的约束。而使用这个类的方法非常简单，你需要新建这个类，并操作这个类：
?c = new ConstraintSet();
c.connect(....);
?或者先从你的布局中把布局约束先克隆出来，再操作这个布局约束的克隆体：
c.clone(context, R.layout.layout1);
或者
c.clone(clayout);
这里有个地方一定要注意，你克隆出来的布局约束是“克隆的”，你之后对这个克隆约束的任何改变都是建立在之前的约束之上的，如果你要清空之前的约束，可以使用
c.clear(int viewId);
把ConstraintSet克隆或者创建出来之后，我们该如何对这个对象进行设置操作呢？举个例子，如果想让textView的右边界向整个父容器的右边界对齐，那么可以这样写：
c.connect(textView.getId(),ConstraintSet.RIGHT,ConstraintSet.PARENT_ID,ConstraintSet.RIGHT);
如果想在右边界添加间隔呢？可以这样写：
c.connect(textView.getId(),ConstraintSet.RIGHT,ConstraintSet.PARENT_ID,ConstraintSet.RIGHT,10);
如果再想将它的上边界约束向button的下边界对齐呢？
c.connect(textView.getId(),ConstraintSet.TOP,button.getId(),ConstraintSet.BOTTOM);
跟ConstraintLayout在xml中的约束不同,?ConstraintSet的约束操作只用了这个方法——connect:
connect(int startID,?int startSide,?int endID,?int endSide,?int margin)
startID就是你要约束的控件ID，startSide为他要约束的边界，而endID则是你的约束条件控件的ID，endSide为它的边界，margin自然就是间隔了。
ConstraintSet还能方便地设置你控件的宽高:
constrainHeight(int viewId,?int height)
constrainWidth(int viewId,?int width)
当我们设置好控件的约束，如何将该约束应用呢？同样非常简单：
c.applyTo(mConstraintLayout);
注意
可能遇到的情况：
1 横排并列的两个控件，左边的自适应大小，右边的挨着左边，但是左边的控件过长的时候回自动折行，不要把右边的挤出屏幕外
<-------------------------------------------->
android:id="@+id/tv_1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@color/c4f5992"
android:text="text1text1text1text1texttext1text1text1text1texttext1text1text1text1texttext1text1text1text1text"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@id/tv_3"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintWidth_default="wrap"
/>
android:id="@+id/tv_3"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@color/c_order_red"
android:gravity="center"
app:layout_constraintHorizontal_bias="0"
android:text="text3"
android:textColor="@color/c004"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="@id/tv_1"
app:layout_constraintTop_toTopOf="parent"
/>
<------------------------------------------→
android:id="@+id/name_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:textColor="@color/c002"
android:textStyle="bold"
tools:text="大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝大宝贝"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/svg_vip_img"
app:layout_constraintTop_toTopOf="parent" />
android:id="@+id/svg_vip_img"
android:layout_width="42dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:text="3233"
app:layout_constraintLeft_toRightOf="@+id/name_tv"
app:layout_constraintTop_toTopOf="@+id/name_tv"
app:layout_constraintBottom_toBottomOf="@+id/name_tv"
app:layout_constraintRight_toRightOf="parent"
/>
? //完整布局可以直接使用
? ? android:id="@+id/related_invoice_layout"
? ? android:layout_width="match_parent"
? ? android:layout_height="wrap_content"
? ? app:layout_constraintLeft_toLeftOf="parent"
? ? app:layout_constraintRight_toRightOf="parent"
? ? android:layout_marginRight="12dp"
? ? android:layout_marginLeft="12dp"
? ? android:background="@drawable/index_white_corner_all_6dp"
? ? android:visibility="visible">
? ? ? ? android:layout_marginLeft="@dimen/dimen_12"
? ? ? ? android:id="@+id/iv_card"
? ? ? ? android:visibility="visible"
? ? ? ? android:layout_width="@dimen/dimen_18"
? ? ? ? android:layout_height="@dimen/dimen_30"
? ? ? ? android:src="@drawable/invoice_mini_icon"
? ? ? ? app:layout_constraintBottom_toBottomOf="@+id/related_invoice_title"
? ? ? ? app:layout_constraintStart_toStartOf="parent"
? ? ? ? app:layout_constraintTop_toTopOf="@+id/related_invoice_title" />
? ? ? ? android:id="@+id/related_invoice_title"
? ? ? ? android:layout_width="0dp"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_marginTop="20dp"
? ? ? ? android:layout_marginLeft="@dimen/dimen_8"
? ? ? ? android:lines="1"
? ? ? ? android:ellipsize="end"
? ? ? ? android:text="text1text1text1text1texttext1text1text1text1text"
? ? ? ? app:layout_constraintLeft_toRightOf="@id/iv_card"
? ? ? ? app:layout_constraintTop_toTopOf="parent"
? ? ? ? android:textSize="16sp"
? ? ? ? app:layout_constraintRight_toLeftOf="@id/related_invoice_etmark"
? ? ? ? app:layout_constraintHorizontal_bias="0"
? ? ? ? app:layout_constraintHorizontal_chainStyle="packed"
? ? ? ? app:layout_constraintWidth_default="wrap"
? ? ? ? />
? ? ? ? android:id="@+id/related_invoice_etmark"
? ? ? ? android:layout_width="@dimen/dimen_14"
? ? ? ? android:layout_marginRight="@dimen/dimen_8"
? ? ? ? android:layout_height="@dimen/dimen_14"
? ? ? ? android:layout_marginTop="20dp"
? ? ? ? app:layout_constraintHorizontal_bias="0"
? ? ? ? android:src="@drawable/icon_dian"
? ? ? ? android:layout_marginLeft="@dimen/dimen_8"
? ? ? ? app:layout_constraintRight_toLeftOf="@+id/related_invoice_money"
? ? ? ? app:layout_constraintLeft_toRightOf="@id/related_invoice_title"
? ? ? ? app:layout_constraintTop_toTopOf="parent"
? ? ? ? app:layout_constraintBottom_toBottomOf="@id/related_invoice_title"
? ? ? ? />
? ? ? ? android:id="@+id/related_invoice_money"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:textColor="@color/color_333333"
? ? ? ? android:textSize="16sp"
? ? ? ? app:layout_constraintTop_toTopOf="@id/related_invoice_title"
? ? ? ? app:layout_constraintBottom_toBottomOf="@id/related_invoice_title"
? ? ? ? app:layout_constraintRight_toRightOf="parent"
? ? ? ? android:layout_marginRight="24dp"
? ? ? ? android:layout_marginLeft="@dimen/dimen_8"
? ? ? ? tools:text="300.00"
? ? ? ? />
? </androidx.constraintlayout.widget.ConstraintLayout>