ConstraintLayout布局學(xué)習(xí)總結(jié)

參考鏈接:
https://developer.android.com/training/constraint-layout/index.html?utm_campaign=android%20studio_launch_2.2_091916&utm_source=anddev&utm_medium=blog#add-constraintlayout-to-your-project

http://quanqi.org/2016/05/20/code-labs-constraint-layout/

前言

Google I/O 2016 上發(fā)布了 ConstraintLayout症革,剛發(fā)布出來的時候也跟著試玩了一下,看著官方的例子也寫了一個布局,但是沒有深入去看环形。最近剛剛將Android Studio升級到了Android Studio2.2正式版棕洋,期待已久的Android studio 2.2確實(shí)給我們帶來了很多新的功能杀饵。其中兩項(xiàng)跟本文相關(guān)就是:

  • New Layout Editor
  • ConstraintLayout

很多人都說ConstraintLayout是一項(xiàng)大的革新咒程,但是也有人說Google是在開歷史倒車啡直,下面我就以自己的試水經(jīng)驗(yàn)談?wù)勛约旱母惺苄怍铩J紫任蚁胝fConstraintLayout確實(shí)是一個新的很強(qiáng)大的布局镀脂,最起碼在減小布局層級這一塊作用很大。然后ConstraintLayout雖有優(yōu)點(diǎn)但也不能完全取代RelativeLayout和LinearLayout忘伞,以前都是手寫XML的薄翅,忽然讓我們拖控件(說真的,拖控件拖的我眼珠子都瞪大了氓奈,手都拖麻了)有點(diǎn)不好適應(yīng),而且有的拖動很難實(shí)現(xiàn)翘魄,可能還有待完善吧。但是拖了兩天發(fā)現(xiàn)自己越拖越順手舀奶,有經(jīng)驗(yàn)后拖的越來越快暑竟。

Everything you can do with ConstraintLayout is available directly from the Layout Editor's visual tools, because the layout API and the Layout Editor were specially built for each other. So you can build your layout with ConstraintLayout entirely by drag-and-dropping instead of editing the XML.
你能夠?qū)onstraintLayout 做的任何處理都可以使用布局編輯器工具實(shí)現(xiàn),由于這個布局的api和布局編輯器都是互相量身定制的育勺。所以你使用 ConstraintLayout 來編寫實(shí)現(xiàn)你的布局時完全可以只使用拖拽而不需要編輯XML光羞。---來自官網(wǎng)

準(zhǔn)備階段

為了使用ConstraintLayout請執(zhí)行下面的步驟:
1绩鸣,首先先將自己的Android studio升級到Android studio2.2正式版或者以上版本
2,保證你有最新的Constraint Layout庫:

  • 點(diǎn)擊Tools > Android > SDK Manager.
  • 點(diǎn)擊SDK Tools選項(xiàng)卡
  • 點(diǎn)開Support Repository纱兑,并且選擇ConstraintLayout for Android還有Solver for ConstraintLayout.選中Show Package Details呀闻,如果沒有下載過的話,就點(diǎn)擊OK下載
  • 在項(xiàng)目中添加依賴庫
dependencies {
        compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8'
}
Paste_Image.png

現(xiàn)在就可以使用了

基礎(chǔ)教程

基本概念

先認(rèn)識一下基礎(chǔ)東西


E7565621-16E8-4010-B2F9-F19DC5BC66F2.png

關(guān)于操作
其實(shí)實(shí)際操作就是切換到設(shè)計視圖模式潜慎,然后先把一個需要的控件拖進(jìn)來捡多。然后對各個約束操作手柄進(jìn)行操作。側(cè)邊操作手柄決定側(cè)邊距離父控件或者相對于其它控件的距離铐炫,尺寸約束可以修改控件的大小垒手,直接點(diǎn)擊到控件上拖動,可以改變控件的位置倒信,但是這樣拖動到某一個位置科贬,并不是它實(shí)際的位置,假如不利用側(cè)邊鳖悠、基準(zhǔn)線等約束榜掌,實(shí)際運(yùn)行效果控件會跑到(0,0).

When creating constraints, remember the following rules:
當(dāng)創(chuàng)建約束的時候需要記住以下的一些原則:

  • Every view must have at least two constraints: one horizontal and one vertical.
    每個View必須至少有兩個約束:一個水平方向的一個垂直方向的

假如不滿足上面的原則乘综,XML文件就回報紅

23F830F7-584D-49F2-B0AB-F81D3240E7C1.png

也就是說只需要設(shè)置一個水平方向的約束和一個垂直方向的約束就可以不報錯了

64F530AF-3288-482C-9B15-754927893E8C.png

我們需要做的就是點(diǎn)擊左側(cè)側(cè)邊約束的點(diǎn)憎账,然后往左邊拖,箭頭變綠卡辰,然后松手胞皱,就可以了,然后點(diǎn)擊上邊的側(cè)邊約束往上面拖九妈,箭頭變綠松手反砌,

也可以點(diǎn)擊側(cè)邊約束,拖到其它控件的側(cè)邊萌朱,這種叫Alignment constraint排列約束


盜圖自官網(wǎng)

