一.ConstraintLayout簡(jiǎn)介
ConstraintLayout是Android Studio 2.2中主要的新增功能之一,ConstraintLayout是使用可視化的方式來(lái)編寫(xiě)界面卿城。
ConstraintLayout優(yōu)點(diǎn):ConstraintLayout是采用約束的方式來(lái)指定各個(gè)控件的位置和關(guān)系的产场,它有點(diǎn)類似于RelativeLayout,它可以有效地解決布局嵌套過(guò)多的問(wèn)題拗慨。
二.添加依賴
新建ConstraintLayout項(xiàng)目廓八。另外奉芦,確保你的Android Studio是2.2或以上版本。
為了要使用ConstraintLayout剧蹂,我們需要在app/build.gradle文件中添加ConstraintLayout的依賴声功,如下所示
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.1.1'
testCompile 'junit:junit:4.12'
compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
}
添加依賴后重新編譯
轉(zhuǎn)換完成之后,原RelativeLayout中的內(nèi)容也會(huì)自動(dòng)轉(zhuǎn)換到ConstraintLayout中
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.zhoujian.constraintlayout.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:id="@+id/textView"
tools:layout_constraintTop_creator="1"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
tools:layout_constraintLeft_creator="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"/>
</android.support.constraint.ConstraintLayout>
圖中的TextView宠叼。如果你不需要它的話先巴,可以選中這個(gè)控件,然后按鍵盤(pán)上的Delete鍵即可刪除冒冬。
左邊部分主要用于預(yù)覽最終的界面效果伸蚯,右邊部分主要用于觀察界面內(nèi)各個(gè)控件的約束情況。
三.基本操作
ConstraintLayout的基本用法很簡(jiǎn)單简烤,比如我們想要向布局中添加一個(gè)按鈕剂邮,那么只需要從左側(cè)的Palette區(qū)域拖一個(gè)Button進(jìn)去就可以了,如下圖所示横侦。
由于沒(méi)有添加任何約束抗斤,布局文件中的布局代碼是報(bào)錯(cuò)的
給Button添加約束,每個(gè)控件的約束都分為垂直和水平兩類丈咐,一共可以在四個(gè)方向上給控件添加約束瑞眼,如下圖所示。
比如說(shuō)棵逊,想讓Button位于布局的左上角伤疙,就可以這樣添加約束,如下圖所示辆影。
如果我們想要讓Button居中顯示徒像,那么就需要給它的上下左右都添加約束,如下圖所示蛙讥。
我們還可以使用約束讓一個(gè)控件相對(duì)于另一個(gè)控件進(jìn)行定位锯蛀。比如說(shuō),我們希望再添加一個(gè)Button次慢,讓它位于第一個(gè)Button的正下方旁涤,并且間距50dp,那么操作如下所示迫像。
添加約束的方式已經(jīng)學(xué)完了劈愚,那么怎樣刪除約束呢?刪除約束的方式一共有三種方式:
第一種:刪除一個(gè)單獨(dú)的約束闻妓,將鼠標(biāo)懸浮在某個(gè)約束的圓圈上菌羽,然后該圓圈會(huì)變成紅色,這個(gè)時(shí)候單擊一下就能刪除了由缆,如下圖所示注祖。
第二種:刪除某一個(gè)控件的所有約束猾蒂,選中一個(gè)控件,然后它的左下角會(huì)出現(xiàn)一個(gè)刪除約束的圖標(biāo)是晨,點(diǎn)擊該圖標(biāo)就能刪除當(dāng)前控件的所有約束了婚夫,如下所示。
第三種用于刪除當(dāng)前界面中的所有約束署鸡,點(diǎn)擊工具欄中的刪除約束圖標(biāo)即可案糙,如下圖所示。
刪除所有約束:
當(dāng)選中任意一個(gè)控件的時(shí)候靴庆,在右側(cè)的Properties區(qū)域就會(huì)出現(xiàn)很多的屬性選項(xiàng)时捌,如下圖所示。
在這里我們就可以設(shè)置當(dāng)前控件的所有屬性炉抒,如文本內(nèi)容奢讨、顏色、點(diǎn)擊事件等等焰薄。
需要我們重點(diǎn)掌握的是Properties區(qū)域的上半部分拿诸,這部分也被稱為Inspector。
在Inspector中有一個(gè)縱向的軸和一個(gè)橫向的軸塞茅,這兩個(gè)軸也是用于確定控件的位置的亩码。我們剛才給Button的上下左右各添加了一個(gè)約束,然后Button就能居中顯示了野瘦,其實(shí)就是因?yàn)檫@里縱橫軸的值都是50描沟。如果調(diào)整了縱橫軸的比例,那么Button的位置也會(huì)隨之改變鞭光,如下圖所示吏廉。
Inspector最中間的那個(gè)正方形區(qū)域,它是用來(lái)控制控件大小的惰许。一共有三種模式可選席覆,每種模式都使用了一種不同的符號(hào)表示,點(diǎn)擊符號(hào)即可進(jìn)行切換汹买。
如圖所示:
箭頭表示wrap content
直線表示固定值
波浪線表示match parent
如何讓一個(gè)按鈕match parent佩伤,如圖所示:
注意:要記得將Button左側(cè)和右側(cè)的間距設(shè)置成0才行。
四.Guidelines
如果讓兩個(gè)按鈕共同居中對(duì)齊該怎么辦卦睹?這時(shí)候就需要用到Guidelines
如下小圖標(biāo)就是Guidelines
如何使用畦戒,如下圖所示:
五.自動(dòng)添加約束
自動(dòng)添加約束的方式主要有兩種方库,一種叫Autoconnect结序,一種叫Inference
Autoconnect:
開(kāi)啟Autoconnect,默認(rèn)是關(guān)閉的
動(dòng)態(tài)演示纵潦,如下圖所示:
Inference圖標(biāo):
動(dòng)態(tài)演示徐鹤,如下圖所示: