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