天天看點

初識Android ConstraintLayout

在5.20這天,終于閑了下來,把許久沒更新的Android Studio給更到了2.3.2,然後發現多了好多之前沒見過的玩意,其中包括這個新的布局方式ConstraintLayout.

作為自己的第一篇部落格,寫這個會不會太不自量力了。

不管怎麼樣,希望這能作為一個堅持寫博的契機吧。

那麼下面進入正題:

在AS2.2版本之前,我們建立空項目時,系統給主活動配的布局檔案預設使用RelativeLayout. 衆所周知,RelativeLayout又稱為相對布局,主要通過各個控件之間的關系來定位其在螢幕上的位置。雖然靈活,但屬性較多且主要使用xml語句編寫,使用起來比較複雜。

而現在系統預設使用的ConstraintLayout,跟RelativeLayout有什麼差别呢?

個人認為有這幾方面不同:

- 主要使用可視化編輯界面

- 更加強調控件之間的關系(限制)

那麼我們開始進行ConstraintsLayout的學習吧

建立布局檔案

首先,确認你使用的Android Studio版本在2.2及以上。因為2.2版本才首次加入了ConstraintLayout的可視化編輯功能,如果使用2.2之前的版本,那麼就隻能使用xml代碼進行界面編輯,那ConstraintsLayout的最大優勢就沒有了啊!

你可以建立一個項目,系統會自動幫你建立一個ConstraintsLayout布局檔案,或者在左側目錄中app-res-layout右擊建立一個layout resource file. 在彈出的視窗中,填寫布局檔案名以及根布局,這裡當然填入ConstraintLayout, 然後點選ok,檔案就成功建立了。

初識Android ConstraintLayout

ConstraintLayout的基本使用

初識Android ConstraintLayout

這就是AS的可視化編輯工作區了,左側為預覽界面,右側藍圖界面。如圖我們可以從左側的控件欄中将想使用的控件拖入右側的藍圖界面。

這裡我們拖入一個TextView到藍圖界面,可以看到,TextView控件的四條邊都出現了一個圓點,我們稱它為限制控鍵。通過限制控鍵我們可以對目前控件設定各種限制。

初識Android ConstraintLayout

而下面的兩個按鈕,左側按鈕是取消限制,能夠删除該控件的所有限制,右側按鈕是文字基線限制按鈕,點選後控件将出現一個文字基線限制控鍵,能對齊兩個不同大小的控件中的文字。

下面我們對這個TextView進行一些簡單的操作。

初識Android ConstraintLayout

我們通過拖動限制控鍵對其添加限制。可以看到,當對控件右邊框與螢幕右側添加限制時,控件居右對齊;這時同時對控件左邊框和螢幕左側添加限制,空間就居中對齊了。同理得要使控件螢幕居中隻要上下左右都對螢幕添加限制即可。最後點選取消限制按鈕将剛剛添加的限制全部删除。

下面我們再添加一個按鈕控件,學習如何對兩個控件添加限制。

初識Android ConstraintLayout

我們先對Button左側和TextView右側添加了限制,然後将Button稍微拉離TextView,可以看到之後不論TextView怎麼移動,Button始終和其保持一定水準距離,垂直距離類似;然後我們對其添加了文字對齊限制,可以看到兩個控件通過文字對其在一起;最後我們給Button與螢幕右側添加了限制,,之後不論如何移動,Button總是和TextView于螢幕右側保持一定的距離比例。

以上就是添加限制的最基本方法了。

那麼要删除限制除了剛剛所講的控件上的按鈕外,還有兩種方法删除限制,一種是在工作區上方的工具欄中的ClearAll按鈕

初識Android ConstraintLayout

它能夠将工作區内所有的限制都删除;另一方法可以單個删除限制,如圖所示,單擊限制控鍵即可。

初識Android ConstraintLayout

Inspector的使用

每當我們選中一個控件,工作區的右側都會出現一個Properties界面。

初識Android ConstraintLayout

其展示出目前控件的各種屬性,Properties下半部分與RelativeLayout無異,上半部分是ConstraintLayout特有的,稱之為Inspector.

中間的正方形代表目前選中的控件,外面的四條邊表示四個方向上的限制,上面的數字表示和其餘控件間的最小間隔。左下兩條拖動條是用于控制控件限制比例的,50就是距離兩邊的限制控件各占50%(居中)。

初識Android ConstraintLayout

不知道各位有沒有發現,在正方形的中間有兩種不同的符号,其實他們是用來控制控件大小的,點選就能進行切換,一共有這麼幾種類型:

初識Android ConstraintLayout

Warp Content: 即使得控件大小剛好能将内容包括進去。

初識Android ConstraintLayout

Fixed: 即給控件一個固定的值來控制大小。

初識Android ConstraintLayout

Match Constraints: 即控件大小充滿限制。這個跟RelativeLayout和LinearLayout中的match_parent不一樣。match_parent是指控件充滿父控件,而match constraints意味着在滿足限制的條件下充滿父布局,看圖吧。

初識Android ConstraintLayout

Guidelines的使用

我忽然想到一個問題,一個按鈕的居中很簡單,那麼如果我要讓兩個按鈕同時居中呢?把兩個按鈕都關于螢幕兩端做限制吧。

初識Android ConstraintLayout

呃,好像沒辦法。這個時候就輪到Guidelines出馬了。

初識Android ConstraintLayout

我們在螢幕中央設立一個垂直的Guideline,這就相當于将螢幕分成兩個部分,螢幕兩邊的空間都可以相對于這條Guideline添加限制,如圖。

初識Android ConstraintLayout

水準的Guideline也是一樣的。

結語

那麼就這樣我們就把ConstraintLayout的基本操作給走了一遍。因為本人本身是個新手,要我講深入也确實是有點為難了,作為我的第一篇部落格,我自己是很滿意了,如果能幫到各位看官大爺,那真是太好了。

本文參考下面幾位大神的部落格,有想要更加詳細地學習的可以去看看。再次感謝幾位大神與各位看官。

[1]Android新特性介紹,ConstraintLayout完全解析,郭霖,http://blog.csdn.net/guolin_blog/article/details/53122387

[2]谷歌限制控件(ConstraintLayout)扁平化布局入門,Qiujuer,http://blog.csdn.net/qiujuer/article/details/51462471

[3]Android ConstraintLayout詳解,llitfk_DockOne,

http://www.jianshu.com/p/a8b49ff64cd3

繼續閱讀