ConstrainLayout 是 AndroidStudio2.2 的新特性，能夠很方便的用于可視化開發(fā)，有點類似于 ios 的 storyboard，解決了 xml 過于復(fù)雜的問題。

約束

相對定位（Relative positioning）

也就是我們之前常用的relativelayout，屬性也與其一致，使用方法如：layout_constraintLeft_toLeftOf，位置用一張圖片解釋。

邊距（Margins）

同之前的margin使用方法。

• goneMargin

  簡單的解釋，就是當(dāng)位置約束的目標(biāo)可見性為View.Gone時，可以調(diào)整它的邊距值變?yōu)榕c父布局的margin值。下文將有示例解釋。

居中定位（Centering positioning）

如下，通過定義top, bottom, start, end就可以使textview在parent居中顯示。

<TextView
 android:id="@+id/textView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="TextView"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

傾向（bias）

bias = 0.3

• layout_constraintHorizontal_bias：水平偏向

• layout_constraintVertical_bias：垂直偏向

• 0為最左上，1為最右下，默認(rèn)為0.5。

圓定位（Circular positioning）（1.1新特性）

• layout_constraintCircle : 參照的控件id（圓心）

• layout_constraintCircleRadius : 距離參照物的距離（兩控件中心點間距離）

• layout_constraintCircleAngle : 偏移角度（0為正上方，0~360）

可見性行為（Visibility behavior）

這是針對View.GONE的特定處理。Gone隱藏的控件，會被當(dāng)成一個點，同時忽略margin。如圖。

• 當(dāng)A消失時，B的邊距將為原來與A的約束邊距。

• 另一種方法，用goneMargin生成新的邊距，而原來與A的約束邊距將不起作用。

• 這種特定的行為可以做到特殊的布局，比如上圖A消失時B位置不變，設(shè)A寬度為100，邊距為10，B對A約束為20，那么goneMargin=100+10+20=130，則可以實現(xiàn)A隱藏后B位置不變。

尺寸約束（Dimensions constraints）

• 可以定義ConstraintLayout布局的尺寸

• 可以定義控件的尺寸，有三種方式：

• 1. 確定尺寸：123dp

• 2. WRAP_CONTENT

  3. 0dp

• 0dp，相當(dāng)于match_constraint，意思就是填滿約束的空間。如果設(shè)置了margin值，也需要去掉margin的空間。

比例（Ratio)

• 可以按比例設(shè)置控件的寬高，定義其中一個維度為0dp，并設(shè)置屬性layout_constraintDimensionRatio，值可以為0~1的浮點數(shù)或比例x:x。

• 可以設(shè)置兩個維度均為0dp，同時在ratio值前加W或H分別約束寬度或高度。

     <Button android:layout_width="0dp"
     android:layout_height="0dp"
     app:layout_constraintDimensionRatio="H,16:9"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintTop_toTopOf="parent"/>

• 如上，將以button的最大約束寬度，16:9的比例定義button的高度

鏈條（Chains）

• 將一個維度的一組控件組成一個鏈條，另一個維度可以單獨(dú)控制，相當(dāng)于綁成一個組件。

• 一組部件通過雙向連接就形成一個鏈條。

• 水平鏈的最左邊和豎直鏈的最上邊成為鏈頭。

• 如果連接中設(shè)置了margin，要考慮在內(nèi)。

• 鏈條樣式（Chain Style）

  給鏈條第一個元素設(shè)置屬性layout_constraintHorizontal_chainStyle 或layout_constraintVertical_chainStyle，則鏈條會根據(jù)樣式更改。（默認(rèn)CHAIN_SPREAD）

  • spread：元素間分散開

  • spread_inside：端點除外，元素間分散開，如上圖區(qū)別

  • packed：元素間打包，即貼在一起

• 權(quán)重鏈（Weighted chains）

  類似LinearLayout里的WEIGHT屬性，若元素使用MATCH_CONSTRAINT，就是這些元素使用約束后的空間。

  • layout_constraintHorizontal_weight

  • layout_constraintVertical_weight

虛擬輔助元素（Virtual Helper objects）

可以使用輔助對象來創(chuàng)建相對約束，可以通過水平或垂直的Guideline來定位控件。

• Guideline

  • 不會被顯示，只會輔助布局

  • 定位Guideline有三種方式：

    layout_constraintGuide_begin：距離左側(cè)或頂部的固定距離

    layout_constraintGuide_end：距離右側(cè)或底部的固定距離

    layout_constraintGuide_percent：父控件的高度或?qū)挾鹊陌俜直?/p>

可視化操作

約束控鍵類型

• 調(diào)整尺寸大?。赫叫嗡慕?/p>

• 側(cè)邊約束：四邊圓形，約束四邊的位置

• 基線約束：文字下方條狀，用于對齊文字

添加約束

• 點擊控鍵，選中圓點拖動到要約束的位置。如圖，要將控件放于左上角，將左邊和上邊分別拉到屏幕邊緣即可。

• 兩個控件間添加約束，要將第二個textview放于第一個的下方，只需要將左邊約束對齊，上邊約束到第一個textview的下方即可。要注意的是，添加完約束后，會有一個默認(rèn)margin值，導(dǎo)致左邊沒對齊，此時在右側(cè)的Attributes中將margin調(diào)為0即可。

刪除約束

• 刪除單個約束：點擊具體的約束發(fā)起點即可刪除。

• 刪除單個控件的所有約束：點擊控件，在左下方有刪除所有約束的按鈕，點擊即可。

• 刪除整個界面的所有約束：在上方工具欄找到

  按鈕即可刪除。

Inspector的使用

這個界面就是控件的屬性。我們除了可以修改一些基本屬性，還有一些新的功能。

• 修改尺寸

  這里有三種尺寸描述方式：

  • 
    

    ：wrap_content

  • 
    

    ：固定數(shù)值（100dp）

  • 
    

    ：match_constraint

  關(guān)于這三個屬性的區(qū)別上面已經(jīng)解釋過，大家看動圖可以觀察出區(qū)別。

• 調(diào)整bias

  滑動那個滑塊調(diào)節(jié)即可。

• 使用guideline

  可以使用guideline進(jìn)行百分比布局，再不用擔(dān)心適配問題了。

• 自動添加約束

  在上方的工具欄找到
  
  

  ，就可以開啟AutoConnect，雖然有時候可能不能達(dá)到你想要的布局，但大部分時候可以減輕你的工作量。

總結(jié)

參考官方文檔
用constraintLayout可以完全替換掉之前的linearLayout和relativeLayout，使用也很方便，希望能幫大家快速上手。