Say Hello to ConstraintLayout

時間 2019-11-05

標籤 say hello constraintlayout 简体版

原文原文鏈接

ConstraintLayout介紹

ConstraintLayout讓你能夠在很平的view結構(沒有多層佈局嵌套)中構建一個複雜的佈局結構. 有點像RelativeLayout, 全部的view都是根據它和兄弟View和父layout的關係佈局的, 可是它比RelativeLayout要更加靈活, 在Layout Editor中也更加好用.html

在Layout Editor中你能夠直接靠拖拽來構建ConstraintLayout.android

爲了在ConstraintLayout中定義一個view的位置, 你必須給view加上兩條或多條約束(constraints). 每一條約束表明了一種和其餘View(或parent, 或不可見的guideline)之間的聯繫或者對齊關係.git

每一條約束都規定了這個view沿着水平或豎直軸的一個位置, 因此每一個View在每一個軸上都必須至少有一條約束(可是一般須要更多).github

Setup

首先確認下載support庫, 在Tools > Android > SDK Manager的SDK Toolstab下:
展開Support Repository, check ConstraintLayout for Android和Solver for ConstraintLayout.
Check Show Package Details, 顯示版本信息.ide

好比當前我最新的版本信息是1.0.0-beta4, 我在module的build.gradle中添加:佈局

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
}

而後點擊Sync便可.gradle

轉換已有佈局

咱們能夠新建佈局, 而後讓它的根節點是android.support.constraint.ConstraintLayout.ui

除此以外, 咱們還能夠直接轉換已有佈局.
打開Layout, 切換到Designtab, 而後在Component Tree窗口, 右擊佈局而後選擇最底部的Convert XXXLayout(這裏是你佈局節點的類型) to ConstraintLayout.3d

添加約束

在Design模式下, 從Palette窗口中拖一個View到editor中去. 當你把一個View加入到ConstraintLayout中以後, 它會展現出一個bounding box, 四角的四個小方塊用來拖拽調節大小, 每個邊上都有一個小圓點用來創建約束.
這些小方塊和小圓點都被稱爲handles.code

點擊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).