基準(zhǔn)線約束:
比如想讓第二個textview在第一個的右邊于颖,然后水平對齊,這里要借助第二個textview的左側(cè)側(cè)邊約束點(diǎn)和基準(zhǔn)線約束手柄嚷兔。關(guān)于基準(zhǔn)線手柄,我有一些話說:首先有的控件沒有基準(zhǔn)線手柄比如ImageView等做入;手拖時不好拖冒晰,開始不知道,我都是先放大竟块,然后點(diǎn)上去壶运,等基準(zhǔn)線位置變色才可以拖出來(拖的我也是醉了),其實(shí)有個小技巧官網(wǎng)上有提:To create a baseline constraint, hover your mouse over the baseline handle for two seconds until the handle blinks white. Then click and drag the line to another baseline. 將鼠標(biāo)懸置在基準(zhǔn)線約束手柄的上面等兩秒鐘會發(fā)現(xiàn)手柄區(qū)域變白色浪秘,然后點(diǎn)擊并拖動蒋情,你會發(fā)現(xiàn)會有藍(lán)色小箭頭出現(xiàn)埠况,把這個箭頭拖到另外一個基準(zhǔn)線上,就完成了基準(zhǔn)線約束棵癣。實(shí)在感覺不好拖就在XML里面寫這個屬性吧 app:layout_constraintBaseline_toBaselineOf="@+id/textView1"

79FE84D9-A73A-47BA-8F8F-40358B483523.png

Constrain to a guideline辕翰,可以理解為指導(dǎo)線,輔助線約束
這個算是個新概念狈谊,用著感覺還是極好的喜命。。


9E3FF69D-3E05-497D-B0FE-E7D90E5B89AF.png
B918F5C4-C50E-47E2-A4A5-5024E8850BA4.png

看上圖Imageview的位置可以完全靠這兩條線決定

關(guān)于設(shè)置寬高

下面是使用新的布局編輯器編寫布局的界面


EBD9C720-00F8-498F-954C-7951083EAD6B.png

當(dāng)我們點(diǎn)擊到一個控件上的時候河劝,你會發(fā)現(xiàn)右上角有一個四方塊壁榕,這個地方就是代表控件的一些屬性其中包括寬高,比例等

A5DFD102-994F-4C4B-BC9B-DD1311E251DD.png

下面解釋上圖各個圖標(biāo)代表的含義:

  • Wrap Content:
    The view expands exactly as needed to fit its contents.這個相當(dāng)于Wrap Content赎瞎,不用多說
  • Any Size:
    根據(jù)它的約束需要任意擴(kuò)展牌里,可以理解為"match constraints"而不是"match_parent",
  • Fixed:
    這個代表自己設(shè)置固定的數(shù)值dp

這幾個屬性可以只要點(diǎn)擊一下圖標(biāo)就可以了切換為其他屬性务甥。
*注意:在ConstraintLayout中的人和一個view都不應(yīng)該設(shè)置為match_parent而應(yīng)該使用Any Size(0dp)牡辽;

舉個栗子??

目前我發(fā)現(xiàn)使用這個ConstrainLayout有個比較坑的地方就是,有時候你拖好了一個控件缓呛,但是以前設(shè)置好的控件又回到解放前了(就是前面設(shè)置的約束自動消失)

下面是一個我做的一個小視頻
http://odwl8g8h2.bkt.clouddn.com/constraintlayout_first.mp4

總結(jié)

剛開始學(xué)習(xí)還有很多不懂的地方催享,以上有出錯的地方請指出

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市哟绊,隨后出現(xiàn)的幾起案子因妙,更是在濱河造成了極大的恐慌,老刑警劉巖票髓,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件攀涵,死亡現(xiàn)場離奇詭異,居然都是意外死亡洽沟,警方通過查閱死者的電腦和手機(jī)以故,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來裆操,“玉大人怒详,你說我怎么就攤上這事∽偾” “怎么了昆烁?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長缎岗。 經(jīng)常有香客問我静尼,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任鼠渺,我火速辦了婚禮鸭巴,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘拦盹。我一直安慰自己鹃祖,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布掌敬。 她就那樣靜靜地躺著,像睡著了一般奔害。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上芯杀,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天揭厚,我揣著相機(jī)與錄音扶供,去河邊找鬼椿浓。 笑死,一個胖子當(dāng)著我的面吹牛扳碍,可吹牛的內(nèi)容都是我干的笋敞。 我是一名探鬼主播,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼赛惩,長吁一口氣:“原來是場噩夢啊……” “哼喷兼!你這毒婦竟也來了澎怒?” 一聲冷哼從身側(cè)響起喷面,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤惧辈,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后念逞,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體翎承,經(jīng)...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡叨咖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年甸各,在試婚紗的時候發(fā)現(xiàn)自己被綠了焰坪。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片某饰。...
    茶點(diǎn)故事閱讀 39,779評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖碧浊,靈堂內(nèi)的尸體忽然破棺而出箱锐,到底是詐尸還是另有隱情劳较,我是刑警寧澤观蜗,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站抖仅,受9級特大地震影響撤卢,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜放吩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一到推、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧莉测,春花似錦、人聲如沸悔雹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽驯鳖。三九已至浅辙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間记舆,已是汗流浹背泽腮。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工诊赊, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人碘箍。 一個月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓丰榴,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子像吻,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,700評論 2 354

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