摘要：使用檢查依賴(lài)項(xiàng)，是否添加此依賴(lài)庫(kù)。起，官方的模板默認(rèn)使用。效果如圖所示設(shè)置寬高比例當(dāng)或者設(shè)置為時(shí)，還可以通過(guò)設(shè)置寬高比例。該比例默認(rèn)表示的值。使用設(shè)置寬度和高度的比值來(lái)靈活設(shè)置的尺寸。這個(gè)屬性有點(diǎn)像中的屬性平分布局。

Hi，大家好，看到標(biāo)題后大家是不是一臉懵逼，這是啥？這小編搞事情？說(shuō)好的六大布局咋又來(lái)個(gè)布局殺手？這就是咱們公眾號(hào)和其他公眾號(hào)的不同，我們并不是照本宣科的講解Android知識(shí)，而是將項(xiàng)目當(dāng)中實(shí)際運(yùn)用到的并且是好用的東西分享給大家，還等什么呢？趕緊開(kāi)始我們的學(xué)習(xí)吧?。?/p> 引入

簡(jiǎn)介：約束布局（ConstraintLayout） 是一個(gè)ViewGroup，它的出現(xiàn)主要是為了解決布局嵌套過(guò)多的問(wèn)題，以靈活的方式定位和調(diào)整View。

說(shuō)明：本博文是以ConstraintLayout1.1.3為基礎(chǔ)編寫(xiě)，不同的依賴(lài)版本有不同的屬性和方法，如果依照博文編寫(xiě)demo發(fā)現(xiàn)編譯出錯(cuò)，請(qǐng)自行研究更新版本的約束布局或者與博主版本保持一致。

使用：檢查依賴(lài)項(xiàng)，是否添加此依賴(lài)庫(kù)。

//Android Studio2.3起，官方的模板默認(rèn)使用ConstraintLayout。更新gradle插件版本之后，創(chuàng)建項(xiàng)目已經(jīng)自動(dòng)依賴(lài)，如果是老項(xiàng)目想要使用約束布局依賴(lài)如此
dependencies {   
    implementation "com.android.support.constraint:constraint-layout:1.1.3"   
}

在Android Studio2.3之后，創(chuàng)建一個(gè)layout文件，默認(rèn)使用布局如下：

從上面發(fā)現(xiàn)有四個(gè)屬性：

layout_constraintBottom_toBottomOf="parent" //View下邊對(duì)齊parent底部
layout_constraintLeft_toLeftOf="parent"     //View左邊對(duì)齊parent左邊
layout_constraintRight_toRightOf="parent"   //View右邊對(duì)齊parent右邊
layout_constraintTop_toTopOf="parent"       //View上邊對(duì)齊parent上邊

除此之外還有幾個(gè)其他的常用屬性，表示View之間的關(guān)系

layout_constraintBottom_toTopOf="parent"    //View下邊對(duì)齊parent上邊
layout_constraintLeft_toRightOf="parent"    //View左邊對(duì)齊parent右邊
layout_constraintRight_toLeftOf="parent"    //View右邊對(duì)齊parent左邊
layout_constraintTop_toBottomOf="parent"    //View上邊對(duì)齊parent下邊

注意：此處parent可以換成其他想要與之關(guān)聯(lián)的View的控件ID

模板中聲明了一個(gè)TextView，且處于屏幕中間。如何做到的呢？上面四個(gè)屬性顧名思義都指定了TextView與Parent(父布局)的關(guān)系，約束布局如果不指定水平和豎直方向的百分比，默認(rèn)是50%，所以會(huì)居中。如果想要指定百分比使用如下屬性：(使用橫向比例需要指定左右關(guān)系，使用豎直比例需要指定上下關(guān)系)

layout_constraintHorizontal_bias="0.4"
layout_constraintVertical_bias="0.5"
這里有人會(huì)問(wèn)，按照設(shè)計(jì)圖的比例如何確定這個(gè)比例呢：這里有一個(gè)公式和描述是經(jīng)過(guò)驗(yàn)證的
1.bias值=子View左相關(guān)的長(zhǎng)度/(子View左相關(guān)的長(zhǎng)度+其右相關(guān)的長(zhǎng)度)
2.bias值與左相關(guān)的長(zhǎng)度是成正比的，增大bias值，子View的左相關(guān)總是隨之增長(zhǎng)。至于控件具體往左往右移動(dòng)，則視子View與關(guān)聯(lián)控件的哪邊相關(guān)。

