ConstraintLayout簡單學(xué)習(xí)

ConstraintLayout簡單學(xué)習(xí)與使用

“自從在去年的Google I/O 大會上發(fā)布 ConstraintLayout 以來，我們一直不斷改進(jìn)該布局的穩(wěn)定性，完善對布局編輯器的支持。我們還針對 ConstraintLayout 增加了一些新功能，幫助您構(gòu)建不同類型的布局，例如引入鏈和按比例設(shè)置大小。

除了這些功能之外，使用ConstraintLayout還可以獲得一項顯著的性能優(yōu)勢?！盙oogle 開發(fā)者計劃工程師 Takeshi Hagikura說，這大概就是這個新布局的有點。

下面我們還是從最基礎(chǔ)的布局開始學(xué)習(xí)。

1.開始

開發(fā)工具：AndroidStudio3.0以上

為了要使用ConstraintLayout，我們需要在app/build.gradle文件中添加ConstraintLayout的依賴，如下所示。

dependencies {

implementation?'com.android.support.constraint:constraint-layout:1.1.2'?}

2.布局

（1）來編寫一個Feed Item

看到這樣的布局，大家條件反射應(yīng)該就是使用RelativeLayout來做，當(dāng)然了，本案例我們使用ConstraintLayout來寫：

? ? xmlns:app="http://schemas.android.com/apk/res-auto"

? ? xmlns:tools="http://schemas.android.com/tools"

? ? android:layout_width="match_parent"

? ? android:layout_height="match_parent"

? ? tools:context="aorise.com.constraintlayout.MainActivity">

? ? ? ? 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"

? ? ? ? android:background="#11ff0000"

? ? ? ? tools:context="com.zhy.constrantlayout_learn.MainActivity">

? ? ? ? ? ? android:id="@+id/tv1"

? ? ? ? ? ? android:layout_width="140dp"

? ? ? ? ? ? android:layout_height="86dp"

? ? ? ? ? ? android:layout_marginLeft="12dp"

? ? ? ? ? ? android:layout_marginTop="12dp"

? ? ? ? ? ? android:background="#fd3"

? ? ? ? ? ? app:layout_constraintLeft_toLeftOf="parent"

? ? ? ? ? ? app:layout_constraintTop_toTopOf="parent"

? ? ? ? ? ? />

? ? ? ? ? ? android:id="@+id/tv2"

? ? ? ? ? ? android:layout_width="0dp"

? ? ? ? ? ? android:layout_height="wrap_content"

? ? ? ? ? ? android:layout_marginLeft="8dp"

? ? ? ? ? ? android:layout_marginRight="12dp"

? ? ? ? ? ? android:text="馬云:一年交稅170多億馬云:一年交稅170多億馬云:一年交稅170多億"

? ? ? ? ? ? android:textColor="#000000"

? ? ? ? ? ? android:textSize="16dp"

? ? ? ? ? ? app:layout_constraintLeft_toRightOf="@id/tv1"

? ? ? ? ? ? app:layout_constraintRight_toRightOf="parent"

? ? ? ? ? ? app:layout_constraintTop_toTopOf="@id/tv1" />

? ? ? ? ? ? android:layout_width="wrap_content"

? ? ? ? ? ? android:layout_height="wrap_content"

? ? ? ? ? ? android:layout_marginLeft="8dp"

? ? ? ? ? ? android:layout_marginTop="12dp"

? ? ? ? ? ? android:text="8分鐘前"

? ? ? ? ? ? android:textColor="#333"

? ? ? ? ? ? android:textSize="12dp"

? ? ? ? ? ? app:layout_constraintLeft_toRightOf="@id/tv1"

? ? ? ? ? ? app:layout_constraintBottom_toBottomOf="@id/tv1" />


看上面的布局，我們好像看到了幾個模式的屬性：

首先是tv1，有兩個沒見過的屬性：

app:layout_constraintLeft_toLeftOf="parent"

從字面上看，指的是讓該控件的左側(cè)與父布局對齊，當(dāng)我們希望控件A與控件B左側(cè)對齊時，就可以使用該屬性。

