約束佈局ConstraintLayout看這一篇就夠了

時間 2019-11-06

標籤約束佈局 constraintlayout 看這一篇夠了简体版

原文原文鏈接

1.介紹

約束佈局ConstraintLayout 是一個ViewGroup，能夠在Api9以上的Android系統使用它，它的出現主要是爲了解決佈局嵌套過多的問題，以靈活的方式定位和調整小部件。從 Android Studio 2.3 起，官方的模板默認使用 ConstraintLayout。android

ConstraintLayout 官方文檔bash

2.爲何要用ConstraintLayout

在開發過程當中常常能遇到一些複雜的UI，可能會出現佈局嵌套過多的問題，嵌套得越多，設備繪製視圖所需的時間和計算功耗也就越多。簡單舉個例子：微信

假設如今要寫一個這樣的佈局，可能有人會這麼寫：首先是一個垂直的LinearLayout，裏面放兩個水平的LinearLayout，而後在水平的LinearLayout裏面放TextView。這樣的寫法就嵌套了兩層LinearLayout。app

有些人考慮到了嵌套佈局帶來的風險，因此用一個RelativeLayout來裝下全部的控件。那麼問題來了，既然用RelativeLayout能夠解決問題，爲何還要使用ConstraintLayout呢？由於ConstraintLayout使用起來比RelativeLayout更靈活，性能更出色！還有一點就是ConstraintLayout能夠按照比例約束控件位置和尺寸，可以更好地適配屏幕大小不一樣的機型。編輯器

3.如何使用ConstraintLayout

3.1 添加依賴

首先咱們須要在app/build.gradle文件中添加ConstraintLayout的依賴，以下所示。ide

implementation 'com.android.support.constraint:constraint-layout:1.1.3'
複製代碼

3.2 相對定位

相對定位是部件對於另外一個位置的約束，這麼說可能有點抽象，舉個例子：工具

如圖所示，TextView2在TextView1的右邊，TextView3在TextView1的下面，這個時候在佈局文件裏面應該這樣寫：佈局

<TextView
        android:id="@+id/TextView1"
        ...
        android:text="TextView1" />

    <TextView
        android:id="@+id/TextView2"
        ...
        app:layout_constraintLeft_toRightOf="@+id/TextView1" />

    <TextView
        android:id="@+id/TextView3"
        ...
        app:layout_constraintTop_toBottomOf="@+id/TextView1" />
複製代碼

上面代碼中在TextView2裏用到了app:layout_constraintLeft_toRightOf="@+id/TextView1"這個屬性，他的意思是把TextView2的左邊約束到TextView1的右邊，以下圖所示：性能

同理TextView3在TextView1的下面，就須要用到app:layout_constraintTop_toBottomOf="@+id/TextView1"，即把TextView3的上面約束到TextView1的下面。學習

下面來看看相對定位的經常使用屬性： layout_constraintLeft_toLeftOf layout_constraintLeft_toRightOf layout_constraintRight_toLeftOf layout_constraintRight_toRightOf layout_constraintTop_toTopOf layout_constraintTop_toBottomOf layout_constraintBottom_toTopOf layout_constraintBottom_toBottomOf layout_constraintBaseline_toBaselineOf layout_constraintStart_toEndOf layout_constraintStart_toStartOf layout_constraintEnd_toStartOf layout_constraintEnd_toEndOf

上面屬性中有一個比較有趣的layout_constraintBaseline_toBaselineOf Baseline指的是文本基線，舉個例子：

如圖所示，兩個TextView的高度不一致，可是又但願他們文本對齊，這個時候就可使用layout_constraintBaseline_toBaselineOf，代碼以下：

<TextView
        android:id="@+id/TextView1"
        .../>

    <TextView
        android:id="@+id/TextView2"
        ...
        app:layout_constraintLeft_toRightOf="@+id/TextView1" 
        app:layout_constraintBaseline_toBaselineOf="@+id/TextView1"/>
複製代碼

效果以下：

ConstraintLayout相對定位的用法跟RelativeLayout仍是比較類似的，下面用一個圖來總結相對定位：

3.3 角度定位

角度定位指的是能夠用一個角度和一個距離來約束兩個空間的中心。舉個例子：

<TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintCircle="@+id/TextView1"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="150dp" />
複製代碼

上面例子中的TextView2用到了3個屬性： app:layout_constraintCircle="@+id/TextView1" app:layout_constraintCircleAngle="120"（角度） app:layout_constraintCircleRadius="150dp"（距離）指的是TextView2的中心在TextView1的中心的120度，距離爲150dp，效果以下：

3.4 邊距

3.4.1 經常使用margin

ConstraintLayout的邊距經常使用屬性以下： android:layout_marginStart android:layout_marginEnd android:layout_marginLeft android:layout_marginTop android:layout_marginRight android:layout_marginBottom

