ConstraintLayout教程

一.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'

}

添加依賴后重新編譯

q.gif

轉(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鍵即可刪除冒冬。

w.gif

左邊部分主要用于預(yù)覽最終的界面效果伸蚯,右邊部分主要用于觀察界面內(nèi)各個(gè)控件的約束情況。

三.基本操作

ConstraintLayout的基本用法很簡(jiǎn)單简烤,比如我們想要向布局中添加一個(gè)按鈕剂邮,那么只需要從左側(cè)的Palette區(qū)域拖一個(gè)Button進(jìn)去就可以了,如下圖所示横侦。

e.gif

由于沒(méi)有添加任何約束抗斤,布局文件中的布局代碼是報(bào)錯(cuò)的

r.png

給Button添加約束,每個(gè)控件的約束都分為垂直和水平兩類丈咐,一共可以在四個(gè)方向上給控件添加約束瑞眼,如下圖所示。

t.png

比如說(shuō)棵逊,想讓Button位于布局的左上角伤疙,就可以這樣添加約束,如下圖所示辆影。

y.gif

如果我們想要讓Button居中顯示徒像,那么就需要給它的上下左右都添加約束,如下圖所示蛙讥。

u.gif

我們還可以使用約束讓一個(gè)控件相對(duì)于另一個(gè)控件進(jìn)行定位锯蛀。比如說(shuō),我們希望再添加一個(gè)Button次慢,讓它位于第一個(gè)Button的正下方旁涤,并且間距50dp,那么操作如下所示迫像。

i.gif

添加約束的方式已經(jīng)學(xué)完了劈愚,那么怎樣刪除約束呢?刪除約束的方式一共有三種方式:

第一種:刪除一個(gè)單獨(dú)的約束闻妓,將鼠標(biāo)懸浮在某個(gè)約束的圓圈上菌羽,然后該圓圈會(huì)變成紅色,這個(gè)時(shí)候單擊一下就能刪除了由缆,如下圖所示注祖。

o.gif

第二種:刪除某一個(gè)控件的所有約束猾蒂,選中一個(gè)控件,然后它的左下角會(huì)出現(xiàn)一個(gè)刪除約束的圖標(biāo)是晨,點(diǎn)擊該圖標(biāo)就能刪除當(dāng)前控件的所有約束了婚夫,如下所示。

p.gif

第三種用于刪除當(dāng)前界面中的所有約束署鸡,點(diǎn)擊工具欄中的刪除約束圖標(biāo)即可案糙,如下圖所示。

a.png

刪除所有約束:


s.gif

當(dāng)選中任意一個(gè)控件的時(shí)候靴庆,在右側(cè)的Properties區(qū)域就會(huì)出現(xiàn)很多的屬性選項(xiàng)时捌,如下圖所示。

d.png

在這里我們就可以設(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ì)隨之改變鞭光,如下圖所示吏廉。

f.gif

Inspector最中間的那個(gè)正方形區(qū)域,它是用來(lái)控制控件大小的惰许。一共有三種模式可選席覆,每種模式都使用了一種不同的符號(hào)表示,點(diǎn)擊符號(hào)即可進(jìn)行切換汹买。

如圖所示:

g.gif

箭頭表示wrap content
直線表示固定值
波浪線表示match parent

如何讓一個(gè)按鈕match parent佩伤,如圖所示:

h.gif

注意:要記得將Button左側(cè)和右側(cè)的間距設(shè)置成0才行。

四.Guidelines

如果讓兩個(gè)按鈕共同居中對(duì)齊該怎么辦卦睹?這時(shí)候就需要用到Guidelines
如下小圖標(biāo)就是Guidelines

j.png

如何使用畦戒,如下圖所示:

k.gif

五.自動(dòng)添加約束

自動(dòng)添加約束的方式主要有兩種方库,一種叫Autoconnect结序,一種叫Inference

Autoconnect:

開(kāi)啟Autoconnect,默認(rèn)是關(guān)閉的

z.png

動(dòng)態(tài)演示纵潦,如下圖所示:

x.gif

Inference圖標(biāo):

m.png

動(dòng)態(tài)演示徐鹤,如下圖所示:

v.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末垃环,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子返敬,更是在濱河造成了極大的恐慌遂庄,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件劲赠,死亡現(xiàn)場(chǎng)離奇詭異涛目,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)凛澎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門霹肝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人塑煎,你說(shuō)我怎么就攤上這事沫换。” “怎么了最铁?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵讯赏,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我冷尉,道長(zhǎng)漱挎,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任雀哨,我火速辦了婚禮识樱,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘震束。我一直安慰自己怜庸,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布垢村。 她就那樣靜靜地躺著割疾,像睡著了一般。 火紅的嫁衣襯著肌膚如雪嘉栓。 梳的紋絲不亂的頭發(fā)上宏榕,一...
    開(kāi)封第一講書(shū)人閱讀 52,736評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音侵佃,去河邊找鬼麻昼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛馋辈,可吹牛的內(nèi)容都是我干的抚芦。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼叉抡!你這毒婦竟也來(lái)了尔崔?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤褥民,失蹤者是張志新(化名)和其女友劉穎季春,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體消返,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡载弄,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了撵颊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片侦锯。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖秦驯,靈堂內(nèi)的尸體忽然破棺而出尺碰,到底是詐尸還是另有隱情,我是刑警寧澤译隘,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布亲桥,位于F島的核電站,受9級(jí)特大地震影響固耘,放射性物質(zhì)發(fā)生泄漏题篷。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一厅目、第九天 我趴在偏房一處隱蔽的房頂上張望番枚。 院中可真熱鬧,春花似錦损敷、人聲如沸葫笼。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)路星。三九已至,卻和暖如春诱桂,著一層夾襖步出監(jiān)牢的瞬間洋丐,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工挥等, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留友绝,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓肝劲,卻偏偏與公主長(zhǎng)得像迁客,于是被迫代替她去往敵國(guó)和親郭宝。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

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