最近几个月终于有大把时间总结这两年来所学，荣幸之至
2019.5.22
前言
本章节对应内容的练手项目
目录
本文包含2.1-2.6的内容
- 1 基本操作
- 1.1 相对位置布局
- 1.2 整体位置布局
- 1.3 约束比例
- 1.4 文字基准线对齐
- 1.5 圆心布局（原文叫 Circular positioning)
- 2 进阶操作
- 2.1 View的内容约束 constrainedWidth
- 2.2 约束偏移量 Bias
- 2.3 约束链 Chain Style
- 2.4 宽高比
- 2.5 百分比布局
- 2.6 参考线
- 3.Helper类
- 3.1 Group
- 3.2 Layer
2 进阶操作
2.2 constrainedWidth
TextView 或者其他View内容有时候可能会超过约束范围。需要使用layout_constrainedWidth和layout_constrainedHeight，两个属性的默认值均为false。
文字过多的时候，就像下面这个样子
图1：文字超出约束范围
我们对右侧的TextView的设置是在ImageView的右侧，但是我们可以看到文字已经超出了约束范围，把ImageView盖住了。我用橙色把两边超出来的部分圈出来了，可以看到，两边是对称的，所以，有一部分文字还显示在了屏幕外面。
注意：这里说的是约束范围，不是规定范围，如果你把TextView的width和height写成固定值，无论文字有多少都是不会超出范围的。
layout_constrainedWidth表示不让宽度超出约束范围，文本如果超出了以后，就会自动换行
layout_constrainedHeight 表示不让高度超出约束范围，文本如果超出了以后，会直接截断
两个的默认值均为false。
在上面的TextView属性中加上app:layout_constrainedWidth="true"以后，就可以得到想要的效果了。
图2：加入width约束以后的效果
2.2 约束偏移量 Bias
bias英文是偏心，偏向的意思
也是有水平和垂直两个方向
layout_constraintHorizontal_bias
layout_constraintVertical_bias
取值范围是 0.0 -- 1.0 默认值是0.5[就是不设置的时候，控件会放置与两方约束的正中间]。
这个很好理解，举个例子
给一个水平垂直方向均居中的View，加入app:layout_constraintVertical_bias="0.2"后，就会在垂直方向重新开始分配权重。上面说了，layout_constraintVertical_bias默认值是0.5，所以我们不写的话，垂直方向就是Top和Bottom各一半儿。改成0.2以后，就会变成这样子。
图3：约束偏移量
2.3 2.3 约束链 Chain Style
app:layout_constraintVertical_chainStyle
约束链的使用场景是需要将两个以上的View打包的时候[类似于一层布局嵌套]
layout_constraintVertical_chainStyle有三个取值，分别是 packet、spread、spread_inside，默认值是 spread，我们如果用这个属性的话，基本上都是用packet
packet:表示内部全部打包
图4：sample_23_test1_packet.png
使用packet时，如果需要间距，就加上 layout_marginTop 之类的属性
图5：加入margin
spread 表示分散，这个值是默认值，和没写一样
图6：spread
spread_inside 表示内部分散，他会均匀分布在约束的内部，顶部和底部分别挨着top和bottom
图7：spread_inside
2.4 宽高比
宽高比是指，View的宽和高保持固定的比例。需要修改下面两个参数：
- width或者height为
0dp[match_constraint] -
app:layout_constraintDimensionRatio="比值"
如果width和height都是0dp，那么就有一个是铺满的，另一个按照比例缩放
高：宽 = 2：1
android:layout_width="0dp"
android:layout_height="wrap_content"
...
app:layout_constraintDimensionRatio="1:2"
宽：高 = 2：1
android:layout_width="0dp"
android:layout_height="wrap_content"
...
app:layout_constraintDimensionRatio="2:1"
宽：高 = 2：1[width height均为0dp]
android:layout_width="0dp"
android:layout_height="0dp"
...
app:layout_constraintDimensionRatio="2:1"
三种情况结果如下图：
图8：宽高比
2.5 百分比布局
百分比布局，指height 或height占parent的百分比
- 对应width或者height的值为0dp[match_constraint]
- 设置
app:layout_constraintWidth_percent="percent"或app:layout_constraintHeight_percent="percent"。percent取值范围为0-1
比如我们对一个View设置了：
...
android:layout_width="0dp"
app:layout_constraintWidth_percent="0.77"
...
效果就是：
图9：百分比布局
2.6 参考线
接着上面的百分比布局，上面说道的百分比布局，除了直接使用layout_constraintWidth_percent的方式以外，常用的方式还有使用GuideLine。
GuideLine[辅助线]分垂直方向「vertical」和水平方向「Horizontal」
我们设置好了辅助线以后，就可以以辅助线为约束条件，完成百分比布局.
使用方式
<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.35"
/>
-
android:orientation=表示方向，取值vertical或horizontal -
app:layout_constraintGuide_percent="0.35"表示百分比的方向 - 另外，辅助线的位置也可以通过
layout_constraintGuide_end
layout_constraintGuide_begin
分别表示从parent的End和Start处移动的长度 - 百分比也可以支持负数，这个时候，会跑到屏幕外面去，有的时候会用到。
借助百分比布局，可以很容易实现下面这个论文简版首页的布局。
图10：论文首页
- 加上本小节，一共用了11小节将ConstraintLayout的使用，这个界面就不做分析去写了，可以下来实现一下。
另外，为了避免看文章枯燥，我准备了一个练手项目，看完以后可以下载下来练习练习。
再另外，以上都是自己平时所学整理，如果有错误，欢迎留言或者添加微信批评指出，一起学习，共同进步，爱生活，爱技术。
网友评论