ConstraintLayout基本使用
Relative positioning
约束 ：view 在垂直方向 ，或在水平方向，相对于其他view 的关系(相互的)
在这里插入图片描述
相关属性
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
示例 ：
<View
android:id="@+id/test"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_blue_light"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
Centering and Margins
Margins(偏移)
在有约束的情况下才能有效果
效果：
在这里插入图片描述
示例 ：
<View
android:id="@+id/test"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_blue_light"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<View
android:id="@+id/test1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_blue_light"
app:layout_constraintLeft_toRightOf="@+id/test"
android:layout_marginStart="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
margin with gone
当与之相关联的view状态为GONE时如果需要可以使用一下属性设置margin
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
效果 ：
在这里插入图片描述
居中
<Button android:id="@+id/button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
在这里插入图片描述
垂直居中类似
偏移占比 (Bias)
调整view 位置，不仅可以使用居中，margin 等，还可以使用百分比：
layout_constraintHorizontal_bias
layout_constraintVertical_bias
上面两个属性取值范围 [0,1] 0 : 最左 或 最上 ， 1：最右 或 最下
偷个例子：
<Button android:id="@+id/button" ...
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
在这里插入图片描述
Chains
Creating a chain
<View
android:id="@+id/test"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_blue_light"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/test1"
app:layout_constraintBottom_toBottomOf="parent"/>
<View
android:id="@+id/test1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_blue_light"
app:layout_constraintLeft_toRightOf="@+id/test"
android:layout_marginStart="10dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
类似效果：
在这里插入图片描述
Chain Style
在链的第一个元素上设置属性layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle时，链的行为将根据指定的样式更改（默认为spread）
spread : 所有元素分布开
packed ：所有元素在一起
spread_inside : （同spread ）首尾元素除外
在这里插入图片描述
Chain heads
Chain heads 指chain中水平最左，垂直最上的view
Chain margin
上面可以看出，chain 中的左中右的间距都是相同的（平分剩下的空间），当chain 中的view 设置margin 的时候会把除去margin 后剩余空间平分分配 。
效果：
在这里插入图片描述
weightd chain
链的默认行为是在可用空间中平均分布元素。如果一个或多个元素使用MATCH_CONSTRAINT，它们将使用可用的空白空间（在它们之间平均分配）。layout_constraintHorizontal_weight和layout_constraintVertical_weight属性将控制如何使用MATCH_CONSTRAINT在元素之间分配空间。例如，在使用MATCH_CONSTRAINT的包含两个元素的链上，第一个元素使用权重2，第二个元素使用权重1，第一个元素占用的空间将是第二个元素占用的空间的两倍。
例如
<View
android:id="@+id/button1"
android:layout_width="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button2"
app:layout_constraintLeft_toLeftOf="parent"
android:background="@color/colorPrimary"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintRight_toRightOf="parent"
android:layout_height="100dp"/>
<View
android:id="@+id/button2"
android:layout_width="0dp"
app:layout_constraintLeft_toRightOf="@+id/button1"
app:layout_constraintTop_toTopOf="parent"
android:background="@color/colorAccent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_height="100dp"/>
Circular positioning (Added in 1.1)
您可以以角度和距离约束控件中心相对于另一个控件的中心。这使你可以将控件放在圆上。
可以使用以下属性：
layout_constraintCircle : 另一个控件的ID
layout_constraintCircleRadius : 相对另一控件中心的距离
layout_constraintCircleAngle : 位于另一控件的角度位置
示例
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintCircle="@+id/buttonA"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="45" />
在这里插入图片描述
Note: 0度角为正上方，向右为增大方向，如果设置为负数 （-90 会按照绝对值来计算）
Dimensions constraints（尺寸限制）
ConstraintLayout 自身的尺寸约束
最大最小宽高设置
android:minWidth
android:minHeight
android:maxWidth
android:maxHeight
设置方式类似其他布局 只有在其尺寸设置为WRAP_CONTENT作用
控件的尺寸约束
固定尺寸 （123dp）
- WRAP_CONTENT
- 0dp(MATCH_CONSTRAINT) 相当于MATCH_PARENT
**Note **：不建议对ConstraintLayout中包含的小部件使用MATCH_PARENT。可以通过使用MATCH_CONSTRAINT来定义类似的行为，其中相应的左/右或上/下约束被设置为"parent"。 ** (即 ：约束边作为其大小) **
WRAP_CONTENT
enforcing constraints（强制约束）
一般情况下使用WRAP_CONTENT ，表示在可用剩余空间下任意大小
如果想要在使用WRAP_CONTENT的时候限制一个大小范围使用一下方式：
app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”
再配合最大最小的最大最小宽度去设置：
layout_constraintWidth_min
layout_constraintHeight_min
layout_constraintWidth_max
layout_constraintHeight_max
MATCH_CONSTRAINT
Percent dimension（百分比尺寸设置）
要使用百分比，您需要设置以下内容：
- 尺寸应设置为MATCH_CONSTRAINT（0dp）
- 默认值应设置为app app：layout_constraintWidth_default =“percent”或app：layout_constraintHeight_default =“percent”
- 然后将layout_constraintWidth_percent或layout_constraintHeight_percent属性设置为0到1之间的值
比率 Ratio
可以将控件的一个维度定义为另一个维度的比率。
需要将至少一个约束维度设置为0dp（即MATCH_CONSTRAINT），并将属性layout_constraintDimensionRatio设置为给定比率。
例如 ：
<Button android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1" />
另一种表示方式：
<Button android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="0.5f" />
浮点值，表示宽度和高度之间的比率
如果两个尺寸都设置为MATCH_CONSTRAINT（0dp），也可以使用比率。
在这种情况下，系统设置最大尺寸以满足所有约束并保持指定的纵横比。要根据另一个的尺寸约束一个特定边，可以预先附加W，“或H，分别约束宽度或高度。
例如，如果一个维度受两个目标约束（例如，宽度为0dp并且以父对象为中心）你可以通过在比率前添加字母W（用于约束宽度）或H（用于约束高度）来指示哪一边应该被约束，用逗号分隔：
<Button android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
Virtual Helper objects
GuildeLine
作用：辅助布局
设置guildeLine 方向
**通过 orientation的属性设置水平或者垂直 **
水平guildeLine 高度为0 宽度为parent
垂直guildeLine 宽度为0 高度为 parent
eg:
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline"
android:orientation="horizontal"/>
确定guildeLine 位置
三种方式：
- layout_constraintGuide_begin
- layout_constraintGuide_end
- layout_constraintGuide_percent [0,1]
Barrier
屏障
使用场景
Placeholder
顾名思义：就是占位图
使用示例
<android.support.constraint.Placeholder
android:id="@+id/imageHolder"
android:layout_width="100dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="100dp"/>
<ImageView
android:id="@+id/image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="100dp"
android:src="@mipmap/ic_launcher"
android:layout_height="100dp"/>
image.setOnClickListener {
imageHolder.setContentId(R.id.image)
}
Group
作用：主要用来控制一组控件的可见性。
示例
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="@+id/buttonA"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="wrap_content"
android:text="buttonA"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/buttonB"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="wrap_content"
android:text="buttonB"
android:layout_height="wrap_content"/>
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="buttonA,buttonB"/>
</android.support.constraint.ConstraintLayout>
Group 的可见性对应着与其关联的几个控件，方便的显示隐藏多个控件。
注意：ConstraintLayout可用作支持库，可以在API级别9（Gingerbread）的Android系统上使用