無(wú)圖無(wú)真相，計(jì)算說(shuō)明這么復(fù)雜，想要搞暈我？直接上圖！

所以我們知道：想要使用約束布局固定一個(gè)View的位置，需要通過(guò)其與目標(biāo)View相對(duì)的距離、位置，且從上(top)左(left)下(bottom)右(right)至少三個(gè)方位來(lái)說(shuō)明關(guān)系

當(dāng) ConstraintLayout 子布局的寬或高設(shè)置為0dp時(shí)，可以對(duì)寬或高設(shè)置百分比

使用layout_constraintHeight_percent和layout_constraintWidth_percent屬性設(shè)置橫豎方向占比來(lái)確定寬度和高度，而不用具體尺寸，可以使用此屬性做一般View的屏幕適配。效果如圖所示：

當(dāng) layout_width或者 layout_height設(shè)置為0dp時(shí)，還可以通過(guò) layout_constraintDimensionRatio設(shè)置寬高比例。該比例默認(rèn)表示 width:height的值。

使用layout_constraintDimensionRatio設(shè)置寬度和高度的比值來(lái)靈活設(shè)置View的尺寸。如果想要表示高度：寬度則可以配置屬性類(lèi)似h,16:9的含義是 h:w=16:9 也可設(shè)置 w,9:16是一樣的。效果如圖所示：

當(dāng)一個(gè)view的寬或高,設(shè)置成wrap_content時(shí)

實(shí)現(xiàn)效果如圖所示：

納尼，怎么回事，不是應(yīng)該右邊不會(huì)超出父布局的么，我已經(jīng)設(shè)置了layout_constraintRight_toRightOf="parent"，這個(gè)就是設(shè)置了適應(yīng)內(nèi)容屬性后出現(xiàn)的問(wèn)題，此時(shí)需要強(qiáng)制使用約束寬度的屬性 ，你會(huì)發(fā)現(xiàn)效果正常了。

app:layout_constrainedWidth="true"http://在btn2上添加此屬性

可以通過(guò) layout_constraintHorizontal_chainStyle或 layout_constraintVertical_chainStyle設(shè)置鏈?zhǔn)娇丶臉邮?。這個(gè)屬性有點(diǎn)像 LinearLayout中的 weight 屬性平分布局。使用此屬性，通常是權(quán)重分配不滿足需求，但是又需要居中或者分配View的空間

先放一個(gè)官方解釋的示例圖

看完這個(gè)圖是不是還覺(jué)得一頭霧水，看起來(lái)很復(fù)雜的樣子？其實(shí)不然，在開(kāi)發(fā)中靈活使用此屬性則能事半功倍且適配效果很好。使用此屬性之前，需要把你即將連成鏈條的View彼此之間建立關(guān)聯(lián)關(guān)系，水平方向則是控件彼此左右關(guān)聯(lián)，豎直方向則是上下關(guān)聯(lián)，每相鄰兩個(gè)View之間必須緊緊關(guān)聯(lián)ID。即是：將一個(gè)方向上的控件形成鎖鏈(相互依賴(lài))，默認(rèn)屬性是spread

//在btn1上配置
app:layout_constraintHorizontal_chainStyle="spread_inside" 
//左右靠邊，中間剩余

//在btn1上配置
app:layout_constraintHorizontal_chainStyle="packed" 
//三個(gè)控件彼此緊靠且整體居中

//在btn1上配置
app:layout_constraintHorizontal_chainStyle="packed" 
app:layout_constraintHorizontal_bias="0.9"
//三個(gè)控件彼此緊靠且整體在橫方向設(shè)置比例處

由于文章篇幅有限，且實(shí)際項(xiàng)目中還沒(méi)有研究到更多更好用的新屬性，暫時(shí)就告一段落，后期還會(huì)有關(guān)約束布局的更多好的玩法推送給大家，如果有小伙伴發(fā)現(xiàn)更高效或者更實(shí)用的屬性，歡迎你們的留言，讓我們共同成長(zhǎng)吧~

PS:如果還有未看懂的小伙伴，歡迎加入我們的QQ技術(shù)交流群：892271582，里面有各種大神回答小伙伴們遇到的問(wèn)題哦~