ConstraintLayout約束布局告別LinearLayout多層嵌套

引言

??你還在創(chuàng)建layout.xml布局文件后第一時間修改根布局為LinearLayout嗎?如果你仍癡迷于LinearLayout線性布局,或是RelativeLayout相對布局,你將在Android進(jìn)階之路上進(jìn)步不大!??!這不是危言聳聽。
??在開發(fā)過程中經(jīng)常能遇到一些復(fù)雜的UI,可能會出現(xiàn)布局嵌套過多的問題,嵌套得越多,設(shè)備繪制視圖所需的時間和計算功耗也就越多。這無疑加重了我們項目的響應(yīng)速率壓力,因此告別LinearLayout多層嵌套勢在必行!


介紹

??約束布局ConstraintLayout是我們創(chuàng)建布局后的默認(rèn)布局,它的存在主要是為了解決布局多層嵌套問題,以靈活的方式定位和調(diào)整小部件。
??ConstraintLayout使用起來比RelativeLayout更靈活,性能更出色!還有一點就是ConstraintLayout可以按照比例約束控件位置和尺寸,能夠更好地適配屏幕大小不同的機型。


用法

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

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

第二步:在布局文件xml中使用


相對布局定位:

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


相對定位.png

app:layout_constraintLeft_toLeftOf="@id/相對控件id"
??當(dāng)前控件左側(cè)與相對控件左側(cè)對齊
app:layout_constraintLeft_toRightOf="@id/相對控件id"
??當(dāng)前控件左側(cè)與相對控件右側(cè)對齊
app:layout_constraintRight_toLeftOf="@id/相對控件id"
??當(dāng)前控件右側(cè)與相對控件左側(cè)對齊
app:layout_constraintRight_toRightOf="@id/相對控件id"
??當(dāng)前控件右側(cè)與相對控件右側(cè)對齊
app:layout_constraintTop_toTopOf="@id/相對控件id"
??當(dāng)前控件上側(cè)與相對控件上側(cè)對齊
app:layout_constraintTop_toBottomOf="@id/相對控件id"
??當(dāng)前控件上側(cè)與相對控件下側(cè)對齊
app:layout_constraintBottom_toTopOf="@id/相對控件id"
??當(dāng)前控件下側(cè)與相對控件上側(cè)對齊
app:layout_constraintBottom_toBottomOf="@id/相對控件id"
??當(dāng)前控件下側(cè)與相對控件下側(cè)對齊
app:layout_constraintStart_toEndOf="@id/相對控件id"
??當(dāng)前控件開始側(cè)(左)與相對控件結(jié)束側(cè)(右)對齊 app:layout_constraintStart_toStartOf="@id/相對控件id"
??當(dāng)前控件開始側(cè)(左)與相對控件開始側(cè)(左)對齊 app:layout_constraintEnd_toStartOf="@id/相對控件id"
??當(dāng)前控件控件結(jié)束側(cè)(右)與相對控件開始側(cè)(左)對齊 app:layout_constraintEnd_toEndOf="@id/相對控件id"
??當(dāng)前控件控件結(jié)束側(cè)(右)與相對控件控件結(jié)束側(cè)(右)對齊

文本基線約束解釋:
app:layout_constraintBaseline_toBaselineOf="@id/相對控件id"
??當(dāng)前控件文本基線與相對控件文本基線對齊。
Tips:文本基線即空間文字的底部。


角度定位

用角度+距離來約束布局


角度定位.png

app:layout_constraintCircleAngle="角度"
app:layout_constraintCircleRadius="距離"
Tips:
??android中的角度是從我們印象中的90度線開始向下延伸的,因為默認(rèn)向右為X軸,向下為Y軸。
??距離指相對定位的兩控件的中心點距離,實際使用中可能需要計算。

例子:
??在TextView2的布局中,讓其相對于TextView1進(jìn)行角度定位。

app:layout_constraintCircle="@+id/TextView1"
app:layout_constraintCircleAngle="120"(角度)
app:layout_constraintCircleRadius="150dp"(距離)

邊距如何設(shè)置?

android:layout_marginStart,開始(左)邊距
android:layout_marginEnd,結(jié)束(右)邊距
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屬性的另一種偏移方式


如何將多個布局控件鏈起來?

當(dāng)多個布局需要連接起來時需要用到鏈布局。
鏈樣式
chains提供了3種樣式,分別為
CHAIN_SPREAD —— 展開元素 (默認(rèn));
CHAIN_SPREAD_INSIDE —— 展開元素,但鏈的兩端貼近parent;
CHAIN_PACKED —— 鏈的元素將被打包在一起。

水平鏈
app:layout_constraintHorizontal_chainStyle="鏈條樣式"
垂直鏈
app:layout_constraintVertical_chainStyle="鏈條樣式"
權(quán)重鏈
layout_constraintHorizontal_weight=“水平鏈權(quán)重”
layout_constraintVertical_weight=“垂直鏈權(quán)重”
Tips:首先需要設(shè)置寬度為0dp(設(shè)置水平鏈權(quán)重時),設(shè)置高度為0dp(設(shè)置垂直鏈權(quán)重時)。

?著作權(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)容