最近几个月终于有大把时间总结这两年来所学，荣幸之至
2019.5.22

前言

继续ConstraintLayout 基础入门（一）

本章节对应内容的练手项目

目录

本文包含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的宽和高保持固定的比例。需要修改下面两个参数：

1. width或者height为 0dp [match_constraint]
2. 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的百分比

1. 对应width或者height的值为0dp[match_constraint]
2. 设置 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"
/>

1. android:orientation=表示方向，取值vertical或horizontal
2. app:layout_constraintGuide_percent="0.35"表示百分比的方向
3. 另外，辅助线的位置也可以通过
   layout_constraintGuide_end
layout_constraintGuide_begin
   分别表示从parent的End和Start处移动的长度
4. 百分比也可以支持负数，这个时候，会跑到屏幕外面去，有的时候会用到。

借助百分比布局，可以很容易实现下面这个论文简版首页的布局。

图10：论文首页

• 加上本小节，一共用了11小节将ConstraintLayout的使用，这个界面就不做分析去写了，可以下来实现一下。

---

---

另外，为了避免看文章枯燥，我准备了一个练手项目，看完以后可以下载下来练习练习。

再另外，以上都是自己平时所学整理，如果有错误，欢迎留言或者添加微信批评指出，一起学习，共同进步，爱生活，爱技术。