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'
}
現(xiàn)在就可以使用了
基礎(chǔ)教程
基本概念
先認(rèn)識一下基礎(chǔ)東西
關(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文件就回報紅
也就是說只需要設(shè)置一個水平方向的約束和一個垂直方向的約束就可以不報錯了
我們需要做的就是點(diǎn)擊左側(cè)側(cè)邊約束的點(diǎn)憎账,然后往左邊拖,箭頭變綠卡辰,然后松手胞皱,就可以了,然后點(diǎn)擊上邊的側(cè)邊約束往上面拖九妈,箭頭變綠松手反砌,
也可以點(diǎn)擊側(cè)邊約束,拖到其它控件的側(cè)邊萌朱,這種叫Alignment constraint排列約束
基準(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"
Constrain to a guideline辕翰,可以理解為指導(dǎo)線,輔助線約束
這個算是個新概念狈谊,用著感覺還是極好的喜命。。
看上圖Imageview的位置可以完全靠這兩條線決定
關(guān)于設(shè)置寬高
下面是使用新的布局編輯器編寫布局的界面
當(dāng)我們點(diǎn)擊到一個控件上的時候河劝,你會發(fā)現(xiàn)右上角有一個四方塊壁榕,這個地方就是代表控件的一些屬性其中包括寬高,比例等
下面解釋上圖各個圖標(biāo)代表的含義:
-
Wrap Content:
-
Any Size:
-
Fixed:
這幾個屬性可以只要點(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í)還有很多不懂的地方催享,以上有出錯的地方請指出