Android之ConstraintLayout(依賴(lài)約束)布局

前言

Google 在推出 Android Studio 2.2預(yù)覽版時(shí),為開(kāi)發(fā)者提供了一種新的布局霎槐,那就是 ConstraintLayout 布局桥嗤,當(dāng)時(shí)還不是正式版。但是在最近更新到 Android Studio 2.3之后菇篡,新建一個(gè)項(xiàng)目,打開(kāi) MainActivity 的布局文件吱型,你會(huì)發(fā)現(xiàn)根布局不再是 RelativeLayout逸贾,而是 ConstraintLayout,可見(jiàn) Google 對(duì)該布局看的還是挺重的津滞。那我們就有必要去學(xué)習(xí)一下 ConstraintLayout 布局了铝侵。

ConstraintLayout 與 RelativeLatout 很像,控件之間根據(jù)依賴(lài)關(guān)系而存在触徐,但它比 RelativeLayout 強(qiáng)大的多了咪鲜,簡(jiǎn)直可以說(shuō)是甩 RelativeLayout 幾條街。ConstraintLayout 可以有效的解決布局嵌套過(guò)多導(dǎo)致的性能問(wèn)題撞鹉,并且 ConstraintLayout 支持可視化的方式編寫(xiě)布局疟丙,簡(jiǎn)直是爽爆了颖侄。

使用

確保你的 Android Studio 版本是2.2或者以上。如果你的 Android Studio 版本是 2.3 正式版享郊,那么在你創(chuàng)建一個(gè)新項(xiàng)目時(shí)览祖,你的 Activity 布局文件的根布局默認(rèn)就是 ConstraintLayout。如果 AS 版本不是 2.3炊琉,需要在你的 app/build 文件中添加 ConstraintLayout 的依賴(lài)展蒂,如下:

compile 'com.android.support.constraint:constraint-layout:1.0.2'//正式版本

打開(kāi) res/layout/activity_main.xml 文件,由于是新建的項(xiàng)目苔咪,As 會(huì)自動(dòng)幫我們創(chuàng)建好一個(gè)布局锰悼,如下圖所示:(注意:我使用的 AS 版本是 2.3.1)

如果你用的 AS 版本低于 2.3,你只需要將布局轉(zhuǎn)換為 ConstraintLayout 即可团赏。如下圖:

我們可以看到箕般,現(xiàn)在主操作界面區(qū)域內(nèi)又兩個(gè)類(lèi)似手機(jī)屏幕的界面,左邊是預(yù)覽界面舔清,右邊是藍(lán)圖界面丝里。這兩個(gè)界面都可以進(jìn)行布局編輯操作,區(qū)別在于左邊用于預(yù)覽最終的界面效果鸠踪,右邊部分主要用于觀察控件之間的約束情況丙者。

基本操作

ConstraintLayout 支持可視化的方式編寫(xiě)界面,也就是說(shuō)你完全可以以拖拽的方式來(lái)完成界面的布局营密。比如我們?cè)诮缑嫣砑右粋€(gè) TextView 控件,那么我們只需在左側(cè) Palette 面板上拖一個(gè) TextView 就可以了目锭,如圖所示:

一個(gè) TextView 已經(jīng)添加到界面了评汰,但是由于我們沒(méi)有為這個(gè)控件添加約束,當(dāng)程序運(yùn)行時(shí)痢虹,會(huì)自動(dòng)位于界面左上角被去。

下面我們就為這個(gè) TextView 控件添加約束吧。每個(gè)控件的約束分為垂直和水平兩類(lèi)奖唯,一共可以在四個(gè)方向上為控件添加約束惨缆,如下圖所示:


上圖中 TextView 的上下左右各有一個(gè)圓圈,這些圓圈就是用來(lái)添加約束的丰捷,我們可以將約束添加到 ConstraintLayout 上坯墨,也可以將約束添加到另一個(gè)控件。例如:我們想讓這個(gè) TextView 位于布局的正中央病往,那么就可以這樣添加約束捣染,如下圖:

