ConstraintLayout 指南

原文

  • 每個(gè)View起碼需要一個(gè)水平約束和一個(gè)垂直約束,沒(méi)有約束View在運(yùn)行的時(shí)候會(huì)顯示在(0, 0)坐標(biāo)(雖然編輯界面顯示的位置是你拖拽的位置)淌山。

  • 使用Autoconnect and infer constraints 特性布局編輯器(Layout Editor)會(huì)自動(dòng)幫你添加約束

  • 布局編輯器中每個(gè)控件會(huì)在四角顯示重設(shè)大小的標(biāo)識(shí)(正方形)号枕,在每條邊中間顯示約束設(shè)置的標(biāo)識(shí)(圓形)

  • 添加約束:點(diǎn)擊約束圓點(diǎn)匿情,拖動(dòng)到錨點(diǎn)上拍谐∮婧牵可用的錨點(diǎn)有:別的View的邊界聚请、布局的邊界荠雕、參考線(guideline)。

  • 約束規(guī)則:
    1驶赏、每個(gè)View必須至少有兩個(gè)約束炸卑,一個(gè)水平約束一個(gè)垂直約束
    2、約束點(diǎn)只能和同個(gè)平面的錨點(diǎn)之間產(chǎn)生約束煤傍,即View的垂直平面只能與另一個(gè)垂直平面產(chǎn)生約束盖文,基準(zhǔn)線也只能和另一個(gè)基準(zhǔn)線產(chǎn)生約束
    3、每個(gè)約束點(diǎn)只能用于一個(gè)約束蚯姆,但是不同的View可以約束到同一個(gè)錨點(diǎn)上

  • 取消約束:點(diǎn)擊View上對(duì)應(yīng)約束點(diǎn)五续,或是點(diǎn)擊清除所有約束的按鈕

  • 如果在相反方向上添加了約束后,約束指示線變成像彈簧一樣彎曲的線的話龄恋,通常是因?yàn)閂iew設(shè)置成了 "fixed" 或者 "wrap content"疙驾,這時(shí)View會(huì)在約束范圍居中。如果想拉伸它的尺寸來(lái)適應(yīng)約束范圍郭毕,"把尺寸改為 match constraints"它碎。如果想保持當(dāng)前尺寸不變不讓View居中, 調(diào)整約束偏移显押。

  • 如果想對(duì)齊到一個(gè)View的中間扳肛,則兩邊都添加約束

  • 可以添加水平方向或者垂直方向的參考線,參考線對(duì)App用戶不可見(jiàn)乘碑,參考線相對(duì)布局邊緣的位置可以用 dp 單位或者百分比表示挖息。點(diǎn)擊參考線的圓點(diǎn)切換表示方式,拖拽圓點(diǎn)移動(dòng)參考線位置

  • 調(diào)整約束偏移:在屬性窗口拖動(dòng)偏移滑塊

  • View有三種尺寸模式
    1蝉仇、Wrap Content: 自適應(yīng)內(nèi)容
    2旋讹、Match Constraints: View可以在寬度或者高度方向在計(jì)算了邊距后根據(jù)需要進(jìn)行擴(kuò)展來(lái)適應(yīng)約束殖蚕,如果該方向只有一個(gè)約束,View會(huì)適應(yīng)它的內(nèi)容沉迹。這個(gè)模式可以在寬度和高度兩個(gè)方向使用睦疫,同時(shí)你也可以設(shè)置一個(gè)尺寸比例
    3、Fixed: 固定大小
    點(diǎn)擊圖標(biāo)可以切換這三種模式

The Properties window includes controls for 1 size ratio, 2 delete constraint, 3 height/width mode, 4 margins, and 5 constraint bias.
  • 設(shè)置尺寸比例:只有一個(gè)方向設(shè)置為 Match Constraints 時(shí)鞭呕,點(diǎn)擊 Toggle Aspect Ratio Constraint 開(kāi)關(guān)蛤育,輸入寬高比。如果兩個(gè)方向都設(shè)置為 Match Constraints葫松,則需要選擇一個(gè)方向作為基準(zhǔn)
