開篇約束屬性
app:layout_constraint_toOf后面跟parent或是view的id
image.png
image.png
剛開始學(xué)習(xí)constrainLayout的時(shí)候不太明白紅色那里是什么意思，原來這里是有三種寬高的含義:
wrap_content模式.png
fixed模式.png
match_constraints模式.png
其實(shí)這三種模式很好理解，分別對(duì)應(yīng)了以前的wrap_content卿城、固定寬高回懦、match_parent模式咙咽。只不過第三種有點(diǎn)不一樣关面，第三種模式是匹配約束的寬度演怎，約束有多寬大诸，那么寬就有多寬捅厂。
這三種代碼在xml中分別對(duì)應(yīng):
wrap_content模式代碼.png
wrap_content對(duì)應(yīng)圖.png
fixed模式代碼.png
fixed模式對(duì)應(yīng)圖.png
match_constrain模式代碼.png
match_constrain模式對(duì)應(yīng)圖.png
其實(shí)要說的就是第三種模式，就是將對(duì)應(yīng)的寬高設(shè)置成0dp资柔，這里可以理解成兩邊有相同的拉力焙贷，最后導(dǎo)致拉到了兩邊約束的位置，因此就是匹配到了最大約束的空間
app:layout_constrainedWidth屬性使用
image.png
先看下這張圖贿堰，button2的文字特別的長辙芍，并且此時(shí)要求寬度的模式是wrap_content。可以看到寬度已經(jīng)超過了自身的約束空間了故硅，那此時(shí)app:layout_constrainedWidth="true"庶灿，可以約束在約束空間內(nèi):
image.png
bias屬性使用:
這個(gè)沒什么好說的了，水平或者豎直方向的偏好設(shè)置吃衅。
image.png
大家一看就明白了往踢，app:layout_constraintHorizontal_bias="0.2"在約束空間里面占據(jù)水平20%的位置，如果沒加這個(gè)屬性就是約束的中間位置徘层。
goneMargin屬性使用:
其實(shí)要我理解這個(gè)跟正常的margin沒啥區(qū)別峻呕，意思就是在約束控件gone的時(shí)候起作用了。下面寫個(gè)事例來瞧瞧:
layout_goneMarginLeft.png
layout_goneMarginLeft正常圖.png
layout_goneMarginLeft起作用的時(shí)候圖.png
button1隱藏后代碼.png
可以看出來只有在另外一個(gè)相對(duì)應(yīng)的約束方向上的view隱藏時(shí)候趣效，goneMargin才會(huì)起作用了山上。個(gè)人覺得這種情況很少會(huì)用，理解即可英支。
app:layout_constraintDimensionRatio(比例尺寸屬性)
用這個(gè)屬性的時(shí)候，保證寬哮伟、高有一邊是固定的值干花，才能達(dá)到比例的效果，這里舉例說明下就可以了:
image.png
看到上面的button了沒楞黄，寬度是匹配約束的空間池凄，高度是寬度的三分之二。
chainStyle鏈表
事例圖.png
看到這個(gè)效果鬼廓，可以看出來這里面的控件都是上下居中的肿仑，看看用constrainLayout如何搞定：
代碼.png
看到?jīng)]有這里運(yùn)用到了app:layout_constraintVertical_chainStyle="packed"這個(gè)屬性，在用鏈表結(jié)構(gòu)的時(shí)候碎税，需要上下相互構(gòu)成約束的關(guān)系尤慰，鏈表結(jié)構(gòu)才會(huì)起作用，關(guān)于其他幾種鏈表結(jié)構(gòu)雷蹂，官網(wǎng)也有說明圖:
鏈表圖.png
如果這里不設(shè)置的話伟端，默認(rèn)就是spread模式。
Guideline
image.png
image.png
Guideline其實(shí)就是一個(gè)不可見的view匪煌，這里當(dāng)做一個(gè)輔助的控件來看:
image.png
Barrier
** Barrier**其實(shí)在項(xiàng)目里面還沒涉及到责蝠，看到有人說過該控件，就拿出來試試了萎庭，先來看一個(gè)事例:
image.png
<View
android:id="@+id/view_bg"
android:layout_width="0dp"
android:layout_height="120dp"
android:background="@mipmap/shop_back" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/iv_head"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginLeft="@dimen/dp_20"
android:src="@mipmap/sys_icon"
app:layout_constraintBottom_toBottomOf="@+id/view_bg"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/view_bg" />
<TextView
android:id="@+id/tv_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2434"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="@+id/view_bg"
app:layout_constraintBottom_toTopOf="@id/tv_2"
app:layout_constraintLeft_toLeftOf="@id/tv_2"
app:layout_constraintLeft_toRightOf="@+id/iv_head"
app:layout_constraintRight_toRightOf="@id/tv_2"
app:layout_constraintTop_toTopOf="@+id/view_bg"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="@+id/tv_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="37dp"
android:maxWidth="200dp"
android:text="已有營幣"
android:textColor="#ffffff"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="@id/view_bg"
app:layout_constraintLeft_toRightOf="@+id/iv_head"
app:layout_constraintTop_toBottomOf="@+id/tv_1" />
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="tv_1,tv_2" />
<View
android:id="@+id/view_vertical"
android:layout_width="0.5dp"
android:layout_height="29dp"
android:layout_marginLeft="29dp"
android:background="@android:color/white"
app:layout_constraintBottom_toBottomOf="@+id/view_bg"
app:layout_constraintLeft_toRightOf="@id/barrier"
app:layout_constraintRight_toLeftOf="@id/barrier1"
app:layout_constraintTop_toTopOf="@+id/view_bg" />
<TextView
android:id="@+id/tv_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10005"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="@+id/view_bg"
app:layout_constraintBottom_toTopOf="@id/tv_4"
app:layout_constraintLeft_toLeftOf="@+id/tv_4"
app:layout_constraintRight_toRightOf="@+id/tv_4"
app:layout_constraintTop_toTopOf="@+id/view_bg"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="@+id/tv_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="29dp"
android:text="已有經(jīng)驗(yàn)值"
android:textColor="#ffffff"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="@id/view_bg"
app:layout_constraintLeft_toRightOf="@+id/view_vertical"
app:layout_constraintTop_toBottomOf="@+id/tv_3" />
<android.support.constraint.Barrier
android:id="@+id/barrier1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="tv_3,tv_4" />
這里可以看成是由三塊組成的霜医，上面圖中，右邊兩塊都去用了barrier設(shè)置了塊狀的布局驳规，分別都設(shè)置了app:barrierDirection屬性肴敛，該屬性表示整個(gè)塊狀的約束方向，在上圖中如果塊狀中的內(nèi)容加長的時(shí)候达舒，barrier會(huì)默認(rèn)去加長的值朋。其實(shí)在用Barrier的時(shí)候有缺點(diǎn)叹侄，說是可以把幾個(gè)view當(dāng)做一個(gè)整體，但是往往不能整體調(diào)節(jié)他們的位置昨登，只能去控制相鄰的view跟該Barrier的屬性關(guān)系趾代。
Group使用
group的使用也是跟Barrier差不多丰辣，唯一的區(qū)別是group可以整體控制自己的子view的屬性撒强，舉例說明:
image.png
比如說這里如果營幣=0的時(shí)候，讓這塊不顯示笙什，那么此時(shí)直接這么寫:
<View
android:id="@+id/view_bg"
android:layout_width="0dp"
android:layout_height="120dp"
android:background="@mipmap/shop_back" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/iv_head"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginLeft="@dimen/dp_20"
android:src="@mipmap/sys_icon"
app:layout_constraintBottom_toBottomOf="@+id/view_bg"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/view_bg" />
<TextView
android:id="@+id/tv_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="@+id/view_bg"
app:layout_constraintBottom_toTopOf="@id/tv_2"
app:layout_constraintLeft_toLeftOf="@id/tv_2"
app:layout_constraintRight_toRightOf="@id/tv_2"
app:layout_constraintTop_toTopOf="@+id/view_bg"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="@+id/tv_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="37dp"
android:maxWidth="200dp"
android:text="已有營幣"
android:textColor="#ffffff"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="@id/view_bg"
app:layout_constraintLeft_toRightOf="@id/iv_head"
app:layout_constraintTop_toBottomOf="@+id/tv_1" />
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:constraint_referenced_ids="tv_1,tv_2" />
總結(jié):
我也是剛在項(xiàng)目中接觸constrainLayout飘哨，剛開始真的別扭，在有的地方還是需要包裹幾個(gè)view的情況琐凭，如果constrainLayout有整體操作幾個(gè)view的位置的話芽隆，你可以提出來，歡迎大家給我提出您的想法!!!