如上圖,我們?cè)?TextView 的上下左右分別添加了約束之后停巷,TextView 會(huì)居中央顯示耍攘。如果我們想讓這個(gè) TextView 居右上角顯示榕栏,我們只需在上右上添加約束即可。如下圖:

這就是添加約束最基本的方法了。

除此之外脉顿,我們還可以使用約束讓一個(gè)控件相對(duì)于另一個(gè)控件定位登馒。比如說(shuō),我們?cè)偬砑右粋€(gè)TextView渗磅,讓它位于第一個(gè) TextView 的下方,上間距為 20dp 检访,操作如下圖:

上面的間距我們可以拖動(dòng)來(lái)控制始鱼,或者通過(guò)右邊的 Properties 面板控制。我更傾向于右邊的 Properties 面板脆贵,它比拖動(dòng)能更精確控制間距的到小医清。

注意:當(dāng)為控件添加約束條件時(shí),最低需要添加兩個(gè)約束條件(左上卖氨、左下会烙、右上、右下)筒捺,當(dāng)你添加的約束條件不滿足時(shí)柏腻,在 Text 頁(yè)面,你的布局 XML 中就會(huì)有報(bào)紅線的控件系吭。

知道如何添加約束后五嫂,我們?cè)撛鯓觿h除約束呢?其實(shí)刪除約束也很簡(jiǎn)單肯尺,刪除約束的方式共有三中方式沃缘。第一種用于刪除一個(gè)單獨(dú)的約束,將鼠標(biāo)懸浮在某個(gè)約束的圓圈上则吟,該圓圈會(huì)變成紅色槐臀,點(diǎn)擊即可刪除。如下圖:


第二種用于刪除一個(gè)控件的所有約束氓仲,選中一個(gè)控件后水慨,會(huì)在控件左下角出現(xiàn)一個(gè)刪除約束的圖標(biāo),點(diǎn)擊該圖標(biāo)敬扛,就刪除了控件所有的約束條件晰洒。如下圖:


第三種用于刪除界面所有控件的約束條件,點(diǎn)擊即可刪除所有控件的約束條件舔哪。如下圖:


Properties 面板

我們知道了如何擺放控件后欢顷,下面來(lái)看下 Properties 面板的操作。當(dāng)你選中一個(gè)控件后捉蚤,右邊的 Properties 區(qū)域就會(huì)出現(xiàn)很多屬性選項(xiàng)抬驴。如下圖:


在這里我們可以設(shè)置當(dāng)前控件的所有屬性炼七,如文本內(nèi)容,字體大小布持,顏色豌拙,字體樣式等等。這些功能很簡(jiǎn)單题暖,大家點(diǎn)一點(diǎn)操作也下就會(huì)了按傅,這里就不啰嗦了。

這里重點(diǎn)介紹一下 Properties 區(qū)域的上半部分胧卤,這部分也稱(chēng)為 Inspector唯绍。


首先可以看到,在 Inspector 中有一個(gè)縱向的軸和一個(gè)橫向的軸枝誊,這兩個(gè)軸也是用于確定控件的位置的况芒。我們剛才給 TextView 的上下左右各添加了一個(gè)約束,然后 TextView 就能居中顯示了叶撒,其實(shí)就是因?yàn)檫@里縱橫軸的值都是50绝骚。如果調(diào)整了縱橫軸的比例,那么 TextView 的位置也會(huì)隨之改變祠够,如下圖:


不過(guò)压汪,雖然我們將縱軸橫軸的值都拖動(dòng)到了 100,但是 TextView 并沒(méi)有緊貼到布局的右上角古瓤,這是為什么呢止剖?實(shí)際上,Android Studio給控件的每個(gè)方向上的約束都默認(rèn)添加了一個(gè) 16dp 的間距湿滓,從 Inspector 上面也可以明顯地看出來(lái)這些間距的值滴须。如果這些默認(rèn)值并不是你想要的,可以直接在Inspector上進(jìn)行修改叽奥,如下圖:


可以看到將上邊距和右邊距設(shè)置為 0 之后,TextView 就緊貼在布局的右上角了痛侍。

