當前位置：首頁 > 运维知识 > Android >内容正文

Android

Android控件之ConstraintLayout详解

發布時間：2025/3/21 Android 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 Android控件之ConstraintLayout详解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、為什么要用ConstraintLayout？

任何復雜的布局只需一層（除非有嵌套的事件響應需求）：

繪制過程中的每個階段都需要對視圖樹執行一次自頂向下的遍歷操作。因此，視圖層次結構中嵌入（或嵌套）的視圖越多，設備繪制視圖所需的時間和計算功耗也就越多。通過在 Android 應用布局中保持扁平的層次結構，您可以為應用創建響應快速而靈敏的界面。

性能更出色

ConstraintLayout 在測量/布局階段的性能比 RelativeLayout大約高 40%。詳情參閱：解析ConstraintLayout的性能優勢

LinearLayout和RecyclerView的布局能做到的ConstraintLayout都能做到，它們做不到的也能做到（這一點后面詳解）。

2、它有哪些缺點？

xml很啰嗦

主要體現在兩方面： 1、它需要通過詳盡的屬性來確定自身位置，因為以前用LL或RL的寫法，有些屬性在父容器寫一次就夠，子容器就無需再寫一次，但這個是每個容器都是獨立的，需要根據周圍的控件確定自身的位置。所以這就引出了第二個啰嗦。 2、每個View都要有與之對應的id。

沒有gravity屬性，這里后面會講到一個“拉力”的概念，這里先簡單說一下，怎么實現gravity=center這樣的效果呢？需要把每個邊都與父容器的邊對應上（需設置4個屬性），因為四個邊都要拉扯以將控件拉到中間。

3、怎么使用？

1、引入資源

compile 'com.android.support.constraint:constraint-layout:1.0.2' 復制代碼

2、熟悉它的屬性，主要有幾部分：

part1:類似于RelativeLayout的部分：

根據其他控件給自身定位：

layout_toRightOf="A"——>layout_constraintLeft_toRightOf="A"

根據父容器給自身定位：

layout_alignParentRight=true——>layout_constraintRight_toRightOf=parent

類似的還有：

layout_constraintRight_toLeftOf layout_constraintRight_toRightOf layout_constraintTop_toTopOf layout_constraintTop_toBottomOf layout_constraintBottom_toTopOf layout_constraintBottom_toBottomOf //根據某控件的基線對齊 layout_constraintBaseline_toBaselineOf

part2：類似LinearLayout的weight效果

官方有張圖，如[圖1]所示，通常來說，LinearLayout的weight只能實現第四行的效果，但ConstraintLayout可以實現下圖全部。

想實現類似LL（LinearLayout）的weight的效果，重點看每個TextView的最下三行以及每個TextView的layout_width都是0，以下布局可以實現三個TextView。

<TextViewandroid:id="@+id/tab1"android:layout_width="0dp"android:layout_height="30dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@+id/tab2" /><TextViewandroid:id="@+id/tab2"android:layout_width="0dp"android:layout_height="30dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toRightOf="@id/tab1"app:layout_constraintRight_toLeftOf="@+id/tab3" /><TextViewandroid:id="@+id/tab3"android:layout_width="0dp"android:layout_height="30dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toRightOf="@id/tab2"app:layout_constraintRight_toRightOf="parent" /> 復制代碼

如果想實現2：1：1等分的效果，就如[圖1]的第四行，需要給每個TextView分別添加如下屬性，并挨個設置值為2，1，1即可：

app:layout_constraintHorizontal_weight 復制代碼

part3：以下是LinearLayout和RelativeLayout都做不到的，或者說是[要花很大的代價才能實現]這種表達是不是更準確點？

1、先說一下【鏈（Chains）】的概念：

ConstraintLayout中的控件想要定位準確，A控件是要依賴于父容器左側和B，然后B控件依賴于A和B，C依賴于B以及父容器的右側，就如圖2所示：

這個鏈代表了某種約束和拉力，上圖A，B，C之間存有間隙，（ps：如果要無間隙等分的話，需設置layout_width=0dp），圖2每個控件拉力都是一樣的，如果想實現[圖1]的其他效果，實際上都是根據拉力大小變化來實現的，B拉力大一點，那A和C都更靠近B一點點，類似這樣的道理。

這里要引出一個屬性：

layout_constraintHorizontal_chainStyle 復制代碼

該屬性有三個值：spread（鋪開），spread_inside（里面鋪開）， packed（擁擠），效果依次對應圖1的：第1行，第2行，第4行。默認是spread。（ps：以上效果layout_width是固定值或wrap_content，如果是0的話就會類似第3行那樣）

2、用bias（偏斜）實現[圖1]第5行的效果

簡而言之就是調整C控件兩邊的拉力即可，對應的屬性是：

layout_constraintHorizontal_bias //水平線的拉力 layout_constraintVertical_bias //垂直線的拉力復制代碼

該屬性的值是0~1，默認是0.5，通過調整水平線的拉力即可達到第5行的效果了。

3、控件的寬高比

以前如果想要實現一個Banner寬高比是2:1這樣的，很麻煩，因為每個機型分辨率有大有小，除非代碼運行才能知道屏幕寬度是多少，才能動態得到屏幕寬度，在xml中根本無法實現。但ConstraintLayout提供了一個屬性就能實現：

app:layout_constraintDimensionRatio="W,2:1" 或 app:layout_constraintDimensionRatio="H,1:2" 復制代碼

注意：寬高需要設置0dp才能有效果！

part4：關于Guideline（輔助線）

這個是為了方便ConstraintLayout布局，如果用過CAD的朋友就應該知道輔助線，用來輔助畫圖很方便，而且保存文件的時候該線是不會顯示到圖片上的，同理，這個也只是在寫xml的時候輔助用的，應用真正運行的時候是看不到的。

因為是一條線嘛，自然要區分水平還是垂直的，所以就有一個屬性：

android:orientation 復制代碼

取值為”vertical”和”horizontal”，跟RecyclerView一樣。

它還有一些屬性用來給輔助線找準位置，然后給輔助線命名個id，其他控件只要基于該先找到自己的位置就好啦~

layout_constraintGuide_begin layout_constraintGuide_end layout_constraintGuide_percent 復制代碼

它有兩種方式來找到自己的位置，一個是絕對值，也就是begin&end（取值為dp），一個是百分比percent（取值為0~1）。
當orientation為vertical的時候，begin對應距離頂部，end對應距離底部。
當orientation為horizontal的時候，begin對應距離左邊，end對應距離右邊。

真正使用的時候，就把Guideline當作一個View來用好了，Android Studio也會有預覽給你看的，記得要給它命名啊，不然其他控件怎么基于它定位呢，對吧？

總結

以上是生活随笔為你收集整理的Android控件之ConstraintLayout详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： strong、copy和mutableC
下一篇：【转】 Android新特性介绍，Con

生活随笔