Constraint Layout 学习总结

想要使用Constraint Layout，最主要的是记住以下一些属性的作用

1. layout_constraintLeft_toLeftOf

这个代表了改控件的左边与目标控件的左边对齐。例如下布局：

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView01"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="TextView01"
        app:layout_constraintLeft_toLeftOf="parent" />


    <TextView
        android:id="@+id/textView02"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="TextView02"
        app:layout_constraintLeft_toRightOf="@id/textView01" />

</android.support.constraint.ConstraintLayout>

app:layout_constraintLeft_toLeftOf=”parent”表示与父控件左对齐，app:layout_constraintLeft_toRightOf=”@id/textView01”表示左边与textview01的右边对齐。
类似的属性还有如下：
- layout_constraintRight_toLeftOf
- layout_constraintRight_toRightOf
- layout_constraintTop_toTopOf
- layout_constraintTop_toBottomOf
- layout_constraintBottom_toTopOf
- layout_constraintBottom_toBottomOf
- layout_constraintBaseline_toBaselineOf

2.layout_constraintDimensionRatio

• 该属性设置控件的宽高比

android:id="@+id/btn01"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="BTN 01"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintDimensionRatio="2:1" /> 

3.app:layout_constraintHorizontal_weight：类似LinearLayout的weight属性

        android:id="@+id/btn01"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="BTN 01"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn02" />

    <Button
        android:id="@+id/btn02"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="BTN 02"
        app:layout_constraintLeft_toRightOf="@+id/btn01"
        app:layout_constraintRight_toLeftOf="@+id/btn03" />

    <Button
        android:id="@+id/btn03"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="BTN 03"
        app:layout_constraintLeft_toRightOf="@+id/btn02"
        app:layout_constraintRight_toRightOf="parent" />

以上布局的显示如下：

如需控制每个button的宽度比例，分别加上app:layout_constraintHorizontal_weight=4，2，1.
效果如下图：

3.app:layout_constraintHorizontal_bias

先上代码和效果图

    <Button
        android:id="@+id/btn01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_bias="0.1"
        android:text="BTN 01"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
         />

这个属性姑且理解为水平方向约束力的大小比例，取值通常为0~1。大于1则控件超出屏幕。
取值0.1代表控件左右两边的约束力为1：9，则左右两边的margin间隙也为1：9。
layout_constraintVertical_weight与之类似。

4.android.support.constraint.Guideline

这个并不是属性而是，一个控件。可以成为辅助线，只在preview中能看见而不会显示。
它有orientation属性表示纵向还是横向。
另外layout_constraintGuide_begin，layout_constraintGuide_end。
layout_constraintGuide_percent指定辅助线的位置，前两个以dp值指定，后者以百分值指定。
例如下面的代码：在离顶部72dp出和40%处有两条辅助线。

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="72dp" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.4" />

至于辅助线的用处，你应该想到了。把它当做参考物，作为类似layout_constraintLeft_toLeftOf这些属性的目标控件来用。只是不要用的太多，否则布局的代码会看起来会很乱，影响可读性。