接下來(lái)我們來(lái)看下 Inspector 最中間的那個(gè)正方形區(qū)域朝氓,它是用來(lái)控制控件大小的一共有三種模式可選,每種模式都使用了一種不同的符號(hào)表示主届,點(diǎn)擊符號(hào)即可進(jìn)行切換赵哲。

  • 表示 wrap_content,這個(gè)我們很熟悉了君丁,不需要進(jìn)行什么解釋枫夺。

  • 表示固定值,也就是給控件指定了一個(gè)固定的長(zhǎng)度或者寬度值绘闷。

  • 表示 any size橡庞,它有點(diǎn)類(lèi)似于 match_parent较坛,但和 match_parent 并不一樣,是屬于 ConstraintLayout 中特有的一種大小控制方式扒最,下面我們來(lái)重點(diǎn)講解一下丑勤。

在 ConstraintLayout 中是有 match_parent 的,只不過(guò)用的比較少吧趣,因?yàn)?ConstraintLayout 的出現(xiàn)就是為為了解決布局嵌套法竞。既然沒(méi)了布局嵌套,那么 match_parent 就沒(méi)多大意義了强挫。

而any size就是用于在 ConstraintLayou t中頂替 match_parent 的岔霸,先看一下我們?cè)鯓邮褂?any size 實(shí)現(xiàn)和 match_parent 同樣的效果吧。比如說(shuō)我想讓 TextView 的寬度充滿整個(gè)布局俯渤,操作如下圖:


可以看到呆细,我們把 TextView 的寬度指定成 any size,它就會(huì)自動(dòng)充滿充滿這個(gè)布局稠诲,當(dāng)然要記得把 TextView 的左右間距設(shè)置成 0 才可以侦鹏。

那有的朋友可能會(huì)問(wèn)了,這和 match_parent 有什么區(qū)別呢臀叙?其實(shí)最大的區(qū)別在于略水,match_parent 是用于填充滿當(dāng)前控件的父布局,而 any size 是用于填充滿當(dāng)前控件的約束規(guī)則劝萤。舉個(gè)例子更好理解渊涝,如果我們有一個(gè)新的 TextView,它的其中一個(gè)約束是添加到當(dāng)前這個(gè) TextView 上的床嫌,那么 any size 的效果也會(huì)發(fā)生改變跨释,如下圖:


通過(guò)上圖的演示,相信可以很好理解 any size 的作用了厌处。

Guidelines (意譯:指導(dǎo)線)

上面講述了一些 ConstraintLayout 的基本操作鳖谈,可當(dāng)我們的布局過(guò)于復(fù)雜時(shí),以上的操作可能會(huì)達(dá)不到我們的需求阔涉。下面我們來(lái)學(xué)習(xí)下 Guidelines缆娃,意譯:指導(dǎo)線,我們可以把它理解為是一種"輔助線"瑰排,就好比我們學(xué)幾何圖形時(shí)做的輔助線一樣贯要。在這里,我們可以添加 Vertical Guideline 和 Horizontal Guideline 兩種輔助線椭住。如圖所示:


比如我們常見(jiàn)的登錄界面崇渗,界面會(huì)有兩個(gè) Button,顯示在中央。這時(shí)我們就需要添加 Vertical Guideline 輔助線宅广,才能讓這兩個(gè) Button 平分界面的寬度葫掉。如下圖:


如上圖,我們添加了一條 Vertical Guideline 輔助線乘碑,位置放在屏幕寬度的一半挖息,這樣兩個(gè) Button 就能平分屏幕的寬度了。上圖就錄制了添加 Vertical Guideline 輔助線的過(guò)程兽肤,gif太大的話會(huì)上傳不了套腹。

自動(dòng)添加約束

自動(dòng)添加約束的方式有兩種:一種是 Autoconnect,另一種是 Inference资铡。不過(guò)這兩種方式我在開(kāi)發(fā)中還是很少使用的电禀,即使一個(gè)控件自動(dòng)添加約束后,可能和我們想要的結(jié)果還是有很大差距的笤休,所以我還是習(xí)慣手動(dòng)給控件添加約束尖飞。這里就簡(jiǎn)單介紹一下吧,首先看下 Autoconnect店雅,我們需要啟用 Autoconnect 功能政基,默認(rèn)情況下是未啟動(dòng)的。如下圖所示:


