五、ConstraintLayout(約束布局)布局介紹

參考:ConstraintLayout官方文檔

ConstraintLayout是一個ViewGroup它允許您以靈活的方式定位和調整小部件涮较。
ConstraintLayout可以作為一個支持庫,您可以在Android系統(tǒng)上使用API 9級(Gingerbread)。

目前可以使用各種類型的約束:

1.相對定位
2.邊緣
3.定心定位
4.圓形定位
5.可見性行為
6.尺寸限制
7.鏈
8.虛擬助手對象
9.優(yōu)化器

注意炫加,約束中不能具有循環(huán)依賴關系瑰煎。

開發(fā)指南

一.相對定位

相對定位是在約束布局中創(chuàng)建布局的基本構建塊之一。這些約束允許您將給定的小部件相對于另一個小部件定位俗孝【频椋可以在水平和垂直軸上約束小部件:

1.水平軸:左、右赋铝、起點和終點
2.垂直軸:頂部插勤、底部和文本基線

一般的概念是將控件的給定邊約束到任何其他窗口小部件的另一邊。
例如革骨,為了將按鈕B定位到按鈕A的右邊:


相對定位.jpg
<Button android:id="@+id/buttonA" ... />

<Button android:id="@+id/buttonB" ...
                 app:layout_constraintLeft_toRightOf="@+id/buttonA" />

這告訴系統(tǒng)农尖,我們希望按鈕B的左側被約束到按鈕A的右側。這樣的位置約束意味著系統(tǒng)將試圖使雙方共享相同的位置良哲。


相對定位約束.jpg

以下是可用約束的列表:

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

他們都引用了id對于另一個小部件盛卡,或父母(它將引用父容器,即約束布局):

<Button android:id="@+id/buttonB" ...
                 app:layout_constraintLeft_toLeftOf="parent" />
二筑凫、邊緣
相對定位裕度.jpg

如果設置了邊距滑沧,則它們將應用于相應的約束(如果存在),將邊距強制為目標和源邊之間的空間巍实。 通常的布局邊距屬性可用于此效果:

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

當位置約束目標的可見性為View.GONE時滓技,您還可以使用以下屬性指示要使用的不同邊距值:

app:layout_goneMarginStart
app:layout_goneMarginEnd
app:layout_goneMarginLeft
app:layout_goneMarginTop
app:layout_goneMarginRight
app:layout_goneMarginBottom
三、定心定位和偏置

ConstraintLayout是如何處理“不可能”的約束棚潦。例如令漂,如果我們有這樣的事情:

<android.support.constraint.ConstraintLayout ...>
       <Button 
              android:id="@+id/button" ... 
              app:layout_constraintLeft_toLeftOf="parent"               
              app:layout_constraintRight_toRightOf="parent/>
 </>

除非ConstraintLayout恰好具有與Button完全相同的大小,否則兩個約束不能同時滿足(雙方都不能成為我們希望它們的位置)丸边。


定心定位.jpg

在這種情況下發(fā)生的事情是叠必,約束的作用就像是相反的力量將小部件拉平; 這樣小部件最終將在父容器中居中。 這同樣適用于垂直約束原环。

偏壓

遇到這種相反的約束時的默認設置是使窗口小部件居中; 但是您可以使用偏差屬性調整定位以支持一側而不是另一側:

app:layout_constraintHorizontal_bias
app:layout_constraintVertical_bias
使用偏差定位定位.jpg

例如挠唆,以下將使左側具有30%的偏差而不是默認的50%,使得左側將更短嘱吗,小部件更傾向于左側:

<android.support.constraint.ConstraintLayout ...>
    <Button android:id="@+id/button" ... 
        app:layout_constraintHorizontal_bias="0.3"             
        app:layout_constraintLeft_toLeftOf="parent"   
        app:layout_constraintRight_toRightOf="parent/>
</>

使用偏差,您可以制作更好地適應屏幕尺寸變化的用戶界面滔驾。

四谒麦、圓形定位

你可以以角度和距離約束窗口小部件中心相對于另一個窗口小部件中心。 這允許你將小部件放在圓上哆致。 可以使用以下屬性:

app:layout_constraintCircle //引用另一個控件ID
app:layout_constraintCircleRadius //到其他控件中心的距離
app:layout_constraintCircleAngle //控件應該處于哪個角度(以度為單位绕德,從0到360)
圓形定位.jpg
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ... 
     app:layout_constraintCircle="@+id/buttonA"       
     app:layout_constraintCircleRadius="100dp"
     app:layout_constraintCircleAngle="45" />
五、可見性行為

像往常一樣摊阀,GONE小部件不會顯示耻蛇,也不是布局本身的一部分(即如果標記為GONE踪蹬,它們的實際尺寸將不會更改)。

對于布局傳遞臣咖,它們的尺寸將被視為零(基本上跃捣,它們將被解析為一個點)
如果他們對其他小部件有限制,他們仍然會受到尊重夺蛇,但任何邊距都會好像等于零


可見性行為.jpg

這種特定的行為允許構建布局疚漆,你可以臨時標記小部件。GONE刁赦,不破壞布局娶聘,這在做簡單布局動畫時特別有用。

六甚脉、限制尺寸

約束布局的最小尺寸
你可以為ConstraintLayout本身定義最大和最小大型枭:

android:minWidth //設置布局的最小寬度
android:minHeight //設置布局的最小高度
android:maxWidth //設置布局的最大寬度
android:maxHeight //設置布局的最大高度

當其尺寸設置為WRAP_CONTENT時,ConstraintLayout將使用這些最小和最大尺寸牺氨。

控件大小約束

可以通過以3種不同的方式設置android:layout_width和android:layout_height屬性來指定控件的大薪瞥堋:
1.使用特定值
2.使用WRAP_CONTENT,它將要求小部件計算其自身大小波闹。
3.使用0dp酝豪,相當于“MATCH_CONSTRAINT”


控件大小約束.jpg

前兩個以與其他布局類似的方式工作。 最后一個將以匹配所設置的約束的方式調整窗口小部件的大芯椤((a)是wrap_content孵淘,(b)是0dp)。 如果設置了邊距歹篓,則在計算中將考慮它們((c)中的0dp)瘫证。

重要說明:不建議對ConstraintLayout中包含的小部件使用MATCH_PARENT。 可以通過使用MATCH_CONSTRAINT來定義類似的行為庄撮,其中相應的左/右或上/下約束被設置為“parent”背捌。
WRAP_CONTENT : 強制約束

如果維度設置為WRAP_CONTENT,則在1.1之前的版本中洞斯,它們將被視為文字維度 - 這意味著約束不會限制生成的維度毡庆。 雖然通常這足夠(并且更快),但在某些情況下烙如,您可能希望使用WRAP_CONTENT么抗,但仍然強制執(zhí)行約束以限制結果維度。 在這種情況下亚铁,您可以添加一個相應的屬性:

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

當維度設置為MATCH_CONSTRAINT時蝇刀,默認行為是使結果大小占用所有可用空間。 還有幾個額外的修飾符:
layout_constraintWidth_min和layout_constraintHeight_min:將設置此維度的最小大小
layout_constraintWidth_max和layout_constraintHeight_max:將設置此維度的最大大小
layout_constraintWidth_percent和layout_constraintHeight_percent:將此維度的大小設置為父級的百分比

最小和最大

為min和max指示的值可以是Dp中的維度徘溢,也可以是“wrap”吞琐,它將使用與WRAP_CONTENT相同的值捆探。

百分維數(shù)

要使用百分比,您需要設置以下內容:
1.尺寸應設置為MATCH_CONSTRAINT(0dp)
2.默認值應設置為app app:layout_constraintWidth_default =“percent”或app:layout_constraintHeight_default =“percent”
3.然后將layout_constraintWidth_percent或layout_constraintHeight_percent屬性設置為0到1之間的值

比率

您還可以將窗口小部件的一個維度定義為另一個維度的比率站粟。 為此黍图,您需要將至少一個約束維度設置為0dp(即MATCH_CONSTRAINT),并將屬性layout_constraintDimensionRatio設置為給定比率卒蘸。 例如:

<Button android:layout_width="wrap_content"
   android:layout_height="0dp"
   app:layout_constraintDimensionRatio="1:1" />

將按鈕的高度設置為與其寬度相同雌隅。

該比率可表示為:
浮點值,表示寬度和高度之間的比率
“寬度:高度”形式的比率

如果兩個尺寸都設置為MATCH_CONSTRAINT(0dp)缸沃,您也可以使用比率恰起。 在這種情況下,系統(tǒng)設置滿足所有約束的最大尺寸并保持指定的縱橫比趾牧。 要根據另一個的尺寸約束一個特定邊检盼,可以預先附加W,“或H翘单,分別約束寬度或高度吨枉。例如,如果一個維度受兩個目標約束(例如哄芜,寬度為0dp并且以父對象為中心) 你可以通過在比率前添加字母W(用于約束寬度)或H(用于約束高度)來指示哪一邊應該被約束貌亭,用逗號分隔:

<Button android:layout_width="0dp"
   android:layout_height="0dp"
   app:layout_constraintDimensionRatio="H,16:9"   
   app:layout_constraintBottom_toBottomOf="parent" 
   app:layout_constraintTop_toTopOf="parent"/>

將按照16:9的比例設置按鈕的高度,而按鈕的寬度將匹配父項的約束

七认臊、鏈

鏈在單軸(水平或垂直)上提供類似組的行為圃庭。另一個軸可以獨立地約束。

創(chuàng)建鏈

一組小部件被認為是一個鏈失晴,如果它們通過雙向連接被連接在一起(參見圖剧腻,顯示最小鏈,帶有兩個小部件)涂屁。


鏈.jpg
鏈頭

鏈由鏈的第一個元素(鏈的“頭”)所設定的屬性控制:


鏈頭.jpg

頭部是水平鏈最左邊的小部件书在,也是垂直鏈最頂端的小部件。

鏈中的邊距

如果在連接上指定了邊距拆又,則會考慮它們儒旬。 在擴散鏈的情況下,將從分配的空間中扣除邊距帖族。

鏈式

在鏈的第一個元素上設置屬性layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle時义矛,鏈的行為將根據指定的樣式更改(默認為CHAIN_SPREAD)。

1.CHAIN_SPREAD - 元素將展開(默認樣式)
加權鏈 - 在CHAIN_SPREAD模式下盟萨,如果某些小部件設置為2.MATCH_CONSTRAINT,它們將拆分可用空間
3.CHAIN_SPREAD_INSIDE - 類似了讨,但鏈的端點不會分散
4.CHAIN_PACKED - 鏈的元素將被打包在一起捻激。 然后制轰,子項的水平或垂直偏差屬性將影響打包元素的定位


鏈式.jpg
加權鏈

鏈的默認行為是在可用空間中平均分布元素。如果一個或多個元素使用MATCH_CONSTRAINT胞谭,它們將使用可用的空白空間(在它們之間平均分配)垃杖。 layout_constraintHorizo??ntal_weight和layout_constraintVertical_weight屬性將控制如何使用MATCH_CONSTRAINT在元素之間分配空間。例如丈屹,在使用MATCH_CONSTRAINT的包含兩個元素的鏈上调俘,第一個元素使用權重2,第二個元素使用權重1旺垒,第一個元素占用的空間將是第二個元素占用的空間的兩倍彩库。

邊距和鏈條

在鏈中的元素上使用邊距時,邊距是相加的先蒋。

例如骇钦,在水平鏈上,如果一個元素定義了10dp的右邊距竞漾,而下一個元素定義了5dp的左邊距眯搭,則這兩個元素之間產生的邊距為15dp。

在計算鏈用于定位項目的剩余空間時业岁,會同時考慮項目及其邊距鳞仙。剩余空間不包含邊距。

8.虛擬助手對象

除了前面詳述的內在功能之外笔时,您還可以使用ConstraintLayout中的特殊幫助程序對象來幫助您進行布局棍好。 目前,Guideline對象允許您創(chuàng)建相對于ConstraintLayout容器定位的水平和垂直指南糊闽。 然后可以通過將小部件限制為這樣的指導來定位小部件梳玫。

9.優(yōu)化器

在1.1中我們公開了約束優(yōu)化器。 您可以通過將標記app:layout_optimizationLevel添加到ConstraintLayout元素來決定應用哪些優(yōu)化右犹。

none:不應用任何優(yōu)化
standard :默認提澎。 僅優(yōu)化直接和屏障約束
direct:優(yōu)化直接約束
barrier:優(yōu)化障礙限制
chain:優(yōu)化鏈約束(實驗)
dimensions:優(yōu)化維度度量(實驗),減少匹配約束元素的度量數(shù)量

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末念链,一起剝皮案震驚了整個濱河市盼忌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌掂墓,老刑警劉巖谦纱,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異君编,居然都是意外死亡跨嘉,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進店門吃嘿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來祠乃,“玉大人梦重,你說我怎么就攤上這事×链桑” “怎么了琴拧?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長嘱支。 經常有香客問我蚓胸,道長,這世上最難降的妖魔是什么除师? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任沛膳,我火速辦了婚禮,結果婚禮上馍盟,老公的妹妹穿的比我還像新娘于置。我一直安慰自己,他們只是感情好贞岭,可當我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布八毯。 她就那樣靜靜地躺著,像睡著了一般瞄桨。 火紅的嫁衣襯著肌膚如雪话速。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天芯侥,我揣著相機與錄音泊交,去河邊找鬼。 笑死柱查,一個胖子當著我的面吹牛廓俭,可吹牛的內容都是我干的。 我是一名探鬼主播唉工,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼研乒,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了淋硝?” 一聲冷哼從身側響起雹熬,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎谣膳,沒想到半個月后竿报,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡继谚,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年烈菌,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡僧界,死狀恐怖侨嘀,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情捂襟,我是刑警寧澤,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布欢峰,位于F島的核電站葬荷,受9級特大地震影響,放射性物質發(fā)生泄漏纽帖。R本人自食惡果不足惜宠漩,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望懊直。 院中可真熱鬧扒吁,春花似錦、人聲如沸室囊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽融撞。三九已至盼铁,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間尝偎,已是汗流浹背饶火。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留致扯,地道東北人肤寝。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像抖僵,于是被迫代替她去往敵國和親鲤看。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,060評論 2 355