天天看點

constraintlayout嵌套_ConstraintLayout限制布局告别LinearLayout多層嵌套

引言

你還在建立layout.xml布局檔案後第一時間修改根布局為LinearLayout嗎?如果你仍癡迷于LinearLayout線性布局,或是RelativeLayout相對布局,你将在Android進階之路上進步不大!!!這不是危言聳聽。

在開發過程中經常能遇到一些複雜的UI,可能會出現布局嵌套過多的問題,嵌套得越多,裝置繪制視圖所需的時間和計算功耗也就越多。這無疑加重了我們項目的響應速率壓力,是以告别LinearLayout多層嵌套勢在必行!

介紹

限制布局ConstraintLayout是我們建立布局後的預設布局,它的存在主要是為了解決布局多層嵌套問題,以靈活的方式定位和調整小部件。

ConstraintLayout使用起來比RelativeLayout更靈活,性能更出色!還有一點就是ConstraintLayout可以按照比例限制控件位置和尺寸,能夠更好地适配螢幕大小不同的機型。

用法

第一步:添加依賴(在app下build.gradle中)

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

第二步:在布局檔案xml中使用

相對布局定位:

ConstraintLayout相對定位的用法跟RelativeLayout比較相似。

constraintlayout嵌套_ConstraintLayout限制布局告别LinearLayout多層嵌套

相對定位.png

app:layout_constraintLeft_toLeftOf="@id/相對控件id"

目前控件左側與相對控件左側對齊

app:layout_constraintLeft_toRightOf="@id/相對控件id"

目前控件左側與相對控件右側對齊

app:layout_constraintRight_toLeftOf="@id/相對控件id"

目前控件右側與相對控件左側對齊

app:layout_constraintRight_toRightOf="@id/相對控件id"

目前控件右側與相對控件右側對齊

app:layout_constraintTop_toTopOf="@id/相對控件id"

目前控件上側與相對控件上側對齊

app:layout_constraintTop_toBottomOf="@id/相對控件id"

目前控件上側與相對控件下側對齊

app:layout_constraintBottom_toTopOf="@id/相對控件id"

目前控件下側與相對控件上側對齊

app:layout_constraintBottom_toBottomOf="@id/相對控件id"

目前控件下側與相對控件下側對齊

app:layout_constraintStart_toEndOf="@id/相對控件id"

目前控件開始側(左)與相對控件結束側(右)對齊 app:layout_constraintStart_toStartOf="@id/相對控件id"

目前控件開始側(左)與相對控件開始側(左)對齊 app:layout_constraintEnd_toStartOf="@id/相對控件id"

目前控件控件結束側(右)與相對控件開始側(左)對齊 app:layout_constraintEnd_toEndOf="@id/相對控件id"

目前控件控件結束側(右)與相對控件控件結束側(右)對齊

文本基線限制解釋:

app:layout_constraintBaseline_toBaselineOf="@id/相對控件id"

目前控件文本基線與相對控件文本基線對齊。

Tips:文本基線即空間文字的底部。

角度定位

用角度+距離來限制布局

constraintlayout嵌套_ConstraintLayout限制布局告别LinearLayout多層嵌套

角度定位.png

app:layout_constraintCircleAngle="角度"

app:layout_constraintCircleRadius="距離"

Tips:

android中的角度是從我們印象中的90度線開始向下延伸的,因為預設向右為X軸,向下為Y軸。

距離指相對定位的兩控件的中心點距離,實際使用中可能需要計算。

例子:

在TextView2的布局中,讓其相對于TextView1進行角度定位。

app:layout_constraintCircle="@+id/TextView1"

app:layout_constraintCircleAngle="120"(角度)

app:layout_constraintCircleRadius="150dp"(距離)

邊距如何設定?

android:layout_marginStart,開始(左)邊距

android:layout_marginEnd,結束(右)邊距

android:layout_marginLeft,左邊距

android:layout_marginTop,上邊距

android:layout_marginRight,右邊距

android:layout_marginBottom,下邊距

Tips:使用邊距時,必須首先使用Constraint相對布局定位,同時Start不能和Right搭配,必須和End。Left同理。

如何讓控件相對居中?

水準居中

(AB控件之間水準居中)

app:layout_constraintLeft_toRightOf="@id/相對A控件id"

app:layout_constraintRight_toLeftOf="@id/相對B控件id"

(相對于父布局水準居中)

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

Tips:或者将其換成:Left->Start,Right->End效果一樣,但需要配套使用,不能亂搭配。

垂直居中

(AB控件之間垂直居中)

app:layout_constraintTop_toBottomOf="@id/相對A控件id"

app:layout_constraintBottom_toTopOf="@id/相對B控件id"

(相對于父布局水準居中)

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintBottom_toBottomOf="parent"

偏移

app:layout_constraintHorizontal_bias 水準偏移

app:layout_constraintVertical_bias 垂直偏移

Tips:除Margin屬性的另一種偏移方式

如何将多個布局控件鍊起來?

當多個布局需要連接配接起來時需要用到鍊布局。

鍊樣式

chains提供了3種樣式,分别為

CHAIN_SPREAD —— 展開元素 (預設);

CHAIN_SPREAD_INSIDE —— 展開元素,但鍊的兩端貼近parent;

CHAIN_PACKED —— 鍊的元素将被打包在一起。

水準鍊

app:layout_constraintHorizontal_chainStyle="鍊條樣式"

垂直鍊

app:layout_constraintVertical_chainStyle="鍊條樣式"

權重鍊

layout_constraintHorizontal_weight=“水準鍊權重”

layout_constraintVertical_weight=“垂直鍊權重”

Tips:首先需要設定寬度為0dp(設定水準鍊權重時),設定高度為0dp(設定垂直鍊權重時)。