看起來跟別的佈局沒有什麼差異，但實際上控件在ConstraintLayout裏面要實現margin，必須先約束該控件在ConstraintLayout裏的位置，舉個例子：

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" />

</android.support.constraint.ConstraintLayout>
複製代碼

若是在別的佈局裏，TextView1的位置應該是距離邊框的左邊和上面有一個10dp的邊距，可是在ConstraintLayout裏，是不生效的，由於沒有約束TextView1在佈局裏的位置。正確的寫法以下：

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" 
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>
複製代碼

把TextView1的左邊和上邊約束到parent的左邊和上邊，這樣margin就會生效，效果以下：

在使用margin的時候要注意兩點：控件必須在佈局里約束一個相對位置 margin只能大於等於0

3.4.2 goneMargin

goneMargin主要用於約束的控件可見性被設置爲gone的時候使用的margin值，屬性以下： layout_goneMarginStart layout_goneMarginEnd layout_goneMarginLeft layout_goneMarginTop layout_goneMarginRight layout_goneMarginBottom

舉個例子：假設TextView2的左邊約束在TextView1的右邊，並給TextView2設一個app:layout_goneMarginLeft="10dp"，代碼以下：

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/TextView1"
        .../>

    <TextView
        android:id="@+id/TextView2"
        ...
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_goneMarginLeft="10dp"
        />

</android.support.constraint.ConstraintLayout>
複製代碼

效果以下，TextView2在TextView1的右邊，且沒有邊距。

這個時候把TextView1的可見性設爲gone，效果以下：

TextView1消失後，TextView2有一個距離左邊10dp的邊距。

3.5 居中和偏移

在RelativeLayout中，把控件放在佈局中間的方法是把layout_centerInParent設爲true，而在ConstraintLayout中的寫法是：

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
複製代碼

意思是把控件的上下左右約束在佈局的上下左右，這樣就能把控件放在佈局的中間了。同理RelativeLayout中的水平居中layout_centerHorizontal至關於在ConstraintLayout約束控件的左右爲parent的左右；RelativeLayout中的垂直居中layout_centerVertical至關於在ConstraintLayout約束控件的上下爲parent的上下。因爲ConstraintLayout中的居中已經爲控件約束了一個相對位置，因此可使用margin，以下所示：

<TextView
        android:id="@+id/TextView1"
        ...
        android:layout_marginLeft="100dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
複製代碼

效果以下：

上面TextView1在水平居中後使用layout_marginLeft="100dp"向右偏移了100dp。除了這種偏移外，ConstraintLayout還提供了另一種偏移的屬性： layout_constraintHorizontal_bias 水平偏移 layout_constraintVertical_bias 垂直偏移

舉個例子：

<TextView
        android:id="@+id/TextView1"
        ...
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
複製代碼

效果以下：

假如如今要實現水平偏移，給TextView1的layout_constraintHorizontal_bias賦一個範圍爲 0-1 的值，假如賦值爲0，則TextView1在佈局的最左側，假如賦值爲1，則TextView1在佈局的最右側，假如假如賦值爲0.5，則水平居中，假如假如賦值爲0.3，則更傾向於左側。垂直偏移同理。

3.6 尺寸約束

控件的尺寸能夠經過四種不一樣方式指定：

使用指定的尺寸
使用wrap_content，讓控件本身計算大小當控件的高度或寬度爲wrap_content時，可使用下列屬性來控制最大、最小的高度或寬度： android:minWidth 最小的寬度 android:minHeight 最小的高度 android:maxWidth 最大的寬度 android:maxHeight 最大的高度注意！當ConstraintLayout爲1.1版本如下時，使用這些屬性須要加上強制約束，以下所示： app:constrainedWidth=」true」 app:constrainedHeight=」true」
使用 0dp (MATCH_CONSTRAINT) 官方不推薦在ConstraintLayout中使用match_parent，能夠設置 0dp (MATCH_CONSTRAINT) 配合約束代替match_parent，舉個例子：

<TextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:visibility="visible" />
複製代碼

寬度設爲0dp，左右兩邊約束parent的左右兩邊，並設置左邊邊距爲50dp，效果以下：

寬高比當寬或高至少有一個尺寸被設置爲0dp時，能夠經過屬性layout_constraintDimensionRatio設置寬高比，舉個例子：

<TextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
複製代碼

寬設置爲0dp，寬高比設置爲1:1，這個時候TextView1是一個正方形，效果以下：

除此以外，在設置寬高比的值的時候，還能夠在前面加W或H，分別指定寬度或高度限制。例如： app:layout_constraintDimensionRatio="H,2:3"指的是高:寬=2:3 app:layout_constraintDimensionRatio="W,2:3"指的是寬:高=2:3

3.7 鏈

