ConstraintLayout优化布局的强大控件

ConstraintLayout最大的好处在于布局基本只需要这一层就几乎可以实现所有的效果，布局优化至最少层数。在灵活度上更优于LinearLayout和RelativeLayout。可视化可拖拽相当的方便。

很久前了解过，最近才学习，在此记录

首先需要引入我们的ConstraintLayout，在build.gradle中加入：

compile 'com.android.support.constraint:constraint-layout:1.0.2'

基础操作

拉入控件

控件的四角可以调节控件大小，四边上的圆形是添加约束点，即ConstraintLayout的核心功能。

示例

实现代码

 <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

可以看到一种新的属性，layout_constraintBottom_toBottomOf即图中所表现出的约束底部再parent的底部。同类属性还有自行脑补用途

• layout_constraintRight_toLeftOf
• layout_constraintRight_toRightOf
• layout_constraintTop_toTopOf
• layout_constraintTop_toBottomOf
• layout_constraintBottom_toTopOf
• layout_constraintBottom_toBottomOf
• layout_constraintBaseline_toBaselineOf

同理控件与控件之间的约束

控件间约束

只是将parent属性改为@+id/xxx

现在其并没有出现什么强于RelativeLayout的地方，看几个

特殊的属性

• 宽高比拉伸控件
  宽高都是0dp即any size时
  app:layout_constraintDimensionRatio="16:6"默认是宽高比，属性还有“W,16:6”和“H,16:6”的写法。w宽h高谁在前谁是分母。
• 类似LinearLayout中等分效果

<TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/common_red"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toLeftOf="@id/textView4"
        app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:id="@+id/textView4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/green"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toLeftOf="@id/textView5"
        app:layout_constraintStart_toEndOf="@+id/textView3"/>

    <TextView
        android:id="@+id/textView5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView4"/>

效果
如果需要进行某种比例的等分只需加入属性
app:layout_constraintHorizontal_weight

对于这种相互关联的控件，组成了一个链(Chains)。在这个链的最左侧的元素成为链头，我们可以在其身上设置一些属性，来决定这个链的展示效果：

该属性为：

layout_constraintHorizontal_chainStyle

默认是spread属性，还有其他四种，效果如图~

layout_constraintHorizontal_chainStyle属性

最后一种属性还涉及到另一个属性

layout_constraintHorizontal_bias
layout_constraintVertical_bias

他表示了当前控件水平or垂直方向上的空隙比
对应design模式就是红框部分

红框部分

关于上图中的一些属性，比如数字是间隔dp，方框中符号表示的定值，wrap_content,和any size（图中符号）等都可以自己摸索下，试一试就明白了。

• Guideline辅助线
  用于处理比如以屏幕中线为基准约束控件的情况

  
  image.png

 <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>

<Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/textView3"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button"/>

大致就这些使用方式，几乎满足常见的布局，可以减少布局层数，加快加载速度。

参考文章
大神guolin
大神鸿洋