Android Studio 2.2新增布局——ConstraintLayout完全解析


0. 前言

ConstraintLayoutAndroid Studio 2.2中主要的新增功能之一,我們都知道在傳統的Android開發中,界面基本主要是靠編寫XML代碼完成的,雖然Android Studio也支持可視化的方式來編寫界面,但是操作起來並不方便,而ConstraintLayout非常適合使用可視化的方式來編寫界面,當然,可視化操作的背后Android Studio會自動為我們生成XML代碼。本篇轉載自郭大俠的博客。根據原博客做了稍微的整理和總結。

 

1.  ConstraintLayout布局的使用

1.1  添加依賴以及轉換默認布局

為了使用ConstraintLayout,我們需要添加ConstraintLayout的依賴,首先打開當前項目的配置,如下圖所示。點擊Library dependency,就可以通過搜索關鍵字constraint-layout得到需要添加的庫。

這里寫圖片描述


現在打開res/layout/activity_main.xml文件,由於這是一個新建的空項目,Android Studio會自動幫我們創建好一個布局默認的RelativeLayout,我們可以通過如下操作將它轉換成ConstraintLayout如下圖所示。



轉換完成之后,原RelativeLayout中的內容也會自動轉換到ConstraintLayout中,比如圖中的TextView。如果你不需要它的話,可以選中這個控件,然后按鍵盤上的Delete鍵即可刪除。



我們可以看到,現在主操作區域內有兩個類似於手機屏幕的界面,左邊的是預覽界面,右邊的是藍圖界面。這兩部分都可以用於進行布局編輯工作,區別是左邊部分主要用於預覽最終的界面效果,右邊部分主要用於觀察界面內各個控件的約束情況。


1.2  ConstraintLayout布局的基本用法

ConstraintLayout的基本用法很簡單,比如我們想要向布局中添加一個按鈕,那么只需要從左側的Palette區域拖一個Button進去就可以了,如下圖所示。



雖說現在Button已經添加到界面上了,但是由於我們還沒有給Button添加任何的約束,因此Button並不知道自己應該出現在什么位置。現在我們在預覽界面上看到的Button位置並不是它最終運行后的實際位置,如果一個控件沒有添加任何約束的話,它在運行之后會自動位於界面的左上角

那么下面我們就來給Button添加約束,每個控件的約束都分為垂直和水平兩類,一共可以在四個方向上給控件添加約束,如下圖所示。



上圖中Button的上下左右各有一個圓圈,這圓圈就是用來添加約束的,我們可以將約束添加到ConstraintLayout,也可以將約束添加到另一個控件。比如說,想讓Button位於布局的右下角,就可以這樣添加約束,如下圖所示。



我們給Button的右邊和下邊添加了約束,因此Button就會將自己定位到布局的右下角了。類似地,如果我們想要讓Button居中顯示,那么就需要給它的上下左右都添加約束,如下圖所示。



除此之外,我們還可以使用約束讓一個控件相對於另一個控件進行定位。比如說,我們希望再添加一個Button,讓它位於第一個Button的正下方,並且間距64dp,那么操作如下所示。



現在添加約束的方式我們已經學完了,那么該怎樣刪除約束呢?其實也很簡單,刪除約束的方式一共有三種,第一種用於刪除一個單獨的約束,將鼠標懸浮在某個約束的圓圈上,然后該圓圈會變成紅色,這個時候單擊一下就能刪除了,如下圖所示。



第二種用於刪除某一個控件的所有約束,選中一個控件,然后它的左下角會出現一個刪除約束的圖標,點擊該圖標就能刪除當前控件的所有約束了,如下所示。



第三種是用於刪除當前界面中的所有約束,點擊工具欄中的刪除約束圖標即可,如下圖所示。



1.3  ConstraintLayout布局的高階用法

1.3.1 Inspector

當你選中任意一個控件的時候,在右側的Properties區域就會出現很多的屬性選項,如下圖所示。在這里我們就可以設置當前控件的所有屬性,如文本內容、顏色、點擊事件等等。這些功能都非常簡單,這里就不再進行詳細介紹,大家自己點一點就會操作了。