The view is set to a 16:9 aspect with the width based on a ratio of the height.
  • 邊距:在Material Design中邊距的尺寸一般為 8dp 的倍數(shù)

  • 用鏈(Chain)控制線性組
    一個(gè)鏈允許你使用以下樣式水平或者垂直放置一組View:
    1瓦糕、Spread: 均與分布。默認(rèn)模式腋么。
    2咕娄、Spread inside: 第一個(gè)和最后一個(gè)附著在其約束上,其余的均與分布珊擂。
    3圣勒、Weighted: 當(dāng)鏈設(shè)置為 spreadspread inside 模式時(shí),你通過(guò)設(shè)置一個(gè)或多個(gè)View的尺寸為 "match constraints" (0dp) 來(lái)填補(bǔ)剩余的空間摧扇。默認(rèn)模式下圣贸,剩余空間會(huì)在設(shè)置了 "match constraints" 尺寸的View間平均分配,但你可以通過(guò) layout_constraintHorizontal_weightlayout_constraintVertical_weight 給每個(gè) View 指定不同的重要程度扛稽。 同 linear layout類似吁峻。
    4、Packed: View 打包在一起在张,可以給他們整體設(shè)置偏移

    Examples of each chain style

  • 快速創(chuàng)建一組 View 的鏈:將它們?nèi)x用含,右擊任一 View 選擇 Center HorizontallyCenter Vertically 即可分別創(chuàng)建水平方向和垂直方向的鏈

  • 使用鏈的一些考慮事項(xiàng):
    1、一個(gè) View 既可以屬于一條水平鏈也可以屬于一條垂直鏈帮匾,可以很輕松的創(chuàng)建靈活的網(wǎng)格布局
    2耕餐、一條鏈只有當(dāng)其每個(gè)端點(diǎn)都在同一軸向上約束到別的對(duì)象上的時(shí)候才能正確工作
    3、雖然鏈的方向可以是水平或者是垂直辟狈,用它不代表所有的 View 在那個(gè)方向?qū)R。所以確保你引入了別的約束來(lái)為每個(gè) View 取得合適的方向夏跷,例如 alignment constraints哼转。

  • 鏈的頭:水平方向第一個(gè)或垂直方向第一個(gè) View

  • 不再支持 MATCH_PARENT

  • 支持 View.GONE,gone 的 View 被認(rèn)為只剩一個(gè)點(diǎn)槽华,且它的 margin 全部失效壹蔓。layout_goneMargin 可重設(shè)因?yàn)槟硞€(gè) View gone 之后補(bǔ)位的 View 的margin與之前的 View 不同的問(wèn)題

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市猫态,隨后出現(xiàn)的幾起案子佣蓉,更是在濱河造成了極大的恐慌披摄,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,576評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件勇凭,死亡現(xiàn)場(chǎng)離奇詭異疚膊,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)虾标,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)寓盗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人璧函,你說(shuō)我怎么就攤上這事傀蚌。” “怎么了蘸吓?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,017評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵善炫,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我库继,道長(zhǎng)箩艺,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,626評(píng)論 1 296
  • 正文 為了忘掉前任制跟,我火速辦了婚禮舅桩,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘雨膨。我一直安慰自己擂涛,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,625評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布聊记。 她就那樣靜靜地躺著撒妈,像睡著了一般。 火紅的嫁衣襯著肌膚如雪排监。 梳的紋絲不亂的頭發(fā)上狰右,一...
    開(kāi)封第一講書(shū)人閱讀 52,255評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音舆床,去河邊找鬼棋蚌。 笑死,一個(gè)胖子當(dāng)著我的面吹牛挨队,可吹牛的內(nèi)容都是我干的谷暮。 我是一名探鬼主播,決...
    沈念sama閱讀 40,825評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼盛垦,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼湿弦!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起腾夯,我...
    開(kāi)封第一講書(shū)人閱讀 39,729評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤颊埃,失蹤者是張志新(化名)和其女友劉穎蔬充,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體班利,經(jīng)...
    沈念sama閱讀 46,271評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡饥漫,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,363評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了肥败。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片趾浅。...
    茶點(diǎn)故事閱讀 40,498評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖馒稍,靈堂內(nèi)的尸體忽然破棺而出皿哨,到底是詐尸還是另有隱情,我是刑警寧澤纽谒,帶...
    沈念sama閱讀 36,183評(píng)論 5 350
  • 正文 年R本政府宣布证膨,位于F島的核電站,受9級(jí)特大地震影響鼓黔,放射性物質(zhì)發(fā)生泄漏央勒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,867評(píng)論 3 333
  • 文/蒙蒙 一澳化、第九天 我趴在偏房一處隱蔽的房頂上張望崔步。 院中可真熱鬧,春花似錦缎谷、人聲如沸井濒。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,338評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)瑞你。三九已至,卻和暖如春希痴,著一層夾襖步出監(jiān)牢的瞬間者甲,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,458評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工砌创, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留虏缸,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,906評(píng)論 3 376
  • 正文 我出身青樓嫩实,卻偏偏與公主長(zhǎng)得像寇钉,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子舶赔,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,507評(píng)論 2 359

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