`ConstraintLayout`讓你可以在很平的view結構(沒有多層佈局嵌套)中構建一個複雜的佈局結構. 有點像`RelativeLayout`, 所有的view都是根據它和兄弟View和父layout的關係佈局的, 但是它比`RelativeLayout`要更加靈活, 在Layout Edi... ...
ConstraintLayout介紹
ConstraintLayout讓你可以在很平的view結構(沒有多層佈局嵌套)中構建一個複雜的佈局結構. 有點像RelativeLayout, 所有的view都是根據它和兄弟View和父layout的關係佈局的, 但是它比RelativeLayout要更加靈活, 在Layout Editor中也更加好用.
在Layout Editor中你可以直接靠拖拽來構建ConstraintLayout.
為了在ConstraintLayout中定義一個view的位置, 你必須給view加上兩條或多條約束(constraints). 每一條約束代表了一種和其他View(或parent, 或不可見的guideline)之間的聯繫或者對齊關係.
每一條約束都規定了這個view沿著水平或豎直軸的一個位置, 所以每個View在每個軸上都必須至少有一條約束(但是通常需要更多).
Setup
首先確認下載support庫, 在Tools > Android > SDK Manager的SDK Toolstab下:
展開Support Repository, check ConstraintLayout for Android和Solver for ConstraintLayout.
Check Show Package Details, 顯示版本信息.
比如當前我最新的版本信息是1.0.0-beta4, 我在module的build.gradle中添加:
dependencies {
compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
}然後點擊Sync即可.
轉換已有佈局
我們可以新建佈局, 然後讓它的根節點是android.support.constraint.ConstraintLayout.
除此之外, 我們還可以直接轉換已有佈局.
打開Layout, 切換到Designtab, 然後在Component Tree視窗, 右擊佈局然後選擇最底部的Convert XXXLayout(這裡是你佈局節點的類型) to ConstraintLayout.
添加約束
在Design模式下, 從Palette視窗中拖一個View到editor中去. 當你把一個View加入到ConstraintLayout中之後, 它會展示出一個bounding box, 四角的四個小方塊用來拖拽調節大小, 每一個邊上都有一個小圓點用來建立約束.
這些小方塊和小圓點都被稱為handles.
點擊View, 然後點擊並拖住一個約束handle, 把它拖拽到一個可用的anchor point(另一個View的邊緣, layout的邊緣, 或者一個guideline).當你鬆手的時候, 約束就生效了. (有一個預設的margin)
有幾個規則:
- 每個View都至少有兩條約束: 一個水平的一個豎直的.
- 你只能在共用平面的handle和anchor point之間建立約束. 比如一個View的豎直平面只能和另一個豎直平面建立約束, baseline也只能和其他baseline建立約束.
- 每一個handle只能被用來建立一個約束, 但是你可以對一個anchor point建立(來自多個View的)多個約束.
要刪掉一個約束, 只需要選擇這個view, 點擊那個對應的handle.
如果你給同一個View加了兩個相反的約束, 約束的線條就會變成彈簧狀, 來顯示兩個相反方向的約束. 當View內容的尺寸固定或者是wrap的時候, 在這種情況下View就會在兩個約束下居中顯示, 如果你想讓它展開, 那麼就應該修改它的尺寸為Any Size; 如果你想要保持當前的尺寸, 你可以調節約束的權重.
通常情況下可以加的有這幾種約束:
- Parent constraint: View的邊和Parent的邊的關係.
- Position constraint: View之間水平和豎直的位置關係, 拖動可改變相對的margin距離.
- Alignment constraint: View邊之間的對齊關係, 對齊後可以調節偏移量.
- Baseline alignment constraint: 對齊View的text baseline, 要創建baseline約束, 首先選中View, 然後把滑鼠放在baseline上方兩秒鐘, 等它變白就可以拖到另一個baseline去建立約束了.
- Constrain to a guideline: 可以創建豎直或水平的guideline, 然後往上綁定約束, guideline對於用戶來說是不可見的. 放置guideline的時候可以根據相對於layout邊緣dp單位的距離, 也可以根據百分比.
Toolbar上有Guideline的按鈕, 點擊可選擇水平或豎直.
點擊Guideline尾部的小圓圈可以切換它到底是根據距離還是百分比放置的, 然後拖動它放到一個想要的位置.
使用Autoconnect和Infer Constraints
當打開Autoconnect模式之後, 每一個新加的View都會自動創建約束. Autoconnect模式預設是關閉的.
點擊Infer Constraints會給layout中當前所有的View創建約束, 這是一個一次性的action. 它會選擇建立最有效的約束, 所以它可能會建立離得很遠的兩個view之間的約束. 不像Autoconnect模式開啟下, 只給新加的View建立約束, 並且只選擇最近的元素.
調整View大小
可以通過拖拽View四個角的handles來改變View的大小, 但是這樣生成的是hard-coded的尺寸, 對於適配來講這樣是不好的.
你可以點擊View然後在Properties視窗編輯尺寸.
有三種尺寸模式:
- Wrap Content: 用
>>>圖形表示. - Any Size: 用彈簧圖形表示. 說明View會一直展開到滿足所有約束, 實際的值是0dp. 可以把它想象成"match constraints". 如果此時只有單邊的約束, 那麼它只展開到能放下自己的內容為止.
- Fixed: 用圖形
|-|表示, 固定尺寸.
可以通過點擊圖形符號來切換這些模式.
註意: 在ConstraintLayout中的View中不應該使用match_parent, 而是用"Any Size"(0dp).
調整約束偏差
當你給一個View的對立兩邊都添加了約束, 而View的尺寸是fixed或者wrap_content, 那麼預設情況下View就會居中顯示在兩個anchor point之間(bias=50%).
你可以通過拖拽View或者在Properties視窗中拖拽bias slider來改變它的偏移權重.
調節View邊距
可以在toolbar上點擊預設邊距(8)來修改.
註意這個修改只對修改後新添加的View生效.
每一個View的邊距都可以通過Properties視窗修改: 點擊約束線條上的margin數字.
註意提供的值都是8的倍數, 以確保你遵循了Material Design的建議.
