资料链接:
ConstraintLayout 终极秘籍（上）
ConstraintLayout 终极秘籍（下）
一、说明
ConstraintLayout 可以看做 RelativeLayout 的升级版。
但 ConstraintLayout 更加强调约束(控件之间的关系)。
二、准备
1.导包
compile 'com.android.support.constraint:constraint-layout:1.0.2'
2. Android Studio 2.2 版本以上
三、属性
1.) ConstraintLayout 本身的属性
- android_maxHeight
- android_maxWidth
- android_minHeight
- android_minWidth
Android 常见控制 View 最大尺寸和最小尺寸的属性。
2.) Guideline 属性
Guideline
用来辅助定位的一个不可见的元素。
- android_orientation
控制 Guideline 是横向的还是纵向的 - layout_constraintGuide_begin
控制 Guideline 距离父容器开始的距离 - layout_constraintGuide_end
控制 Guideline 距离父容器末尾的距离 - layout_constraintGuide_percent
控制 Guideline 在父容器中的位置为百分比
3.)相对定位属性
用来控制子 View 相对位置的。
可以是子控件&子控件，也可以是子控件&父控件。
- layout_constraintBaseline_toBaselineOf
- layout_constraintTop_toBottomOf
- layout_constraintTop_toTopOf
- layout_constraintBottom_toBottomOf
- layout_constraintBottom_toTopOf
- layout_constraintStart_toEndOf
- layout_constraintStart_toStartOf
- layout_constraintEnd_toEndOf
- layout_constraintEnd_toStartOf
- layout_constraintLeft_toLeftOf
- layout_constraintLeft_toRightOf
- layout_constraintRight_toLeftOf
- layout_constraintRight_toRightOf
layout: 说明这是一个布局属性。
_constraintXXX: 为对当前 View 上的某个属性做的约束。
_toXXOf: 为当前 View 约束的对象以及约束的方位。
View 的上下左右以及 baseline 示意图
4.)Margin （View 的边距）
Margin 说明
a. View margin 的属性
- layout_marginStart
- layout_marginEnd
- layout_marginLeft
- layout_marginTop
- layout_marginRight
- layout_marginBottom
b.控制当前 View 所参考的 View 状态为 GONE 的时候的 margin 值
- layout_goneMarginBottom
- layout_goneMarginEnd
- layout_goneMarginLeft
- layout_goneMarginRight
- layout_goneMarginStart
- layout_goneMarginTop
用途：
比如 ButtonB 左边相对于 ButtonA 右边对齐，ButtonA 左边相对于父容器左边对齐。如果 ButtonA 的状态为 GONE（不可见的），则 ButtonB 就相对于父容器左边对齐了。如果有个需求是，当 ButtonA 不可见的时候， ButtonB 和父容器左边需要一个边距 16dp。 这个时候就需要使用上面的 layout_goneMarginLeft 或者 layout_goneMarginStart 属性了，如果设置了这个属性，当 ButtonB 所参考的 ButtonA 可见的时候，这个边距属性不起作用；当 ButtonA 不可见（GONE）的时候，则这个边距就在 ButtonB 上面起作用了。
另外还有一个用途就是方便做 View 动画，可以先设置 ButtonA 为 GONE，同时可以保持 ButtonB 的布局位置不变。
例：
<Button
android:id="@+id/btnA"
android:visibility="gone"
.../>
<Button
android:id="@+id/btnB"
app:layout_goneMarginLeft="50dp"
app:layout_constraintLeft_toRightOf="@+id/btnA"
.../>
5.)居中和偏移(bias)
- layout_constraintHorizontal_bias
- layout_constraintVertical_bias
Bias 示意图：
6.)子 View 的尺寸控制
- android:layout_width
- android:layout_height
三种取值:
- 确定尺寸。比如 48dp
- WRAP_CONTENT
- 0dp。和约束规则指定的宽(高)度一样
(a) 设置为wrap_content
(b) 设置为 0dp，则 View 的宽度为整个父容器的宽度
(c) 是设置了 margin的情况下的宽度。
a.控制子View的宽高比
- layout_constraintDimensionRatio
如果要使用宽高比则需要至少设置一个尺寸约束为 0dp
比率的取值形式：
- float 值，代表宽度/高度 的比率
- “宽度:高度”这种比率值
如果宽度和高度都是 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"/>
H,16:9：前面的 H 表明约束高度，所以结果就是 Button 的宽度和父容器宽度一样，而高度值符合 16:9 的比率。
b.精细控制 View 尺寸的属性
注意：下面这些属性只有宽度或者高度设置为 0dp 的情况下才有效
- layout_constraintWidth_default
取值为spread/wrap,默认值为 spread - layout_constraintHeight_default
取值为spread/wrap,默认值为 spread - layout_constraintHeight_max
取值为具体的尺寸 - layout_constraintHeight_min
取值为具体的尺寸 - layout_constraintWidth_max
取值为具体的尺寸 - layout_constraintWidth_min
取值为具体的尺寸
spread：占用所有的符合约束的空间；
Wrap：view 的尺寸设置为 wrap_content 且受所设置的约束限制其尺寸，则这个 view 最终尺寸不会超出约束的范围。
7.)链条布局（Chains）
Chains:同一个方向（水平或者垂直）上的多个子 View 提供一个类似群组的概念。
a. 创建 Chains
多个 View 相互在同一个方向上双向引用就创建了一个 Chain。
比如在水平方向上两个 Button A 和 B，如果 A 的右边位于 B 的左边，而 B 的左边位于 A 的右边，则就是一个双向引用。
注意： 在 Android Studio 编辑器中，先把多个 View 单向引用，然后用鼠标扩选多个 View，然后在上面点击右键菜单，选择 “Center Horizontally” 或者 “Center Vertically” 也可以快速的创建 Chain。
b. Chain heads
Chain 的属性由该群组的第一个 View 上的属性所控制（第一个 View 被称之为 Chain head）。
水平群组，最左边的 View 为 head， 垂直群组最上面的 View 为 head。
c. Margins in chains
可以为 Chain 中的每个子 View 单独设置 Margin。对于 spread chains， 可用的布局空白空间是扣除 margin 后的空间。下面会详细解释。
d. Chain Style
控制 Chain Style 的属性：
- layout_constraintHorizontal_chainStyle
- layout_constraintHorizontal_weight
- layout_constraintVertical_chainStyle
- layout_constraintVertical_weight
chainStyle 是设置到 Chain Head 上的，指定不同的 style 会改变里面所有 View 的布局方式。
有如下四种 Style：
- CHAIN_SPREAD：
这个是默认的 Style，里面的所有 View 会分散开布局。 - CHAIN_SPREAD_INSIDE：
和 CHAIN_SPREAD 类似，只不过两端的两个 View 和 父容器直接不占用多余空间，多余空间在 子 View 之间分散。 - Weighted chain：
在 CHAIN_SPREAD 模式下，如果有些 View 的尺寸设置为 0dp，则这些 View 尺寸会占据所有剩余可用的空间，和 LinearLayout weight 类似。 - CHAIN_PACKED：
所有的子 View 都 居中聚集在一起，但是可以设置 bias 属性来控制聚集的位置。
如果多个子View尺寸设置为 0dp，则这些 View 会平均的占用多余的空间。
通过 layout_constraintXXX_weight 属性，可以控制每个 View 所占用的多余空间的比例。
例如，对于只有两个 View 的一个水平 Chain，如果每个View 的宽度都设置为 0dp，第一个 View 的 weight 为 2；第二个 View 的 weight 为 1，则第一个 View 所占用的空间是 第二个 View 的两倍。
8.) UI 编辑器所使用的属性
用作：辅助拖拽布局，实际使用过程中，可以不用关心。
- layout_optimizationLevel
- layout_editor_absoluteX
- layout_editor_absoluteY
- layout_constraintBaseline_creator
- layout_constraintTop_creator
- layout_constraintRight_creator
- layout_constraintLeft_creator
- layout_constraintBottom_creator
9.) Guideline
用作：一个不可见的 View，ConstraintLayout 水平或者垂直的参考线。
其他的 View 可以相对于这个参考线来布局。
- 垂直 Guideline 的宽度为 0， 高度为 父容器（ConstraintLayout）的高度
- 水平 Guideline 的高度为 0， 宽度为 父容器（ConstraintLayout）的宽度
参考线的位置是可以移动的。 - layout_constraintGuide_begin 可以指定距离左（或者上）边开始的固定位置
- layout_constraintGuide_end 可以指定距离右（或者下）边开始的固定位置
- layout_constraintGuide_percent 可以指定位于布局中所在的百分比，比如距离左边 2% 的位置
10.) 代码设置 ConstraintLayout 属性
a. ConstraintSet
用来通过代码管理布局属性的集合对象，可以用来约束各种布局，然后把创建好的布局约束应用到 ConstraintLayout。
b. 创建方式
手工创建：
c = new ConstraintSet();
c.connect(….);R.layout.* 获取
c.clone(context, R.layout.layout1);-
ConstraintLayout 中获取
c.clone(clayout);
然后通过 applyTo 函数来应用到ConstraintLayout 上// set new constraints mConstraintSet.applyTo(mConstraintLayout);
四、可视化UI的使用
2017/5/19 15:33:50
