Android Design - ConstraintLayout 布局

之前都是使用 RelativeLayout（后面简称RL） 和 LinearLayout（后面简称LL） 进行页面布局，再复杂难搞的 UI 也能搞定（此处不讨论那些需要自定义的UI）。但是都知道一个问题，那就是 UI 越复杂，需要嵌套的层级越多，这样带来结果就是在渲染页面时，会消耗大量的资源，严重的时候甚至会出现丢帧现象，所以卡顿就出现了。ConstraintLayout（后面简称CL）出现之后，就可以大量减少 UI 层级嵌套，处理的好，可以做到0嵌套。

先上图，整个文档都围绕这个图片来展开：

ConstraintLayout.jpeg

---

1. 引入依赖（以下两种方式，视 Gradle 版本自己选择）：

compile  'com.android.support.constraint:constraint-layout:1.1.2'
// 老版本 Gradle，用上面的；新版本选用下面的
implementation 'com.android.support.constraint:constraint-layout:1.1.2'

2. 在做具体需求之前，需要先说明一下，在 CL 布局中 match_parent这个值用 0dp来替代，后面例子会用到，不再做解释；

3. 需求来了，做一个 Banner，Banner的宽度填满屏幕宽度，高度为宽度的4/1，在之前我们都是在 Java 代码中动态去获取屏幕宽度，然后将计算出来的高度值动态设置给 Banner。但是在 CL 布局中不必那么麻烦，只需一句代码就搞定。

   
   
   Banner.jpeg

• 先看完整代码：

• 首先我们通过约束条件

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

让Banner在宽度上填充了屏幕宽度，然后通过设置 app:layout_constraintDimensionRatio="H,4:1" 将高度设置为宽度的4/1 ，同样的还有

app:layout_constraintDimensionRatio="4:1" 
app:layout_constraintDimensionRatio="W,4:1" 

4. 上面提到的约束条件还有

app:layout_constraintLeft_toLeftOf
app:layout_constraintLeft_toRightOf
app:layout_constraintRight_toLeftOf
app:layout_constraintRight_toRightOf
app:layout_constraintTop_toTopOf
app:layout_constraintTop_toBottomOf
app:layout_constraintBottom_toTopOf
app:layout_constraintBottom_toBottomOf
app:layout_constraintBaseline_toBaselineOf

5. 接下来，btn2 在 btn1 的右侧，并且 btn2 在右侧剩余空间的中间：

   
   
   btn1 2.jpeg
   
   

   先看完整代码：

• 重点看 btn2 中的

app:layout_constraintLeft_toRightOf="@+id/btn1"
app:layout_constraintRight_toRightOf="parent"

• 这两个约束条件就像两个弹力相同的橡皮筋，同时对 btn2 作用，而btn2 的宽度为内容包裹，所以 btn2 被居中放置了；

• 那么我们如果设置了 btn2 的宽度会怎样呢？这里存在两种情况，如果设置的宽度小于右侧剩余的宽度，那效果和上面的一样；如果大于会怎么呢？那就出现了 btn3 和 btn4 的情况了。

  
  
  btn3 4.jpeg

6. btn4 设置了宽度，并且这个宽度大于 btn3 右侧的宽度，所以 btn3 就被覆盖了一部分，同时 btn4 右侧一部分也超出了屏幕。看代码：

• 那么如果想让 btn4 将剩余的空间占满呢？

  
  
  btn5 6.jpeg

7. 那就是 btn5 和 btn6 的关系了，看代码：

• 不难看出，就是讲 btn6 的宽度设置为了 0dp，所以它就占据了剩余的空间。

• 那如果想要均分呢？

  
  
  tab1 2 3.jpeg

8. 接着看 tab1 tab2 tab3 的关系，源码：

• 首先设置这3个 tab 的宽度为 0dp ，然后分别设置它们之间相互的约束

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/tv_tab2"


app:layout_constraintLeft_toRightOf="@+id/tv_tab1"
app:layout_constraintRight_toLeftOf="@+id/tv_tab3"


app:layout_constraintLeft_toRightOf="@+id/tv_tab2"
app:layout_constraintRight_toRightOf="parent"

• 要是按比例分配又该怎么做呢？

  
  
  tab4 5 6.jpeg

9. tab4 : tab5 : tab6 的宽度之比为 2:1:1，这就要用到 app:layout_constraintHorizontal_weight 属性了，看源码：

• 在8中平分的代码基础上，添加

app:layout_constraintHorizontal_weight="2"


app:layout_constraintHorizontal_weight="1"


app:layout_constraintHorizontal_weight="1"

• 如果设置了宽度，又会怎样呢？

10. 设置了宽度，那么它们就会出现 tab10 tab11 tab12 的情况，即每个 tab 之间的空间一样大小，同时第一个和最后一个距离父组件的空间也一样大小。

• 如果去掉与父控件之间的空间呢？

  
  
  tab7 8 9.jpeg

11. 这需要用到另一个新的属性 app:layout_constraintHorizontal_chainStyle ，它有三个取值，分别是

spread_inside
spread
packed

分别对应 tab7 tab8 tab9、tab10 tab11 tab12、tab13 tab14 tab15 的情况，也可以看出，这个属性的默认值就是 spread

tab10 11 12.jpeg

tab13 14 15.jpeg

12. 直到这里，貌似 RL 和 LL 能够实现的布局，CL 都已经完成了，但是还有一个属性也要讲一下

app:layout_constraintHorizontal_bias
app:layout_constraintVertical_bias

• 这两个属相分别设置子控件距离父控件右侧和底部距离的百分比，当都为 0 时，子组件在父组件的左上角；当都为 1 时，则在右下角。
• 使用时注意加入下面四行代码：

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

---

最后，共享一下完整的代码吧(#^.#)