最近几个月终于有大把时间总结这两年来所学，荣幸之至 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的内容约束 constrainedWidth2.2 约束偏移量 Bias2.3 约束链 Chain Style2.4 宽高比2.5 百分比布局2.6 参考线3.Helper类3.1 Group3.2 Layer

---

2 进阶操作

####2.2 constrainedWidth TextView 或者其他View内容有时候可能会超过约束范围。需要使用layout_constrainedWidth和layout_constrainedHeight，两个属性的默认值均为false。 文字过多的时候，就像下面这个样子

我们对右侧的TextView的设置是在ImageView的右侧，但是我们可以看到文字已经超出了约束范围，把ImageView盖住了。我用橙色把两边超出来的部分圈出来了，可以看到，两边是对称的，所以，有一部分文字还显示在了屏幕外面。 注意：这里说的是约束范围，不是规定范围，如果你把TextView的width和height写成固定值，无论文字有多少都是不会超出范围的。

layout_constrainedWidth表示不让宽度超出约束范围，文本如果超出了以后，就会自动换行 layout_constrainedHeight 表示不让高度超出约束范围，文本如果超出了以后，会直接截断 两个的默认值均为false。

在上面的TextView属性中加上app:layout_constrainedWidth="true"以后，就可以得到想要的效果了。

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以后，就会变成这样子。

2.3 2.3 约束链 Chain Style

app:layout_constraintVertical_chainStyle

约束链的使用场景是需要将两个以上的View打包的时候[类似于一层布局嵌套]

layout_constraintVertical_chainStyle有三个取值，分别是 packet、spread、spread_inside，默认值是 spread，我们如果用这个属性的话，基本上都是用packet

packet:表示内部全部打包

使用packet时，如果需要间距，就加上 layout_marginTop 之类的属性

spread 表示分散，这个值是默认值，和没写一样

spread_inside 表示内部分散，他会均匀分布在约束的内部，顶部和底部分别挨着top和bottom

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"

三种情况结果如下图：

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" ... 效果就是：

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或horizontalapp:layout_constraintGuide_percent="0.35"表示百分比的方向另外，辅助线的位置也可以通过 layout_constraintGuide_end layout_constraintGuide_begin 分别表示从parent的End和Start处移动的长度百分比也可以支持负数，这个时候，会跑到屏幕外面去，有的时候会用到。

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

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

---

---

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

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