Android ConstraintLayout的基本使用

標籤：簡單   9.png   檔案中   技術分享   studio   目標   無法   介面布局   constrain   

升級Android studio到2.3版本之後，發現建立Activity或fragment時，xml布局預設布局由RelativeLayout更改為ConstraintLayout了，既然已經推薦使用ConstraintLayout,學會怎樣使用就很有必要了。本文的主要是目標是：圖文結合，講講怎樣使用ConstraintLayout。

引入ConstraintLayout

為了使用ConstraintLayout,需要在app/build.gradle檔案中添加相應依賴：

dependencies {    compile com.android.support.constraint:constraint-layout:1.0.1}

此前ConstraintLayout依賴庫版本號碼都帶有beta字眼，現在已經推出正式版本1.0.1。當然使用AS建立activity時，AS會自動添加這行依賴的。

建立ConstraintLayout

建立ConstraintLayout布局檔案後，開啟：

雖然ConstraintLayout和RelativeLayout等都是ViewGroup的子類，但RelativeLayout,FrameLayout等是位於widget包下的，ConstraintLayout則是在Support包下的。點擊介面左下角的“Design”和“Text”可以切換顯示視圖，“Design”視圖是可視化視圖，提供拖拽等功能實現介面布局；“Text”視圖是通過編寫xml代碼實現介面布局。

對於傳統布局，大部分開發人員都是通過編寫xml代碼來現實布局的，顯得“Design”這個視覺化檢視相當的雞肋。但對於ConstraintLayout來說，卻很適合使用這個視覺化檢視來實現布局，今天將使用“Design”視圖來說明ConstraintLayout的使用。先來觀察“Design”視圖，

左側地區是預設的控制項集合，頂部地區是操作欄位，右側地區則是預覽作用。

基本操作介面轉換

如果布局不是ConstraintLayout,可以通過操作進行轉換：

如果轉換前的介面是嵌套的，你可以選擇一層一層轉換，也可以選擇在根目錄轉換。使用的時候，發現這個轉換功能並不是很強大，不能確保轉換後介面保持一致。

添加控制項

如果想添加一個Button，只需從左側的Palette地區拖拽到預覽地區就可以了。拖拽完成後，會在布局中自動產生相應的xml代碼。“Design”工具是通過自動產生代碼來實現布局的，本質上還是通過xml實現布局。兩者是相互聯絡的，其中一個發生改變，另一個會對應改變。，添加一個Button:

通過拖拽，現在已經添加了一個Button。可以在“Text”視圖中看到，自動產生了xml代碼。雖然添加了Button，但由於還沒有給這個Button添加約束，所以在“Text”視圖下，可以看到Android Studio報錯了：沒有為view添加約束，但依然允許運行。由於沒有約束，Button並不知道自己所處的位置，實際運行效果和預覽效果是不一樣的，Button會出現在左上方。如果拖拽Button後，發現Button已經有約束，那麼肯定是開啟了AutoConnect開關，這個下文再詳說。

添加約束

選中Button，能在上下左右看到四個空心小圓圈，把滑鼠移動到小圓圈上，小圓圈會變成綠色。這四個小圓圈就是用來給Button添加約束的，實際上所有控制項view都有這樣的4個小圓圈。現在給Button左邊和右邊各添加一個約束，如所示：

只需選中小圓圈然後拖動滑鼠到父布局邊框即可成功添加約束。中，左側的預覽圖叫“Design”,右側藍色的視圖叫“Blueprint”，添加約束的操作在任意一個視圖上都可以完成。
上面的約束是控制項到父布局的約束，控制項和控制項間的約束也是類似。現在再添加一個Button，這個Button在上一個Button的下方，間距86dp(隨便給的),如：

刪除約束

刪除控制項的約束有多種方式：
1.刪除整個布局的約束，如：

2.刪除某一控制項的所有約束：選中該控制項，右鍵，選擇“Clear all Constraints”；或者，選中該控制項，點擊左下角的X符號；當然如果你整個控制項都刪除了，與之相關的約束也同時被刪除了。如：

3.刪除某個控制項的某個約束：選中該控制項後，會在控制項的上下左右顯示小圓圈，把滑鼠移到小圓圈上，如果沒有約束，小圓圈是綠色的；如果已經存在約束（每個小圓圈有且僅有一個約束），小圓圈是紅色的，點擊變紅的小圓圈就能刪除對應的約束了；或者從小紅圈重新拖拽一個新約束，也會替換掉舊約束。如：

查看控制項屬性

選中對應的控制項，點擊右側的“Properties”,開啟屬性面板，如

預設顯示較為常用的屬性，如果需要顯示更多屬性，滾動到底部，點擊View all properties查看所有的屬性。不確定這裡能否囊括了所有的屬性值，如果找不到，那隻能通過xml編寫了囖。至於修改控制項屬性，直接在該面板上修改即可。
下面重點關注屬性面板上的 Inspector視圖，如：

先說說較為直白的地方：
1.ID欄：這裡填寫的id就是標識view的ID;
2.layout_width和layout_height：描述控制項大小的，可以直接填寫數值決定大小，也可以選擇wrap_content或match_parent(這兩個選項，下面細說)，還可以直接拖動來決定控制項的大小，如：

新增一個Button，給上下左右添加上約束，此時，Button預設置中顯示，選中該Button，查看它的inspector，如所示：

觀察紅色框內的兩條軸，一條是垂直顯示的，一條是水平顯示，這兩條軸是用於確定Button位置的。現在Button是置中顯示，相應地可以看到這兩條軸上標識的數值都是50，如果拖動Button，可以看到相應的數值會發生變化。例如，水平向右拖動Button，水平軸上的數值會隨之變大（值的範圍在0-100之間）；按住水平軸上的數字進行拖動，能在水平方向上改變Button的位置。
現在將水平軸移到到最右邊，數值為100，觀察預覽圖：

