ConstraintLayout功能介紹

一信不、簡介

**ConstraintLayout **中文叫約束布局,是谷歌最新推出的布局組件亡呵,經(jīng)過一年多的發(fā)展已經(jīng)發(fā)布了正式版抽活。它是一用靈活的方式處理位置和大小的ViewGroup 組件。

優(yōu)點:

1锰什、向前兼容性下硕。作為獨立的support庫,可以使我們在最低API 9的版本上面使用汁胆。

2梭姓、功能多樣。支持各種位置展示嫩码、布局排列的效果誉尖,在后續(xù)介紹中會有詳細講解。

3铸题、可視化操作铡恕。在Android Stuido 布局管理器中的“Design”面板可以很方便的拖拽控件,新增丢间、刪除約束探熔。

4、后續(xù)潛力烘挫。谷歌在官網(wǎng)明確指出會每隔一段時間不斷豐富它的api和功能祭刚,發(fā)展?jié)摿χ档闷诖?/p>

5、有效的降低UI層級。由于每個view都是相互約束的關(guān)系涡驮,層級大大降低了。

缺點:

1喜滨、使用復(fù)雜捉捅。約束布局中有大量可配置的屬性,且互相搭配會有不同的效果虽风,上手難度較高棒口。

二、功能

“約束布局”顧名思義通過約束來控制子view的位置和大小辜膝。

現(xiàn)階段你可以使用它如下不同種類的約束:

l Relative positioning 相對定位

相對定位的操作類似android系統(tǒng)自帶的“RelativeLayout”无牵,支持一個view相對于其他view展示自己的位置。

目前支持的位置關(guān)系如圖所示

image.png

例如:現(xiàn)在需要一個B控件展示在A的右側(cè)

image.png
image.png

所有相對定位的種類如下所示

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

l Margins間距

1.間距

約束間距屬性如下

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

注意:和默認的內(nèi)置布局間距可以設(shè)置為負數(shù)不同厂抖,約束布局的子view間距只能是大于等于0的值茎毁。

2.不可見間距

如果當(dāng)前view依賴的其他view被設(shè)置成為了Gone,我們可以設(shè)置這種情況下的不同間距忱辅。

對應(yīng)的View不可見時間距種類如下

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

例如:現(xiàn)在需要一個B控件展示在A的右側(cè)七蜘,但是如果A沒數(shù)據(jù)不顯示的時候B取消左間距

image.png
image.png

l Centering positioning and bias中心定位和偏移量

1. 中心定位

約束布局可以完成看似不可能的布局約束

例如:如下所示

image.png
image.png

如上圖約束布局沒辦法同時滿足和父控件左對齊又和父控件右對齊,因此會強制平等的拉

當(dāng)前的view墙懂,因此當(dāng)前的view就實現(xiàn)了居中對齊橡卤,這種情況同樣適用于豎直的約束。

2. 偏移

默認的相對約束(見上個例子)是居中展示的损搬,但是可以通過偏移屬性碧库,設(shè)置居左或居右

image.png
image.png

設(shè)置了水平方向的偏移量,button就在從左邊原點向右30%偏移巧勤,這種情況同樣適用于豎直的約束嵌灰。

l Circular positioning 圓形定位

你可以約束一個控件相對于另一個控件的中心點的距離和角度來展示view的位置。

設(shè)置種類如下

layout_constraintCircle
layout_constraintCircleRadius
layout_constraintCircleAngle

image.png
image.png

l Visibility behavior 可見式行為

約束布局對子view被設(shè)置為Gone的情況有自己特色的處理方式

通常的布局如果view被設(shè)置為Gone踢关,那么它不會被顯示出來而且不再是布局的一部分伞鲫。

但是作為一個重要的區(qū)別,約束布局在子view被設(shè)置為Gone以后依然被認為是布局中的一部分签舞。

1.對于布局傳遞(layout pass)秕脓,當(dāng)前Gone view的尺寸被設(shè)置為0(通常這種情況被當(dāng)做成一個點)

2.如果其他view依賴與當(dāng)前Gone view的約束,那么這個Gone view依然會被作為一個已存在的view儒搭,只是它的間距全部為0

image.png
image.png
image.png

l Dimensions constraints 尺寸約束

1. 約束布局中的最小最大尺寸

設(shè)置種類如下

android:minWidth
android:minHeight
android:maxWidth
android:maxHeight

當(dāng)前view尺寸被設(shè)置為WRAP_CONTENT的時候上面的設(shè)置會起作用

  1. 尺寸約束

android:layout_width 和 android:layout_height有如下的三種方式

a. 指定具體的值(比如設(shè)置為123dp或在dimens.xml定義的引用)

b. 使用WRAP_CONTENT吠架,這樣當(dāng)前view自己計算它的大小

c. 0dp,和MATCH_CONSTRAINT 效果一樣

image.png

前面兩種布局和其他布局效果是一樣的搂鲫,但是MATCH_CONSTRAINT在約束布局里面會被重新調(diào)整大小傍药。

(a)寬度為WRAP_CONTENT

(b)寬度為0dp

(c)寬度為0dp,并且有一個左邊的間距

注意:MATCH_PARENT在約束布局中不被推薦使用

3. WRAP_CONTENT強制約束

如果設(shè)置為設(shè)置為WRAP_CONTENT,但是實際長度超過了約束拐辽,可以通過如下設(shè)置來確定否強制約束

