ConstraintLayout 笔

作者: Demon鑫 | 来源:发表于2017-05-19 15:36 被阅读0次

ConstraintLayout 笔
1.android布局-ConstraintLayout-约束布
我们能用ConstraintLayout 做些什么？
ConstraintLayout 约束布局
Layout文档整理
ConstraintLayout教程
ConstraintLayout-[Android_YangKe
MotionLayout
Constraintlayout便查手册
自定义ConstraintLayout控件不显示问题：

资料链接:
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);
```