需要我們重點掌握的是Properties區域的上半部分(Inspector首先可以看到,在Inspector中有一個縱向的軸和一個橫向的軸,這兩個軸也是用於確定控件的位置的。我們剛才給Button的上下左右各添加了一個約束,然后Button就能居中顯示了,其實就是因為這里縱橫軸的值都是50。如果調整了縱橫軸的比例,那么Button的位置也會隨之改變,如下圖所示。



不過,雖然我們將橫軸的值拖動到了100,但是Button並沒有緊貼到布局的最右側,這是為什么呢?實際上,Android Studio給控件的每個方向上的約束都默認添加了一個16dp的間距,從Inspector上面也可以明顯地看出來這些間距的值。如果這些默認值並不是你想要的,可以直接在Inspector上進行修改,如下圖所示:



接下來我們再來學習一下位於Inspector最中間的那個正方形區域,它是用來控制控件大小的。一共有三種模式可選。

表示wrap content

表示固定值,也就是給控件指定了一個固定的長度或者寬度值。

表示any size,它有點類似並用於替代match parent是屬於ConstraintLayout中特有的一種大小控制方式,下面我們來重點講解一下。

首先需要說明,在ConstraintLayout中是有match parent的,只不過用的比較少,因為ConstraintLayout的一大特點就是為了解決布局嵌套,既然沒有了布局嵌套,那么ConstraintLayoutmatchparent也就沒有多大意義了

any size就是用於在ConstraintLayout中頂替match parent的,先看一下我們怎樣使用any size實現和match parent同樣的效果吧。

比如說我想讓Button的寬度充滿整個布局,操作如下圖所示。



那有的朋友可能會問了,這和match parent有什么區別呢?其實最大的區別在於,match parent是用於填充滿當前控件的父布局,而anysize是用於填充滿當前控件的約束規則。舉個例子更好理解,如果我們有一個新的Button它的其中一個約束是添加到當前這個Button上的,那么any size的效果也會發生改變,如下圖所示。而如果是match parent的效果,那么高度會填充整個屏幕了。



1.3.2 Guidelines

剛才我們已經實現了讓一個按鈕居中對齊的功能,如果我們想讓兩個按鈕共同居中對齊該怎么實現呢?

其實這個需求很常見,比如說在應用的登錄界面,都會有一個登錄按鈕和一個注冊按鈕,不管它們是水平居中也好還是垂直居中也好,但肯定都是兩個按鈕共同居中的。想要實現這個功能,僅僅用我們剛剛學的那些知識是不夠的,這需要用到ConstraintLayout中的一個新的功能,Guidelines

我們希望讓下面兩個按鈕在水平方向上居中顯示,在垂直方向上都距離底部64dp,那么就需要先添加一個垂直方向上的Guideline,如下圖所示。



Guideline默認是使用的dp,我們需要選中Guideline並點擊一下最上面的箭頭圖標將它改成百分比尺,然后將垂直方向上的Guideline調整到50%的位置,這樣就將准備工作做好了。接下來實現需求如下所示。



1.3.3  自動添加約束

如果界面中的內容變得復雜起來,給每個控件一個個地添加約束也是一件很繁瑣的事情。為此,ConstraintLayout中支持自動添加約束的功能,可以極大程度上簡化那些繁瑣的操作。自動添加約束的方式主要有兩種,一種叫Autoconnect,一種叫Inference,我們先來看第一種。

想要使用Autoconnect,首先需要在工具欄中將這個功能啟用,默認情況下Autoconnect是不啟用的,如下圖所示。


Autoconnect可以根據我們拖放控件的狀態自動判斷應該如何添加約束,比如我們將Button放到界面的正中央,那么它的上下左右都會自動地添加上約束,如下圖所示。



然后我們在這個Button的下方再放置一個Button,效果如下。



可以看到,只需要將Button拖放到界面上,Autoconnect會判斷我們的意圖,並自動給控件添加約束。不過Autoconnect是無法保證百分百准確判斷出我們的意圖的,如果自動添加的約束並不是你想要的話,還可以在任何時候進行手動修改。總之,可以把它當成一個輔助工具。


以上是Autoconnect的用法,接下來我們看一下Inference的用法Inference也是用於自動添加約束的,但它比Autoconnect功能要更為強大,因為AutoConnect只能給當前操作的控件自動添加約束,而Inference會給當前界面中的所有元素自動添加約束。因而Inference比較適合用來實現復雜度比較高的界面,它可以一鍵自動生成所有的約束。

下面我們就通過一個例子來演示一下Inference的用法,比如界面上現在有兩個TextView,兩個EditText,和兩個Button,如下圖所示。



接下來我們先將各個控件按照界面設計的位置進行擺放,擺放完成之后點擊一下工具欄上的Infer Constraints按鈕,就能為所有控件自動添加約束了,如下圖所示。



現在運行一下程序,最終效果如下圖所示:



2.  結束語

到這里,我們基本就把ConstraintLayout中的重要用法都概括到了,ConstraintLayout有很多的功能仍然在改進當中。比如說,beta3版本中引入的Chains功能就是一個很強大的新功能,不過由於這個功能需要配合Android Studio 2.3來使用,而2.3目前也還沒有出正式版,因此ConstraintLayout的更多功能就讓我們拭目以待吧。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM