ConstraintLayout使用的方方面面

ConstraintLayout布局从中文意思理解即为约束布局。本篇博客不做其他解释，主要讲解ConstraintLayout的使用，因为自己目前在实际项目中使用的比较多，所以感觉对其的使用还是有了一定的了解，也看过一些文章，在实际使用中这个布局也确实很好用。之前也看过郭神和鸿洋大神的关于ConstraintLayout使用的文章，看的郭神的讲的主要是可视化操作，直接进行拖拽，鸿神的是在xml布局中手动敲代码布局实现。两篇文章都写的非常好，大家也可以搜搜看下。但是我个人的一个操作是直接在xml布局中代码编写布局，这样感觉更容易控制。好了，废话了这么多，接下来也该开始进入正题了。

一、基本属性app:layout_constraintLeft_toLeftOf（对齐约束）等

• app:layout_constraintLeft_toLeftOf

• app:layout_constraintTop_toTopOf

• app:layout_constraintBottom_toBottomOf

• app:layout_constraintRight_toRightOf

依此类推，我们可以知道还会有如下等一系列基本属性
app:layout_constraintLeft_toRightOf
app:layout_constraintTop_toBottomOf
接下来简单说明一下上面属性的意思，其实我们根据它的名称来记忆是很方便的，例如

• app:layout_constraintLeft_toLeftOf=”parent”即表示自身的左边与父控件的左边对齐

• app:layout_constraintLeft_toLeftOf=”@id/viewId”如果传入的是一个View的id，即表示自身的左边与传入的View的左边对齐

• 同理我们可以推导出app:layout_constraintLeft_toRightOf=”@id/viewId”表示自身左边与传入的View的右边对齐（即表示自身控件位于传入的View的右边，或许这样更容易理解）
  下面我们来看一个简单的例子：

  【图1】
  
  根据上图可以看出我们将TextView的底部与父控件的底部，右边与父控件的右边对齐，所以我们的控件显示在屏幕的右下角，这个没什么多说的。接下来我们再看

  【图2】
  
  这里我多加了两个属性，即让TextView左边与做父控件左边对齐，顶部与顶部对齐，那为什么TextView居中了呢？这里得解释一下，在当控件有自己设置的宽度，例如warp_content、固定值时，我们为控件添加的都是约束“Constraint”，这个约束有点像橡皮筋一样会拉这个控件，但是并不会改变控件的尺寸，所以【图2】就比较好理解了，也就是我们在我们的TextView的上下左右方分别都有一个拉力在拉着TextView所以导致TextView居中了。当然，如果我们把【图2】中TextView的宽高设置成0的话那么会出现什么情况呢？这里我就不截图了，感兴趣的朋友可以自己试下，答案是TextView的宽高即与屏幕宽高是一样的。因为当宽高为0的话，我们就可以根据ConstraintLayout的属性来分析，上图中我们设置了四个属性，分别是左边与父控件左边对齐，右边与父控件右边对齐，顶部与父控件顶部对齐，底部与父控件底部对齐。那么自然的整个TextView的大小也就是父控件的大小了。

二、app:layout_constraintHorizontal_bias（偏移量比）等

了解了基本属性之后，接下来可以再看其他属性了，还是以【图2】为基础，我们在其中再加如如下属性后看效果，如下图：
app:layout_constraintHorizontal_bias="0.2"

【图3】

从图中基本就可以看出该属性的作用了，之前说过，TextView设置了wrap_content或固定宽高后在它左右两端及上下两端有一个相等拉力，而上面的属性就是设置两边拉力的比例。通过上图可以很清楚的看出来。如果我们把上面的值设置成0，那么TextView就会位于左边，设置成1就会位于右边。上面是水平方向的拉力比，同样的还有垂直方向的拉力比属性，这里就不在说了，跟水平方向的是同样的原理。
app:layout_constraintVertical_bias="0.2"

三、app:layout_constraintDimensionRatio（宽高比）

这个属性感觉非常实用，比如我们在APP开发过程中很多时候首页都会有一个banner，然而banner图肯定要保证它不被拉伸吧！如果使用以前的布局一般还需要在代码中去动态计算得到屏幕宽度然后再计算图片宽高比，而使用该属性直接就在xml布局中给固定好了宽高比，再也不需要再代码中去动态计算了，看下图基本就了解了，图片本身的宽高就是1440*400

【图4】

这里还是稍微解释一下，图片中我设置了宽高为0，然后通过下面的属性

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

将图片的宽度设置成了屏幕的宽度，接下来又通过
app:layout_constraintDimensionRatio=”1440:400”将图片的宽高比设置成了1440:400，所以banner图的宽就是屏幕的宽，而高度总是与宽度是固定比例，也就是图片的原始比例，这样就能保证图片不会被拉伸或者压缩变形了。这个属性在实际开发中非常实用，反正我已经用过很多次了，哈哈！

四、app:layout_constraintHorizontal_weight（类似LinearLayout的weight属性）

该属性基本和LinearLayout的weight属性一样，但需要控件之间两两关联，看下图基本就明白了

【图5】

对比代码及预览效果基本就懂了。红色圈起来的即用来控制底部三个Tab之间左右两两关联。

五、app:layout_constraintVertical_chainStyle（对齐方式）

该属性也非常有用，比如在做登录页面时，登录的账号，密码，登录按钮三个垂直排列且需要一起在屏幕中居中对齐就可以使用该属性很好的实现，使用该属性也需要控件之间两两关联。如下图，该属性有几个属性，大家可以试一下，下图中我用的是packed(还有spread,spread_inside这两个属性，大家可以自己试下)：

【图6】

六、Guideline（辅助线）

这个属性不怎么想讲，因为实际使用过程中我使用的不多，而且感觉如果需要实现什么效果不需要这个也可以实现。但是还是说一下它的基本用法，这里引用的鸿神的。
android.support.constraint.Guideline该类比较简单，主要用于辅助布局，即类似为辅助线，横向的、纵向的。该布局是不会显示到界面上的。
所以其有个属性为：
android:orientation取值为”vertical”和”horizontal”.
除此以外，还差个属性，决定该辅助线的位置：

layout_constraintGuide_begin
layout_constraintGuide_end
layout_constraintGuide_percent

可以通过上面3个属性其中之一来确定属性值位置。
begin=30dp，即可认为距离顶部30dp的地方有个辅助线，根据orientation来决定是横向还是纵向。
end=30dp，即为距离底部。
percent=0.8即为距离顶部80%。

七、 app:layout_constraintWidth_percent（宽高百分比）

app:layout_constraintWidth_percent表示宽度的百分比，同样的还有
app:layout_constraintHeight_percent表示高度的百分比，看下图基本就明白了
【图7】

上图中正常情况下Button宽高是会和屏幕宽高一样大小的，由于我们设置了

app:layout_constraintHeight_percent="0.5"
app:layout_constraintWidth_percent="0.8"

所以会让Button的宽度是屏幕宽度的80%，高度为屏幕高度的50%

八、android.support.constraint.Group（群组）

该属性也非常实用，也是最近才使用了一次，但是确是很好用的，因为我们在开发中，有时候需要同时隐藏或者显示多个控件，用Group就可以很好的实现，接下来看一下具体实现。
【图8】

【图9】

对比上面图8与图9，只是把android.support.constraint.Group设置为invisible后，Button与TextView都被隐藏了，因为在app:constraint_referenced_ids="btn,tv"中将Button与TextView都引入进来了，引入进了哪些控件的id，那些控件就可以保证同时显示与隐藏，也就是将引入的id当成一个组来控制了。

九、ConstraintLayout在ScrollView中使用

ConstraintLayout放在ScrollView中使用其实没有什么特别要讲的，和普通的控件没有太大的区别，唯一有点坑的地方就是在ScrollView中使用的时候，顶部的控件不能设置app:layout_constraintTop_toTopOf="parent"及底部的控件不能设置app:layout_constraintBottom_toBottomOf="parent"，因为你如果设置了顶部固定在屏幕顶部，底部固定在屏幕底部，你让它还怎么滑动呢？而顶部的控件不设置app:layout_constraintTop_toTopOf="parent"也不会影响布局，因为默认顶部的控件还是从屏幕上方开始的。

十、总结

当然，ConstraintLayout还有一些其他的新特性，这里不想再说了，因为其他的目前在项目中用到的还比较少，以后用到了会更新，如果想了解更多新特性的可以参考约束布局（ConstraintLayout）1.1.0的新特性，当然由于我也是才开始写博客不久，所以写得不好也望不要喷，毕竟这也更像是一个自我使用总结，如果觉得看不懂的，可以看下鸿神的这篇ConstraintLayout 完全解析 快来优化你的布局吧