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

阿新 • • 發佈：2020-12-07

轉自：https://www.jianshu.com/p/17ec9bd6ca8a

1.介紹

約束佈局ConstraintLayout是一個ViewGroup，可以在Api9以上的Android系統使用它，它的出現主要是為了解決佈局巢狀過多的問題，以靈活的方式定位和調整小部件。從Android Studio 2.3起，官方的模板預設使用ConstraintLayout。

ConstraintLayout 官方文件

2.為什麼要用ConstraintLayout

在開發過程中經常能遇到一些複雜的UI，可能會出現佈局巢狀過多的問題，巢狀得越多，裝置繪製檢視所需的時間和計算功耗也就越多。簡單舉個例子：

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

有些人考慮到了巢狀佈局帶來的風險，所以用一個RelativeLayout來裝下所有的控制元件。那麼問題來了，既然用RelativeLayout可以解決問題，為什麼還要使用ConstraintLayout呢？因為ConstraintLayout使用起來比RelativeLayout更靈活，效能更出色！還有一點就是ConstraintLayout可以按照比例約束控制元件位置和尺寸，能夠更好地適配螢幕大小不同的機型。

3.如何使用ConstraintLayout

3.1 新增依賴

首先我們需要在app/build.gradle檔案中新增ConstraintLayout的依賴，如下所示。

 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

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

目錄

1.介紹

2.為什麼要用ConstraintLayout

3.如何使用ConstraintLayout

3.1 新增依賴

3.2 相對定位

3.3 角度定位

3.4 邊距

3.5 居中和偏移

3.6 尺寸約束

3.7 鏈

4.輔助工具

4.1 Optimizer

4.2 Barrier

4.3 Group

4.4 Placeholder

4.5 Guideline

5.總結

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

Nginx 配置常用引數，看這一篇就夠了

Spring事務傳播屬性有那麼難嗎？看這一篇就夠了

【FastDFS】FastDFS 分散式檔案系統的安裝與使用，看這一篇就夠了！！

【Nginx】如何獲取客戶端真實IP、域名、協議、埠？看這一篇就夠了！

【Nginx】如何按日期分割Nginx日誌？看這一篇就夠了！！

關於郵件傳送，只看這一篇就夠了！！！

關於類的載入機制和反射機制只看這一篇就夠了，分析的非常詳細

關於Java多執行緒看這一篇就夠了，從建立執行緒到執行緒池分析的明明白白

HBase入門，看這一篇就夠了

什麼是BFC？看這一篇就夠了

Python辦公自動化之Excel做表自動化：全網最全，看這一篇就夠了！

理解Volatile關鍵字，其實看這一篇就夠了，寫的非常細緻

Spring Cloud Config 實現配置中心，看這一篇就夠了

你想了解的分散式檔案系統HDFS，看這一篇就夠了

SpringBoot寫後端介面，看這一篇就夠了！

SpringBoot後端介面的實現(看這一篇就夠了)

java執行緒-看這一篇就夠了

C++ 基本資料型別中int、long等整數型別取值範圍及原理看這一篇就夠了

Java 集合看這一篇就夠了

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

目錄

1.介紹

2.為什麼要用ConstraintLayout

3.如何使用ConstraintLayout

3.1 新增依賴

3.2 相對定位

3.3 角度定位

3.4 邊距

3.5 居中和偏移

3.6 尺寸約束

3.7 鏈

4.輔助工具

4.1 Optimizer

4.2 Barrier

4.3 Group

4.4 Placeholder

4.5 Guideline

5.總結

相關推薦