app:layout_constrainedWidth="true|false" app:layout_constrainedHeight="true|false"

  1. MATCH_CONSTRAINT尺寸

當(dāng)一個view被設(shè)置為MATCH_CONSTRAINT時會把所有可用的空間都占用拣挪,這時使用android:minWidth 等屬性是不會起效的,但是可以用以下幾種屬性控制它

layout_constraintWidth_min
layout_constraintHeight_min
layout_constraintWidth_max
layout_constraintHeight_max
layout_constraintWidth_percent
layout_constraintHeight_percent

5. 百分比尺寸

為了使用百分比功能需要設(shè)置如下屬性

a. 尺寸必須設(shè)置為MATCH_CONSTRAINT

b. 默認的約束設(shè)置成百分比(1.1beta1或1.1bate2必須要俱诸,后續(xù)版本不需要)

layout_constraintWidth_default="percent"

layout_constraintHeight_default="percent"

c. 最后設(shè)置百分比屬性登失,值為0到1之間

layout_constraintWidth_percent layout_constraintHeight_percent

  1. 比率

可以設(shè)置一個view自己的寬高比烙无,前提是寬和高有一個要設(shè)置為0dp。

例如:設(shè)置一個view寬和高一樣

image.png
image.png

比率可以是一個浮點類型的值,也可以是寬和高的比稍刀。

也可以同時設(shè)置寬高0dp 罢绽,系統(tǒng)會以最大尺寸滿足所有的約束條件师逸,并維持寬高比津滞。通過添加一個單獨的“H”或“W”來設(shè)置是通過寬還是高的比率來約束。

image.png
image.png

思考:上面的例子如果換成W,16:9會是什么效果锌唾?

l Chains 鏈

鏈提供了在單個軸(水平或豎直)上的一組行為的锄码,另一個軸的行為

創(chuàng)造一個鏈

如果一系列的view彼此通過雙向關(guān)系連接在一起就被認為是一條鏈

image.png

鏈頭

鏈被第一個元素的屬性控制(鏈的頭)

image.png

橫向的鏈它的頭是左邊的第一個元素,豎向的鏈它的頭是頂部的第一個元素

鏈的間距

如果關(guān)系中指定間距鸠珠,會根據(jù)情況來處理巍耗。比如“spread chains”,會被從可用的空間中去除

鏈的類型

在鏈頭添加layout_constraintHorizontal_chainStyle 或 layout_constraintVertical_chainStyle屬性渐排,鏈的行為會被改變炬太。

類型有如下幾種:

CHAIN_SPREAD -所有元素會被展開(默認情況)

WEIGHTED_CHAIN -在CHAIN_SPREAD 的模式下,如果一些view被設(shè)置為MATCH_CONSTRAINT驯耻,它們會被分開盡可能的位置亲族。

CHAIN_SPREAD_INSIDE-類似CHAIN_SPREAD 模式,但是鏈的端點處的兩個view不會擴展可缚。

CHAIN_PACKED-鏈的元素都會被擠滿霎迫,水平或豎直的比率(bias)屬性會影響包裹的元素的位置。

image.png

間距和鏈

鏈里面的元素它們的間距會被累加

例如帘靡,一個水平的鏈知给,一個元素定義了一個右間距10dp,下一個元素定義了一個左間距5dp描姚,這兩個元素之間的間距就是15dp

虛擬的幫助對象

Guideline 對象允許你創(chuàng)建水平或豎直的指南涩赢,可以幫助view確定相對于約束布局內(nèi)的位置。
例如通過一個Guideline左邊約束Button定位在適當(dāng)?shù)牡胤?/p>

image.png
image.png

部分圖片及參考資料來源:https://developer.android.com/reference/android/support/constraint/ConstraintLayout#CenteringPositioning

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末轩勘,一起剝皮案震驚了整個濱河市筒扒,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌绊寻,老刑警劉巖花墩,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件悬秉,死亡現(xiàn)場離奇詭異,居然都是意外死亡冰蘑,警方通過查閱死者的電腦和手機和泌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來祠肥,“玉大人允跑,你說我怎么就攤上這事√赂蹋” “怎么了?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵索烹,是天一觀的道長工碾。 經(jīng)常有香客問我,道長百姓,這世上最難降的妖魔是什么渊额? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮垒拢,結(jié)果婚禮上旬迹,老公的妹妹穿的比我還像新娘。我一直安慰自己求类,他們只是感情好奔垦,可當(dāng)我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著尸疆,像睡著了一般椿猎。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上寿弱,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天犯眠,我揣著相機與錄音,去河邊找鬼症革。 笑死筐咧,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的噪矛。 我是一名探鬼主播量蕊,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼摩疑!你這毒婦竟也來了危融?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤雷袋,失蹤者是張志新(化名)和其女友劉穎吉殃,沒想到半個月后辞居,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡蛋勺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年瓦灶,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片抱完。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡贼陶,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出巧娱,到底是詐尸還是另有隱情碉怔,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布禁添,位于F島的核電站撮胧,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏老翘。R本人自食惡果不足惜芹啥,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望铺峭。 院中可真熱鬧墓怀,春花似錦、人聲如沸卫键。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽永罚。三九已至啤呼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間呢袱,已是汗流浹背官扣。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留羞福,地道東北人惕蹄。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像治专,于是被迫代替她去往敵國和親卖陵。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,724評論 2 354