若是兩個或以上控件經過下圖的方式約束在一塊兒，就能夠認爲是他們是一條鏈（圖爲橫向的鏈，縱向同理）。

用代碼表示：

<TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/TextView2" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_constraintRight_toLeftOf="@+id/TextView3"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView2"
        app:layout_constraintRight_toRightOf="parent" />
複製代碼

3個TextView相互約束，兩端兩個TextView分別與parent約束，成爲一條鏈，效果以下：

一條鏈的第一個控件是這條鏈的鏈頭，咱們能夠在鏈頭中設置 layout_constraintHorizontal_chainStyle來改變整條鏈的樣式。chains提供了3種樣式，分別是： CHAIN_SPREAD —— 展開元素 (默認)； CHAIN_SPREAD_INSIDE —— 展開元素，但鏈的兩端貼近parent； CHAIN_PACKED —— 鏈的元素將被打包在一塊兒。如圖所示：

上面的例子建立了一個樣式鏈，除了樣式鏈外，還能夠建立一個權重鏈。能夠留意到上面所用到的3個TextView寬度都爲wrap_content，若是咱們把寬度都設爲0dp，這個時候能夠在每一個TextView中設置橫向權重layout_constraintHorizontal_weight(constraintVertical爲縱向)來建立一個權重鏈，以下所示：

<TextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/TextView2"
        app:layout_constraintHorizontal_weight="2" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_constraintRight_toLeftOf="@+id/TextView3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="3" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="4" />
複製代碼

效果以下：

4.輔助工具

4.1 Optimizer

當咱們使用 MATCH_CONSTRAINT 時，ConstraintLayout 將對控件進行 2 次測量，ConstraintLayout在1.1中能夠經過設置 layout_optimizationLevel 進行優化，可設置的值有： none：無優化 standard：僅優化直接約束和屏障約束（默認） direct：優化直接約束 barrier：優化屏障約束 chain：優化鏈約束 dimensions：優化尺寸測量

4.2 Barrier

假設有3個控件ABC，C在AB的右邊，可是AB的寬是不固定的，這個時候C不管約束在A的右邊或者B的右邊都不對。當出現這種狀況能夠用Barrier來解決。Barrier能夠在多個控件的一側創建一個屏障，以下所示：

這個時候C只要約束在Barrier的右邊就能夠了，代碼以下：

<TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/TextView1" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="TextView1,TextView2" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/barrier" />
複製代碼

app:barrierDirection爲屏障所在的位置，可設置的值有：bottom、end、left、right、start、top app:constraint_referenced_ids爲屏障引用的控件，可設置多個(用「,」隔開)

4.3 Group

Group能夠把多個控件歸爲一組，方便隱藏或顯示一組控件，舉個例子：

<TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@id/TextView2" />
複製代碼

如今有3個並排的TextView，用Group把TextView1和TextView3歸爲一組，再設置這組控件的可見性，以下所示：

<android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="TextView1,TextView3" />
複製代碼

效果以下：

4.4 Placeholder

Placeholder指的是佔位符。在Placeholder中可以使用setContent()設置另外一個控件的id，使這個控件移動到佔位符的位置。舉個例子：

<android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@+id/textview"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#cccccc"
        android:padding="16dp"
        android:text="TextView"
        android:textColor="#000000"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
複製代碼

新建一個Placeholder約束在屏幕的左上角，新建一個TextView約束在屏幕的右上角，在Placeholder中設置 app:content="@+id/textview"，這時TextView會跑到屏幕的左上角。效果以下：

4.5 Guideline

Guildline像輔助線同樣，在預覽的時候幫助你完成佈局（不會顯示在界面上）。 Guildline的主要屬性： android:orientation 水平vertical，垂直horizontal layout_constraintGuide_begin 開始位置 layout_constraintGuide_end 結束位置 layout_constraintGuide_percent 距離頂部的百分比(orientation = horizontal時則爲距離左邊) 舉個例子：

<android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="50dp" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />
複製代碼

guideline1爲水平輔助線，開始位置是距離頂部50dp，guideline2位垂直輔助線，開始位置爲屏幕寬的0.5(中點位置)，效果以下：

5.總結

本篇文章主要介紹了ConstraintLayout和它在佈局文件裏的用法，和一些輔助ConstraintLayout佈局的工具，跟着敲一遍就能學會ConstraintLayout。除此以外，ConstraintLayout還有一個獨立的編輯器，只須要托拉拽就能夠完成整個佈局，但我我的比較喜歡直接用代碼寫，就不介紹了，有興趣的能夠參考https://blog.csdn.net/guolin_blog/article/details/53122387

微信掃描下方二維碼關注微信公衆號"AndroidCzh"一塊兒學習ConstraintLayout吧！這裏將長期爲您分享原創文章、Android開發經驗等！