Android ConstraintLayout 实际应用

看了国内很多ConstraintLayout的文章，多数是从 android 开发者官网引用的，很少结合实际应用。下面是本人历次项目中，对ConstraintLayout的使用总结。
本文不允许转载。
在写下这篇文章时，吐槽简书的编辑器，很烂，这个插入代码的这个符号：` ，我找了很久。

1. 首先是有关于constraintBottom_toTopOf这种一眼看上去不知道配置什么的属性，最初用的时候觉得定义的很混乱。

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="parent"

这两个配置效果相同，因为 constraintBottom 都是指 放置于layout的底部
toBottomOf和toTopOf是当指向某个id才有效的配置
例如：

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:id="@+id/view1"
        android:text="view1"
        android:layout_width="100dp"
        android:layout_height="35dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintBottom_toBottomOf="parent"
        />
    <TextView
        android:id="@+id/view2"
        android:text="view2"
        android:layout_width="100dp"
        android:layout_height="35dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintBottom_toTopOf="@id/view1"
        />
</android.support.constraint.ConstraintLayout>

效果：

layout-2018-03-30-181249.png

2. 设置margin，
   如果没有设置layout_constraintLeft_toLeftOf，layout_marginLeft不会生效
   如果没有设置layout_constraintTop_toTopOf，layout_marginTop不会生效

    <android.support.v7.widget.CardView
        android:id="@+id/civ_chat_main"
        android:layout_width="156dp"
        android:layout_height="135dp"
        android:layout_marginLeft="24dp"
        android:layout_marginTop="24dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        >

3. 水平居中

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

4. 使用链风格chainStyle，以下列出的是使用 layout_constraintVertical_chainStyle的纵向排列，
   另外还有layout_constraintHorizontal_chainStyle的横向排列功能，需要三个view再搭配layout_constraintRight_toRightOf, layout_constraintRight_toLeftOf, layout_constraintLeft_toLeftOf, layout_constraintLeft_toRightOf 等属性一同使用。

3个控件以外的间距纵向等分，即用3个控件把高度等分成4部分，
注意：修改 view1 的layout_constraintVertical_chainStyle属性为packed或者spread_inside会有不同的等分效果 （修改view2和view3没有效果）

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <Button
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/view2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread" />
    <Button
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/view3"
        app:layout_constraintTop_toBottomOf="@+id/view1"
        app:layout_constraintVertical_chainStyle="packed" />
    <Button
        android:id="@+id/view3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view2"
        app:layout_constraintVertical_chainStyle="packed" />
</android.support.constraint.ConstraintLayout>

view1，spread 效果：

QQ20180330-181813@2x.png

view1，packed 效果：

QQ20180330-181910@2x.png

view1，spread_inside 效果：

QQ20180330-181952@2x.png

5. 权重分配高度，三个控件均分高度，代码：
   在第4点的基础上，每个控件加上 纵向权重属性，并设置高度0dp：
   android:layout_height="0dp"
   app:layout_constraintVertical_weight="1"

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <Button
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/view2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread_inside"
        app:layout_constraintVertical_weight="1"/>
    <Button
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/view3"
        app:layout_constraintTop_toBottomOf="@+id/view1"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintVertical_weight="1"/>
    <Button
        android:id="@+id/view3"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view2"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintVertical_weight="1" />
</android.support.constraint.ConstraintLayout>

效果：

QQ20180330-182509@2x.png