儘管已經移動到最右邊了，但發現Button離最右邊還是有間距。這是因為生產約束時，系統預設設定了8dp的間距（margin）,如紅色框所示。可以點擊右邊紅色框內的數字修改間距。觀察預覽圖，發現每個約束上都有直線和波浪線。其中直線表示的是間距（margin）,波浪線則相當是上面提到的水平軸或垂直軸，在這裡拖動，用於改變Button的百分比位置。
每次添加約束都自動添加一個間距的話，也是挺煩，點擊的紅色框位置可以這樣把它幹掉：

控制項的size

上面提到了Button的layout_width和layout_height，和傳統布局相似，有三種：固定值、
wrap_content和match_parent,如所示：

1.<<< 圖案表示 wrap_content;
2.|-----| 圖案表示 固定值；
3.波浪線圖案表示 match_parent,這裡的match_parent和在RelativeLayout下的match_parent不同，RelativeLayout下的match_parent是用於填充滿當前控制項的父布局，而這裡的match_parent是用於填充滿當前控制項的約束規則。假設將layout_width設定為match_parent,那麼在水平方向上，不能再行動控制項，也就是上面說的水平軸移動不再生效，預覽圖中，控制項充滿約束規則。

當layout_width或layout_height設定為match_parent時，右上方會出現一個小三角，如：

這個小三角的作用是：切換縱橫比約束，簡單來說就是設定寬高的比例！如：

如果通過小三角設定縱橫比約束後，再通過手動更改寬高數值，那後者將覆蓋前者。

有了基本的瞭解後，我們來看看一些複雜點的情境。

對齊

對齊約束
實現兩個Button靠左對齊：添加兩個Button，一上一下，從Button A添加約束到Button B,如操作添加對齊約束：

或者使用Align進行對齊：選中所要對齊的控制項，點擊Align,最後選中對齊的方式即可，如操作：

從Button A添加靠左對齊約束到Button B後，我們發現，Button A將在水平方向上跟隨Button B移動。
除了這種對齊外，Android studio還提供了Guideline和Baseline對齊！

考慮下面的情境：假如現在有兩個Button，一上一下，水平方向都距離距離左邊30%，如：

按照我們上面所說的，應該這樣實現：將兩個Button的水平軸數值設定為30即可。但現在我想同時讓這兩個按鈕距離左邊40%（原來是30%），或者改為距離右邊40%。按照原來的做法，只能一個一個挨著去修改約束，有沒有更好的實現方式呢？ Guideline應運而生。

Guideline

添加Guideline,

Guideline有兩種，一種是垂直方向的，一種是水平方向的，現在觀察一下Guideline,如：

選中guideline，顯示一條虛線，頂部可以看到一個向左的箭頭，下方有一個數字（假設是80），
表示：距離父布局左邊80dp；點擊頂部箭頭，發現箭頭向右了，下方有一個數字（假設是300），表示：距離父布局右邊300dp；再次點擊頂部箭頭，發現箭頭變成了%符號，下方有一個百分比數字（假設是20%），表示在父布局水平方向20%的位置。我們可以拖動guideline更改數值。

guideline的作用
簡單來說就是輔助控制項確定位置的輔助線！
那怎樣實現上面提到的功能呢？先添加一個垂直guideline，再添加兩個Button，分別設定按鈕右側到guideline的約束，如：

這樣，拖動guideline，兩個Button都會隨著移動了。

現在我們實現了不同控制項以guideline為基準，隨guideline移動而移動。那怎樣實現一個控制項隨另一個控制項移動而移動呢， Baseline登場啦！

Baseline

添加Baseline
選中Button,點擊下方的

，就為view添加了baseline,如：

為兩個Button添加Baseline約束

拖入兩個Button,選中Button A，添加Baseline後，拖拽到Button B即可，如：

每個控制項的baseline只有一個，從Button A拖拽到Button B，B會自動產生baseline,現在兩個button已經建立baseline約束了。我們發現，Button A只能水平方向上拖動，垂直方向上無法拖動；Button B可以水平拖動，也可以垂直拖動，而且在垂直方向上移動時，Button A也會隨之移動。由A到B添加了baseline,意味著A在垂直方向上的位置只能由B來決定了，這就是Baseline的對齊作用。

自動添加約束

添加自動約束的方式有兩種：一個是Autoconnect

另一個是Infer Constraints

1.Autoconnect預設是關閉的，開啟後，添加控制項時，Android studio會檢測使用者的意圖，自動為控制項添加約束。比如，拖動一個Button到預覽圖水平置中的位置，AS檢測出可能是希望置中，就會顯示一條虛線，這時鬆開Button，就會自動為Button添加約束，如所示：

注意只有AS檢測出使用者意圖後（即預覽圖中出現虛線），才會自動添加約束，否則也不會有約束。
2.Infer Constraints和Autoconnect功能相似，但比後者更強大。Autoconnect是自動為正在操作的控制項添加約束，而infer Constraints則是自動為整個布局內的控制項添加約束。適用於較複雜的介面，為這樣的介面一鍵產生約束！
需要注意的是：通過這兩種方式自動添加的約束不一定符合要求，這時候手動修改就行了。

為自訂的控制項添加約束

Design介面運行拖動的控制項都是系統預設的控制項，對於自訂的控制項怎麼辦呢？
找不到可以直接將自訂控制項拖進面板的操作，可以先對一個基礎控制項（如Button）進行約束，然後再更改xml代碼，將自訂控制項替換該Button。對於自訂的屬性也需要手動編寫xml代碼。

Android ConstraintLayout的基本使用