app:layout_constraintLeft_toLeftOf="@id/viewB"

類似的還有個相似的屬性為：

app:layout_constraintLeft_toRightOf

很好理解，即當(dāng)前屬性的左側(cè)在誰的右側(cè)，當(dāng)我們希望控件A在控件B的右側(cè)時，可以設(shè)置：

app:layout_constraintLeft_toRightOf="@id/viewB"

與之類似的還有幾個屬性：

layout_constraintRight_toLeftOf

layout_constraintRight_toRightOf

layout_constraintTop_toTopOf

layout_constraintTop_toBottomOf

layout_constraintBottom_toTopOf

layout_constraintBottom_toBottomOf

layout_constraintBaseline_toBaselineOf

屬性都形如layout_constraintXXX_toYYYOf,

這里我的理解，constraintXXX里的XXX代表是這個子控件自身的哪條邊(Left、Right、Top、Bottom、Baseline)，

而toYYYOf里的YYY代表的是和約束控件的哪條邊 發(fā)生約束 (取值同樣是 Left、Right、Top、Bottom、Baseline)。

當(dāng)XXX和YYY相反時，表示控件自身的XXX在約束控件的YYY的一側(cè)，

例如app:layout_constraintLeft_toRightOf="@id/button1" ，表示的是控件自身的左側(cè)在button1的右側(cè)

從這里看來，功能和RL布局差不多，那為什么還要出這樣的布局呢？

3.添加一個Banner

我們現(xiàn)在以往在這個feed item頂部添加一個banner，寬度為占據(jù)整個屏幕，寬高比為16：6。

這里尷尬了，在之前的做法，很難在布局中設(shè)置寬高比，一般我們都需要在代碼中顯示的去操作，那么如果你用了ConstraintLayout，它就支持。

<TextView

? ? android:id="@+id/banner"

? ? android:layout_width="0dp"

? ? android:layout_height="0dp"

? ? android:background="#765"

? ? android:gravity="center"

? ? android:text="Banner"

? ? app:layout_constraintDimensionRatio="H,16:6"

? ? app:layout_constraintLeft_toLeftOf="parent"

? ? app:layout_constraintRight_toRightOf="parent" />

我們添加了一個banner，還記得我們剛才所說的么，不要使用match_parent了，而是設(shè)置match_contraint，即0，讓約束來控制布局寬高。

所以我們設(shè)置了寬、高都是match_contraint，然后這兩個屬性：

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

讓我們的寬度充滿整個父布局，在添加一個：

app:layout_constraintDimensionRatio="16:6"

4.增加幾個Tab

?<TextView

?android:id="@+id/tab1"

? ? android:layout_width="0dp"

? ? android:layout_height="30dp"

? ? android:background="#f67"

? ? android:gravity="center"

? ? android:text="Tab1"

? ? app:layout_constraintBottom_toBottomOf="parent"

? ? app:layout_constraintLeft_toLeftOf="parent"

? ? app:layout_constraintRight_toLeftOf="@+id/tab2" />

<TextView

? ? android:id="@+id/tab2"

? ? android:layout_width="0dp"

? ? android:layout_height="30dp"

? ? android:background="#A67"

? ? android:gravity="center"

? ? android:text="Tab2"

? ? app:layout_constraintBottom_toBottomOf="parent"

? ? app:layout_constraintLeft_toRightOf="@id/tab1"

? ? app:layout_constraintRight_toLeftOf="@+id/tab3" />

<TextView

? ? android:id="@+id/tab3"

? ? android:layout_width="0dp"

? ? android:layout_height="30dp"

? ? android:background="#767"

? ? android:gravity="center"

? ? android:text="Tab3"

? ? app:layout_constraintBottom_toBottomOf="parent"

? ? app:layout_constraintLeft_toRightOf="@id/tab2"

? ? app:layout_constraintRight_toRightOf="parent" />

現(xiàn)在我們可以給每個tab設(shè)置一個屬性：

app:layout_constraintHorizontal_weight

看到這個名字，應(yīng)該就明白了吧，假設(shè)我們分別設(shè)置值為2，1，1

目前差不多學(xué)到了這么多.

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容