向ConstraintLayout迁移

ConstraintLayout已经出了很久，版本不断的更新，最近用起来感觉挺不错。它最大的优点就是通过元素之间的约束，可以做到几乎无嵌套，提高了UI渲染速度。

1.从RelativeLayout向ConstraintLayout迁移

网上有人说ConstraintLayout是RelativeLayout增强版，确实RelativeLayout能做到的ConstraintLayout都能做到
ConstraintLayout具有和RelativeLayout类似的属性如下

layout_constraintLeft_toLeftOf  //本身的左边位于指定控件的左边
layout_constraintLeft_toRightOf //本身的左边位于指定控件的右边
layout_constraintRight_toLeftOf //本身的右边位于指定控件的左边，下面属性类似的意思
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

例如让一个按钮位于另一个按钮的右边

使用 ConstraintLayout实现

<?xml version="1.0" encoding="utf-8"?>
<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">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button2"
        app:layout_constraintLeft_toRightOf="@+id/button1" />
</android.support.constraint.ConstraintLayout>

如果用之前RelativeLayout实现的话，那么app:layout_constraintLeft_toRightOf="@id/button1" 对应的就是android:layout_toRightOf="@id/button1"
让控件位于最右、最底部……显示
layout_constraintLeft_toRightOf 系列属性对应的值除了为控件id还可以为parent，就是根据父级进行相应的约束.
例如想让控件在最右边就可以这样写
app:layout_constraintRight_toRightOf="parent"
相当于相对布局中的android:layout_alignParentRight="true"

使用ConstraintLayout让控件居中显示
在RelativeLayout中想让控件在父容器中居中显示可以使用下面属性实现，

        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"

但ConstraintLayout似乎没有对应的属性，使用android:gravity也不行, 那使用ConstraintLayout想居中显示怎么办。解决方案如下
ConstraintLayout翻译过来就是约束布局，如果想让控件定位到某个位置，就必须和其它元素产生关系，生成约束。想实现水平居中，让某个控件的左右设置相应的约束

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />  

上面button 左边和父容器的左边约束，最右边和父容器的右边约束，左右互相约束，button在父容器就处于水平居中，就好像左右两边拉着button，左右平衡让button居中。如果相对两个控件之前水平居中，就把parent换成相应的id。如果想垂直居中的话，就 app:layout_constraintTop_toTopOf 和 app:layout_constraintBottom_toBottomOf 一起使用

熟练掌握上述列举的属性就可以使用ConstraintLayout实现RelativeLayout可以实现的效果
例如实现下面布局

<?xml version="1.0" encoding="utf-8"?>
<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">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/blue_rectangle"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="标题"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@+id/imageView" />

    <TextView
        android:id="@+id/tv_comment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="评论"
        android:textColor="#000"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="@+id/tv_title"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="内容内容"
        android:textSize="14sp"
        app:layout_constraintLeft_toRightOf="@+id/imageView"
        app:layout_constraintTop_toBottomOf="@+id/tv_title" />

    <TextView
        android:id="@+id/tv_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="10"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintLeft_toRightOf="@+id/imageView" />
</android.support.constraint.ConstraintLayout>

ConstraintLayout 除了上下左右约束外，在1.1版本中还添加以任何角度的约束，360无死角。
使用下面三个属性

layout_constraintCircle ：引用另一个小部件ID
layout_constraintCircleRadius ：到其他小部件中心的距离
layout_constraintCircleAngle ：小部件应该处于哪个角度（以度为单位，从0到360）

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button2"
        app:layout_constraintCircle="@+id/button1"
        app:layout_constraintCircleAngle="137"
        app:layout_constraintCircleRadius="100dp" />
</android.support.constraint.ConstraintLayout>

2.从LinearLayout向ConstraintLayout迁移

LinearLayout我感觉最好用的就是权重了，可以根据比例分配空间。
ConstraintLayout也可以实现就这样效果
实现步骤如下：
1 控件之间生成链，生成链的条件是控件与控件之前互相产生连接，互相依赖，做到你中有我我中有你，下面是官方给出的链式示意图

2.设置水平权重或垂直权重使用下面属性

layout_constraintHorizontal_weight
layout_constraintVertical_weight

实现效果如下

实现代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_weight="1"
        android:text="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button2" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_weight="2"
        android:text="2"
        app:layout_constraintLeft_toRightOf="@+id/button1"
        app:layout_constraintRight_toLeftOf="@+id/button3" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="3"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintLeft_toRightOf="@+id/button2"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

上面button1 左边连接在父容器的最左边，右边连接在button2的左边，button2的左边连接button1的右边，button2的右边连接在button3的左边，button3的左边连接着button2的右边，button3的右边连接在父容器的右边，这个三个按钮就成为一条链，就可以设置权重了。

3.从FrameLayout向ConstraintLayout迁移

ConstraintLayout 和FrameLayout一样，代码从上到下，那个控件在最下方，那个控件就位于视图的最上方。

参考：https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout