ConstraintLayout(譯

ConstraintLayout

public class ConstraintLayout
extendsViewGroup
java.lang.Object
? android.view.View
??? android.view.ViewGroup
????? android.support.constraint.ConstraintLayout


一個constraintlayout是ViewGroup允許你在一個靈活的位置和大小的部件。

注:constraintlayout可作為一個支持庫藕咏,你可以使用Android系統(tǒng)從API級別9(姜餅)柠逞。因此,我們計劃隨著時間的推移豐富其API和能力隘擎。這個文檔將反映變化。

目前有各種類型的約束(constraints)凉夯,您可以使用:

  • 相對定位
  • 外邊距
  • 中心定位
  • 可見性行為
  • 尺寸約束
  • 虛擬助手對象

注意货葬,在約束條件下不能有循環(huán)依賴關系。

還參見ConstraintLayout.LayoutParams的布局屬性

開發(fā)者指南

相對定位

相對定位是一個在constraintlayout創(chuàng)建布局的基本構建塊劲够。這些約束允許您將給定的控件與另一個相對應震桶。你可以在水平軸和垂直軸上約束控件:

  • 水平軸:左(left),右(right)征绎,開始(start)和結束(end)邊
  • 垂直軸:頂部(top)蹲姐、底部(bottom)和文本基線(text baseline)

一般的概念是將一個控件的一個側面約束到另一個控件的另一側。

例如人柿,為了將按鈕B放置到按鈕A的右邊(圖1):

圖一 - 相對定位的例子

你需要做:

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

這告訴系統(tǒng)柴墩,我們希望按鈕B的左側被限制在按鈕A的右側。這樣的位置約束意味著系統(tǒng)將嘗試讓雙方共享相同的位置凫岖。

圖二 - 相對定位約束

這里是可用約束的列表(圖2):

  • 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

他們都需要一個參考ID到另一個控件江咳,或母(將參考父容器,即constraintlayout):

<Button android:id="@+id/buttonB" ...
                 app:layout_constraintLeft_toLeftOf="parent" />

外邊距

圖三 - 相對定位的外邊距

如果邊的外邊距被設置哥放,它們將被應用到相應的約束(如果它們存在)(圖3)歼指,執(zhí)行邊距作為目標和源側之間的空間。通常的布局邊距屬性可以用于此效果:

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

請注意甥雕,一個外邊距只能是正數(shù)或等于零踩身,并用一個尺寸。

連接到已消失(GONE)的部件時的邊距

當一個位置的約束目標的可視性是View.GONE社露,你也可以表示不同的邊際值可使用以下屬性:

  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

中心定位與偏置

對constraintlayout有用的方面是如何處理“不可能”的約束挟阻。例如,如果我們有類似的東西:

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

除非constraintlayout恰好有相同大小的按鈕峭弟,約束不能同時滿足(雙方不能在我們最需要他們)附鸽。

圖4 - 中心定位

在這種情況下會發(fā)生的是,約束作用類似于相反的力拉部件相同(圖4)孟害,這樣的部件將最終集中在父容器拒炎。這將同樣適用于垂直約束。

偏置(Bias)

默認情況下挨务,當遇到這樣的相反的約束是中心的小部件击你,但你可以調(diào)整定位偏袒一方在另一個使用偏置屬性:

  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias
圖5 - 中心定位與偏置

例如玉组,以下將使左側與30%的偏見,而不是默認的50%丁侄,使左側將較短惯雳,與小部件傾斜更向左側(圖5):

<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/>
         </>

使用偏置,您可以制作用戶界面鸿摇,將更好地適應屏幕大小的變化石景。

可見性行為

constraintlayout有特定的處理部件被標記為View.GONE。

GONE屬性的控件拙吉,像往常一樣潮孽,消失的部件不會顯示出來,也不是布局本身的一部分(例如筷黔,如果標記為GONE往史,它們的實際尺寸不會改變)。

但在布局計算方面佛舱,GONE屬性的控件仍然是其中的一部分椎例,具有重要的區(qū)別:

  • 在layout之后,他們的尺寸將被視為零(基本上请祖,他們將被解析成一個點)
  • 如果它們對其他小部件有約束订歪,它們?nèi)匀粫可娴剑魏芜吘喽嫉扔诹恪?/li>
圖6 - 可視性行為

這種特定的行為允許建立布局肆捕,您可以暫時標記控件屬性標記為已經(jīng)GONE刷晋,而不破壞布局(圖6),這可能是特別有用的福压,當做簡單的布局動畫掏秩。

注意:所使用的邊距將是B在連接到A時定義的邊距(如圖6所示)或舞。在某些情況下荆姆,這可能不是你想要的外邊距(一個有100dp外邊距到其容器的邊,B只有16dp到A映凳,標記A的屬性為GONE胆筒,B將會有16dp的外邊距到容器)。出于這個原因诈豌,您可以指定一個備用的外邊距值仆救,當連接到控件被標記為已GONE時(請參閱上面關于丟失邊距屬性的部分)。

尺寸約束

在constraintlayout的最小尺寸

您可以定義自己的constraintlayout最小尺寸:

  • android:minWidth 設置最小寬度的布局
  • android:minHeight 設置布局的最小高度

那些最小的尺寸矫渔,將用于constraintlayout布局彤蔽,當其尺寸設置為wrap_content。

部件尺寸約束

該部件的尺寸可以通過設置指定:android:layout_width和android:layout_height屬性在3種不同的方式:

  • 使用一個特定的尺寸(或字面意義的的值庙洼,如123dp或尺寸引用)
  • 使用wrap_content顿痪,這將要求部件來計算自己的尺寸
  • 使用0dp镊辕,這相當于“MATCH_CONSTRAINT”
圖7 - 尺寸約束

前兩個圖以類似的方式作為其他布局。最后一個將以這樣的方式調(diào)整小部件的大小蚁袭,以匹配設置的約束(見圖7征懈,(a)是wrap_content,(b)是0dp)揩悄。如果設置了外邊距卖哎,他們將在計算中考慮了(如圖7所示,(c)用了0dp)删性。

重要的是:match_parent不支持控件包含在一個constraintlayout亏娜,雖然類似的行為可以定義使用match_constraint與相應的左(left)/右(right)和頂部(top)/底部(bottom)約束被設置為“parent”。

比率

您也可以定義一個尺寸的一個小部件作為一個比率的另一個蹬挺。為了做到這一點照藻,你至少需要有一個約束的尺寸被設置為0dp(即match_constraint),并設置屬性layout_constraintDimentionRatio給定比例汗侵。例如:

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

將設置按鈕的高度與它的寬度相同幸缕。

比率可以表示為:

  • 浮點值,表示寬度和高度之間的比率
  • 以"width:height"形式表示的比率

你也可以如果尺寸設置為 MATCH_CONSTRAINT利用率(0dp)晰韵。在這種情況下发乔,系統(tǒng)設置最大尺寸滿足所有約束,并保持指定的縱橫比雪猪。根據(jù)另一個維度約束一個特定的邊栏尚。您可以預先追加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比率纵菌,而按鈕的寬度將匹配parent的約束。

鏈提供組別一樣( group-like)行為休涤,在單一坐標軸(axis)(水平或垂直)咱圆。在其他坐標軸(axis)可以單獨的約束。

創(chuàng)建一個鏈

一組控件被認為是一個鏈功氨,如果他們通過雙向連接連接在一起(見圖8序苏,顯示一個最小的鏈,用兩個控件)捷凄。

圖8 - 鏈

鏈首

鏈由鏈的第一個元素(鏈的“首”部)上的屬性控制:

圖9 - 鏈首

首部是水平鏈最左邊的部件忱详,垂直鏈的最頂部控件。

鏈的外邊距

如果在連接上指定了邊距跺涤,它們將被考慮在內(nèi)匈睁。在展開鏈的情況下管钳,外邊距將被去除分配的空間。

鏈的樣式

當設置該屬性layout_constraintHorizontal_chainStylelayout_constraintVertical_chainStyle于鏈的第一個元素软舌,外鏈的行為將按照指定的方式改變(默認是chain_spread)才漆。鏈行為的改變會按照特定的樣式(默認是CHAIN_SPREAD)。

  • CHAIN_SPREAD -- 元素將展開(默認樣式)
  • Weighted chain -- 在CHAIN_SPREAD模式佛点,如果一些比重設置為MATCH_CONSTRAINT醇滥,他們將分割可用空間
  • CHAIN_SPREAD_INSIDE -- 類似的,但鏈的端點不會展開
  • CHAIN_PACKED -- 鏈的元素將被包裝在一起超营。孩子的水平或垂直偏置屬性會影響填充元素的定位

比重鏈

鏈的默認行為是在可用空間中均勻地展開元素鸳玩。如果一個或多個元素使用match_constraint,他們將使用可用的空空間(他們之間平分)演闭。屬性layout_constraintHorizontal_weightlayout_constraintVertical_weight將控制空間如何將分布式應用MATCH_CONSTRAINT元素之間不跟。例如,在一個鏈中含有兩個元素使用了MATCH_CONSTRAINT米碰,第一個元素使用比重為2窝革,第二個使用了比重為1,第一個元素占用的空間是第二個元素的兩倍吕座。

虛擬助手對象

除了內(nèi)在的能力詳細的以前虐译,你還可以在ConstraintLayout使用特殊的輔助對象來幫你布置。

目前吴趴,指導(Guideline)對象允許你創(chuàng)建的水平和垂直方向的指引漆诽,定位相對于constraintlayout容器。

控件可以通過約束它們?nèi)ザㄎ贿@樣的指導锣枝。

原文:ConstraintLayout

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末厢拭,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子撇叁,更是在濱河造成了極大的恐慌供鸠,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件税朴,死亡現(xiàn)場離奇詭異回季,居然都是意外死亡家制,警方通過查閱死者的電腦和手機正林,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進店門鼻听,熙熙樓的掌柜王于貴愁眉苦臉地迎上來诵竭,“玉大人些阅,你說我怎么就攤上這事肌似⊥迷海” “怎么了叨吮?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵系奉,是天一觀的道長企软。 經(jīng)常有香客問我,道長瞳脓,這世上最難降的妖魔是什么塑娇? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮劫侧,結果婚禮上埋酬,老公的妹妹穿的比我還像新娘。我一直安慰自己烧栋,他們只是感情好写妥,可當我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著审姓,像睡著了一般珍特。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上魔吐,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天扎筒,我揣著相機與錄音,去河邊找鬼酬姆。 笑死砸琅,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的轴踱。 我是一名探鬼主播症脂,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼淫僻!你這毒婦竟也來了诱篷?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤雳灵,失蹤者是張志新(化名)和其女友劉穎棕所,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體悯辙,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡琳省,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了躲撰。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片针贬。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖拢蛋,靈堂內(nèi)的尸體忽然破棺而出桦他,到底是詐尸還是另有隱情,我是刑警寧澤谆棱,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布快压,位于F島的核電站圆仔,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蔫劣。R本人自食惡果不足惜坪郭,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望脉幢。 院中可真熱鬧截粗,春花似錦、人聲如沸鸵隧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽豆瘫。三九已至珊蟀,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間外驱,已是汗流浹背育灸。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留昵宇,地道東北人磅崭。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像瓦哎,于是被迫代替她去往敵國和親砸喻。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,722評論 2 345

推薦閱讀更多精彩內(nèi)容