ConstraintLayout学习

ConstraintLayout是Android Studio 2.2中主要的新增功能之一，也是Google在2016年的I/O大会上重点宣传的一个功能。众所周知，在界面渲染时，嵌套的层级越多，效率就越慢。而在日常开发当中，有时我们需要编写非常复杂的布局，无论是用 relativelayout还是linearlayout都需要多层嵌套，因此违背了布局文件减少层级的这个初衷，而使用ConstrainLayout则可以帮助我们一个层级或者少量层级实现复杂布局，下面将介绍ConstraintLayout的使用以及ConstraintLayout跟我们常用的relativelayout，linearlayout的性能差异。

ConstraintLayout使用：

本人按照hongyang大神的ConstraintLayout 完全解析 快来优化你的布局吧编写了demo，也按照郭霖大神的Android新特性介绍，ConstraintLayout完全解析操作过一遍可视化编辑界面，个人还是比较倾向于手写代码布局，因此将重要的属性整理出来，详细可查看两位大神的文章。

• layout_constraintRight_toLeftOf 约束该控件的右边，在xx的左边
• layout_constraintRight_toRightOf 约束该控件的右边，在xx的右边
• layout_constraintTop_toTopOf 由上类推。。。
• layout_constraintTop_toBottomOf
• layout_constraintBottom_toTopOf
• layout_constraintBottom_toBottomOf
• layout_constraintBaseline_toBaselineOf

通过上述属性可以实现上图效果。

 

屏幕宽高比的实现：

app:layout_constraintDimensionRatio="16:6"

app:layout_constraintDimensionRatio="W,16:6"

app:layout_constraintDimensionRatio="H,16:6"

同时将宽高设置为 android:layout_width="0dp" android:layout_height="0dp"

0值的含义，其实在ConstraintLayout中0代表：MATCH_CONSTRAINT。在ConstraintLayout中已经不支持MATCH_PARENT这个值了，你可以通过MATCH_CONSTRAINT配合约束实现类似的效果。

通过上述属性，可以配置控件的宽度为占据整个屏幕，宽高比为16：6。

效果图：

 

tab效果实现：

<TextView
    android:id="@+id/tab1"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#f67"
    android:gravity="center"
    android:text="Tab1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/tab2" />


<TextView
    android:id="@+id/tab2"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#A67"
    android:gravity="center"
    android:text="Tab2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/tab1"
    app:layout_constraintRight_toLeftOf="@+id/tab3" />


<TextView
    android:id="@+id/tab3"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#767"
    android:gravity="center"
    android:text="Tab3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/tab2"
    app:layout_constraintRight_toRightOf="parent" />

设置占据的比例，app:layout_constraintHorizontal_weight，分别设置为2，1，1。

 

layout_constraintHorizontal_chainStyle，横向的相当于组成了一个链(Chains)。在这个链的最左侧的元素成为链头，我们可以在其身上设置一些属性，来决定这个链的展示效果。

属性：

• spread
• packed
• spread_inside

1. spread + 宽度非0
2. spread_inside + 宽度非0
3. packed + 宽度非0

 

设置上下距离，可以设为xx%

layout_constraintHorizontal_bias

layout_constraintVertical_bias

 

Guideline主要用于辅助布局，即类似为辅助线，横向的、纵向的。该布局是不会显示到界面上的。

android:orientation取值为”vertical”和”horizontal”.

除此以外，还差个属性，决定该辅助线的位置：

• layout_constraintGuide_begin
• layout_constraintGuide_end
• layout_constraintGuide_percent

可以由辅助线更好帮助我们确定view的位置和简化编写。

 

ConstraintLayout的性能优势

解析ConstraintLayout的性能优势学习整理

Android 视图绘制

1. 测量

系统自顶向下遍历视图树，以确定每个 ViewGroup 和 View 元素应当有多大。在测量 ViewGroup 的同时也会测量其子对象。

2. 布局

系统执行另一个自顶向下的遍历操作，每个 ViewGroup 都根据测量阶段中所确定的大小来确定其子对象的位置。

3. 绘制

系统再次执行一个自顶向下的遍历操作。对于视图树中的每个对象，系统会为其创建一个 Canvas 对象，以便向 GPU 发送一个绘制命令列表。这些命令包含系统在前面 2 个阶段中确定的 ViewGroup 和 View 对象的大小和位置。

多层级嵌套造成的性能问题：绘制过程中的每个阶段都需要对视图树执行一次自顶向下的遍历操作。因此，视图层次结构中嵌入（或嵌套）的视图越多，设备绘制视图所需的时间和计算功耗也就越多。

 

google官方给出的性能比较结果：大约提高 40%