向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