多是你最須要的ConstraintLayout示例集錦

以往的關於ConstraintLayout的文章都是講解它的各類屬性的用法，到底這些用法和屬性怎麼達到效果卻說不清，只乾巴巴說些屬性的做用有什麼用，但願直接能上手來用，所以以目標爲導向，來看看這個控件如何展現它強大的功能!

說明

• 有些效果徹底能夠用嵌套實現，但卻不能僅用一個層次的控件實現，因此能夠多用ConstraintLayout進行視圖層次的優化, 最好就是一開始直接用ConstraintLayout不用再推到後面
• 都以水平方向做爲示例，豎直方向不言自明
• 關注關鍵屬性（代碼塊中的行無法標紅，因此靠悟性了）
• 不對各個屬性單獨說明了

相對父親居中

<TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="AAAAA" android:textColor="#333" android:textSize="30sp" android:maxLines="1" android:ellipsize="end" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/>
複製代碼

相對兄弟居中

A相對B水平居中，注意必須是平級的兄弟視圖，其實就是中線對齊中線

<TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="AAAAA" android:textColor="#333" android:textSize="30sp" android:maxLines="1" android:ellipsize="end" app:layout_constraintTop_toTopOf="@+id/right" app:layout_constraintBottom_toBottomOf="@+id/right" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/right"/>

    <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="BBBBBBBBB" android:textColor="#999" android:textSize="20sp" android:layout_marginTop="16dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintRight_toRightOf="parent"/>
複製代碼

中線對齊中線

A的中線與B的中線對齊， 無論AB大小

<TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="AAAAAAAAAA" android:textSize="30sp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="@+id/right" app:layout_constraintBottom_toBottomOf="@+id/right"/>

    <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="BBBBBBB" android:textSize="20sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
複製代碼

中線對齊邊

A的中線與B的上邊對齊

<TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="AAAAAAAAAA" android:textSize="30sp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="@+id/right" app:layout_constraintBottom_toTopOf="@+id/right"/>

    <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="BBBBBBB" android:textSize="20sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
複製代碼

邊對齊中線

A的上邊與B的中線對齊（有時因爲錨點的緣由不能簡單的與上一條相反） 這時咱們須要一個輔助View了，然而並非android.support.constraint.Guideline 參看這篇文章

<TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="AAAAAAAAAA" android:textColor="#333" android:textSize="23sp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="@+id/middle"/>

    <View android:id="@+id/middle" android:layout_width="match_parent" android:layout_height="0.5dp" app:layout_constraintRight_toRightOf="@id/right" android:visibility="invisible" app:layout_constraintTop_toTopOf="@id/right" app:layout_constraintBottom_toBottomOf="@id/right"/>

    <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="BBBBBBB" android:textColor="#999" android:textSize="20sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
複製代碼

邊佔比

A的右邊對齊B總體寬度的30%處，無論A，B寬度變化

<TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="AAAAAAAAAA" android:textColor="#333" android:textSize="30sp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintRight_toLeftOf="@+id/percent_30"/>

    <View android:id="@+id/percent_30" android:layout_width="0.5dp" android:layout_height="match_parent" android:visibility="invisible" app:layout_constraintLeft_toLeftOf="@id/right" app:layout_constraintRight_toRightOf="@id/right" app:layout_constraintHorizontal_bias="0.3"/>

    <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="BBBBBBB" android:textColor="#999" android:textSize="20sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
複製代碼

總體佔比

A的總體寬度佔在B總體寬度的30%

<TextView android:id="@+id/left" android:layout_width="0dp" android:layout_height="wrap_content" tools:text="AAAAAAAAAA" android:textColor="#333" android:textSize="30sp" android:maxLines="1" android:ellipsize="end" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="@+id/right" app:layout_constraintRight_toLeftOf="@+id/percent_30"/>

    <View android:id="@+id/percent_30" android:layout_width="0.5dp" android:layout_height="match_parent" android:visibility="invisible" app:layout_constraintLeft_toLeftOf="@id/right" app:layout_constraintRight_toRightOf="@id/right" app:layout_constraintHorizontal_bias="0.3"/>

    <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="BBBBBBBBBBBBBB" android:textColor="#999" android:textSize="20sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
複製代碼

總體中線佔比

A總體始終處於B總體寬度的30%處，無論A寬度如何變化，即A的中線對齊B的水平30%處

<TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="AAAAAAAAAA" android:textColor="#333" android:textSize="30sp" android:maxLines="1" android:ellipsize="end" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="@+id/percent_30" app:layout_constraintRight_toLeftOf="@+id/percent_30"/>

    <View android:id="@+id/percent_30" android:layout_width="0.5dp" android:layout_height="match_parent" android:visibility="invisible" app:layout_constraintLeft_toLeftOf="@id/right" app:layout_constraintRight_toRightOf="@id/right" app:layout_constraintHorizontal_bias="0.3"/>

    <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="BBBBBBBBBBBBBB" android:textColor="#999" android:textSize="20sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
複製代碼

跟隨消失

B設置爲Gone，A跟隨B也爲Gone 這時須要用到輔助控件android.support.constraint.Group, 同時也不是直接操做B，並且操做Group；用Group將兩個控件綁定，設置Group消失時兩個一同消失

<TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="AAAAAAAAAA" android:textColor="#333" android:textSize="30sp" android:maxLines="1" android:ellipsize="end" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"/>

    <android.support.constraint.Group android:id="@+id/group" android:layout_width="0dp" android:layout_height="0dp" app:constraint_referenced_ids="left,right"/>

    <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="BBBBBBBBB" android:textColor="#999" android:textSize="20sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
複製代碼

代碼處的設置爲

view.findViewById(R.id.group).setVisibility(View.GONE);
複製代碼

視圖均分

大小各自均分

<TextView android:id="@+id/left" android:layout_width="0dp" android:layout_height="wrap_content" tools:text="AAAAAAAA" android:textColor="#333" android:textSize="30sp" android:maxLines="1" android:ellipsize="end" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/middle"/>

    <TextView android:id="@+id/middle" android:layout_width="0dp" android:layout_height="60dp" tools:text="C" android:textColor="#999" android:textSize="20sp" android:gravity="center" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@+id/left" app:layout_constraintRight_toLeftOf="@id/right"/>

    <TextView android:id="@+id/right" android:layout_width="0dp" android:layout_height="wrap_content" tools:text="BBBBB" android:textColor="#999" android:textSize="20sp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@+id/middle" app:layout_constraintRight_toRightOf="parent"/>
複製代碼

視圖間隔均分

大小各自不固定，相鄰間隔均分

<TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="AAAAAAAA" android:textColor="#333" android:textSize="30sp" android:maxLines="1" android:ellipsize="end" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/middle"/>

    <TextView android:id="@+id/middle" android:layout_width="wrap_content" android:layout_height="60dp" tools:text="C" android:textColor="#999" android:textSize="20sp" android:gravity="center" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@+id/left" app:layout_constraintRight_toLeftOf="@id/right"/>

    <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="BBBBB" android:textColor="#999" android:textSize="20sp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@+id/middle" app:layout_constraintRight_toRightOf="parent"/>
複製代碼

緊靠, 總體居中

AB緊靠，各自寬度不固定，但總體居中

單純這種效果用LinearLayout最簡單，如下以三個視圖相對父親居中爲例:（也可變成相對平級其它視圖居中）

<TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="AAAAAAAAA" android:textColor="#333" android:textSize="30sp" android:maxLines="1" android:ellipsize="end" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/middle" app:layout_constraintHorizontal_chainStyle="packed"/>

    <TextView android:id="@+id/middle" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="CCC" android:textColor="#999" android:textSize="20sp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@+id/left" app:layout_constraintRight_toLeftOf="@+id/right"/>

    <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="BBBBBBBBB" android:textColor="#999" android:textSize="20sp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toRightOf="@+id/middle"/>
複製代碼

緊靠, 邊居中

AB緊靠，各自寬度不固定，但相鄰邊居中，以平級其它視圖居中爲例（也可變成相對父親居中，相對父親居中便可用android.support.constraint.Guideline）

@+id/back_ground爲平級其餘視圖，用特殊背景色標識。 問題來了：若是是3個視圖要如何實現？

<View android:id="@+id/back_ground" android:layout_width="350dp" android:layout_height="60dp" app:layout_constraintRight_toRightOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:background="#E6E4E4"/>

    <View android:id="@+id/middle" android:layout_width="0.5dp" android:layout_height="match_parent" app:layout_constraintLeft_toLeftOf="@+id/back_ground" app:layout_constraintRight_toRightOf="@+id/back_ground"/>

    <TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="AAAAAAAA" android:textColor="#333" android:textSize="30sp" android:maxLines="1" android:ellipsize="end" app:layout_constraintTop_toTopOf="@+id/back_ground" app:layout_constraintBottom_toBottomOf="@+id/back_ground" app:layout_constraintRight_toLeftOf="@+id/middle"/>

    <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="BBBBB" android:textColor="#999" android:textSize="20sp" app:layout_constraintTop_toTopOf="@+id/back_ground" app:layout_constraintBottom_toBottomOf="@+id/back_ground" app:layout_constraintLeft_toRightOf="@+id/middle"/>
複製代碼

緊靠, 動態最大寬度

說明：該效果只能爲ConstraintLayout實現!

但願達到如下效果 B緊靠A，各自寬度非固定值，一旦B到達邊沿A寬度不能再增加，即A有最大寬度，但其由B決定（和LinearLayout的緊靠效果有點相似但徹底不一樣!） 即：

這種效果以往任何控件都沒法以屬性聲明的方式實現，除非配合代碼，但如今用ConstraintLayout了以後，爽了一啤! 展現ConstraintLayout強大功能的時候到了，上完整代碼

<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">

    <TextView android:id="@+id/left" android:layout_width="0dp" android:layout_height="wrap_content" tools:text="AAAAAAAAAAAAADDDDDDD" android:textColor="#333" android:textSize="30sp" android:maxLines="1" android:ellipsize="end" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/right" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintWidth_default="wrap" app:layout_constraintHorizontal_bias="0"/>

    <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="BBB" android:textColor="#999" android:textSize="20sp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@+id/left" app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
複製代碼