打開(kāi) Autoconnect 功能后闹啦,它會(huì)根據(jù)我們拖放的狀態(tài)自動(dòng)判斷如何為控件添加約束(很多情況下沮明,還是需要手動(dòng)補(bǔ)充添加約束條件),比如我們將 Button 拖放到界面的正中央窍奋,那么控件的上下左右都會(huì)自動(dòng)添加上約束荐健。如下圖所示:


然后我們?cè)?Button 下面再放一個(gè) Button,效果如下:


可以看到琳袄,添加的 Button 只有左右自動(dòng)添加了約束江场,此時(shí)還需要手動(dòng)添加一個(gè)約束,控件才能正常顯示窖逗。Autoconnect 不能完全明白我們的意圖址否。總之碎紊,如果你感覺(jué) Autoconnect 方便的話在张,可以把它當(dāng)成一種輔助,但并不能完全靠它添加約束矮慕。

我們?cè)賮?lái)看下另一種自動(dòng)添加約束的功能 Inference,它比 Autoconnect 的功能更加強(qiáng)大啄骇。因?yàn)?Autoconnect 是給當(dāng)前操作的控件自動(dòng)添加約束痴鳄,而 Inference 是為當(dāng)前界面所有的控件添加約束。因此缸夹,Inference 比較適合用來(lái)實(shí)現(xiàn)復(fù)雜度較高的界面痪寻。

下面通過(guò)一個(gè)例子演示 Inference 的用法螺句。當(dāng)前界面有兩個(gè) TextInputLayout,和一個(gè) Button 按鈕橡类,我們使用 Inference 來(lái)意見(jiàn)生成約束蛇尚。如下圖所示:


好了,這里介紹了 ConstraintLayout 的一些基本用法顾画,通過(guò)本片文章的介紹取劫,相信你對(duì) ConstraintLayout 有了深入的認(rèn)識(shí)。還有就是 ConstraintLayout 的 Chains 功能研侣,我目前也正在研究谱邪,下面給出關(guān)于 Chains 文章的鏈接:https://blog.stylingandroid.com/constraintlayout-chains-spread-chains/
目前 ConstraintLayout 版本才到 1.0.2庶诡,后續(xù)可能會(huì)出很多的功能惦银,讓我們拭目以待吧。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末末誓,一起剝皮案震驚了整個(gè)濱河市扯俱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌喇澡,老刑警劉巖迅栅,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異撩幽,居然都是意外死亡库继,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門(mén)窜醉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)宪萄,“玉大人,你說(shuō)我怎么就攤上這事榨惰“萦ⅲ” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵琅催,是天一觀的道長(zhǎng)居凶。 經(jīng)常有香客問(wèn)我,道長(zhǎng)藤抡,這世上最難降的妖魔是什么侠碧? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮缠黍,結(jié)果婚禮上弄兜,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好替饿,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布语泽。 她就那樣靜靜地躺著,像睡著了一般视卢。 火紅的嫁衣襯著肌膚如雪踱卵。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,821評(píng)論 1 314
  • 那天据过,我揣著相機(jī)與錄音惋砂,去河邊找鬼。 笑死蝶俱,一個(gè)胖子當(dāng)著我的面吹牛班利,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播榨呆,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼罗标,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了积蜻?” 一聲冷哼從身側(cè)響起闯割,我...
    開(kāi)封第一講書(shū)人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎竿拆,沒(méi)想到半個(gè)月后宙拉,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡丙笋,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年谢澈,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片御板。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡锥忿,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出怠肋,到底是詐尸還是另有隱情敬鬓,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布笙各,位于F島的核電站钉答,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏杈抢。R本人自食惡果不足惜数尿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望惶楼。 院中可真熱鬧砌创,春花似錦虏缸、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)窥岩。三九已至甲献,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間颂翼,已是汗流浹背晃洒。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留朦乏,地道東北人球及。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像呻疹,于是被迫代替她去往敵國(guó)和親吃引。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

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