android约束布局的优缺点,Android约束布局ConstraintLayout由浅入深的使用总结

本文详细介绍了Android约束布局ConstraintLayout的优缺点,重点解析了其基本和高级用法,包括定位、间距、尺寸大小的设置,以及强制约束、Barrier、Guideline、Group和Chain的概念和应用场景。通过实例展示了如何利用ConstraintLayout实现复杂布局效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

优缺点

优点

极大程度减少布局层级

可以实现一些其他布局管理器不能实现的样式

缺点

每个被参考的控件都需要设置id

以下所有描述都是针对ConstraintLayout下子控件的,通用的属性在此不再叙述,只针对ConstraintLayout独有属性进行探讨。

基本用法

一、定位

1. 相对定位

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:文字Baseline对齐

layout_constraintStart_toEndOf

layout_constraintStart_toStartOf

layout_constraintEnd_toStartOf

layout_constraintEnd_toEndOf

以下代码表示tv2顶部与tv1顶部对齐

...

>

android:id="@+id/tv1"

...

/>

android:id="@+id/tv2"

...

app:layout_constraintTop_toTopOf="@id/tv1" />

2. 圆形定位

layout_constraintCircle : 参考控件的id

layout_constraintCircleRadius : 本控件与参考控件中心点间距

layout_constraintCircleAngle : 角度0~360

bae856661258

一图胜千言

以下代码表示Textview中心位于id为targetId控件的中心距离30dp角度为30度的位置

...

>

...

app:layout_constraintCircle="@id/targetId"

app:layout_constraintCircleAngle="30"

app:layout_constraintCircleRadius="30dp"/>

3. 百分比定位(bias)

layout_constraintHorizontal_bias

layout_constraintVertical_bias

取值范围0~1,默认值0.5

以下代码表示Textview中心位置位于ConstraintLayout宽度的30%处

...

>

...

app:layout_constraintHorizontal_bias="0.3"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"/>

4. 居中对齐

所有居中对其需要设置对应方向尺寸大小为wrap_content或固定值

水平居中

以下代码表示Textview相对于ConstraintLayout水平居中

...

>

...

android:layout_width="60dp"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"/>

注意:

这里的left和right换成start和end也是可以的

这里的parent换成参考控件的id也是可以的

垂直居中

以下代码表示Textview相对于ConstraintLayout垂直居中

...

>

...

android:layout_height="60dp"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintBottom_toBottomOf="parent"/>

注意:这里的parent换成参考控件的id也是可以的

5. 单边对齐

以下代码表示tv2和tv3与tv1顶部对齐

...

>

android:id="@+id/tv1"

...

/>

android:id="@+id/tv2"

...

app:layout_constraintTop_toTopOf="@id/tv1" />

android:id="@+id/tv3"

...

app:layout_constraintTop_toTopOf="@id/tv1" />

注意:这里写法比较多样,以上展示的都是以统一的单个控件为参考点,也可以以相关控件为参考点,比如这里的tv3可以与tv2顶部对其,效果也是一样的。

二、间距

layout_goneMarginStart

layout_goneMarginEnd

layout_goneMarginLeft

layout_goneMarginTop

layout_goneMarginRight

layout_goneMarginBottom

表示当前控件参考的控件隐藏时对应的间距,如果参考控件未隐藏该设置不会生效。

以下代码表示tv1正常显示多时候,tv2左边距离tv1 100dp,如果tv1隐藏了,tv2左边距为0

...

>

android:id="@+id/tv1"

...

/>

android:id="@+id/tv2"

...

android:layout_marginStart="100dp"

app:layout_goneMarginStart="0dp"

app:layout_constraintTop_toTopOf="@id/tv1" />

三、尺寸大小

1. 权重比

主要依赖于以下两个属性:

app:layout_constraintHorizontal_weight

app:layout_constraintVertical_weight

默认情况下各控件的权重都是相等的,以下代码表示tv1、tv2和tv3三等分ConstraintLayout的宽度

...

>

android:id="@+id/tv1"

android:layout_width="0dp"

...

app:layout_constraintEnd_toStartOf="@id/tv2"

app:layout_constraintStart_toStartOf="parent"/>

android:id="@+id/tv2"

android:layout_width="0dp"

...

app:layout_constraintEnd_toStartOf="@id/tv3"

app:layout_constraintStart_toEndOf="@id/tv1"

/>

android:id="@+id/tv3"

android:layout_width="0dp"

...

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toEndOf="@id/tv2"/>

如果需要非等分,使用layout_constraintHorizontal_weight或者layout_constraintVertical_weight属性调整即可,以下代码表示tv1、tv2和tv3按照3:2:1的比例占满ConstraintLayout的宽度

...

>

android:id="@+id/tv1"

android:layout_width="0dp"

...

app:layout_constraintEnd_toStartOf="@id/tv2"

app:layout_constraintHorizontal_weight="3"

app:layout_constraintStart_toStartOf="parent"/>

android:id="@+id/tv2"

android:layout_width="0dp"

...

app:layout_constraintEnd_toStartOf="@id/tv3"

app:layout_constraintHorizontal_weight="2"

app:layout_constraintStart_toEndOf="@id/tv1"/>

android:id="@+id/tv3"

android:layout_width="0dp"

...

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_weight="1"

app:layout_constraintStart_toEndOf="@id/tv2"/>

2. 百分比

百分比需要满足下面三个条件:

宽或高设置成0dp

宽或高默认值设置成百分比

app:layout_constraintWidth_default="percent"

app:layout_constraintHeight_default="percent"

宽或高百分比的值(取值范围0~1)

app:layout_constraintWidth_percent

app:layout_constraintHeight_percent

这里的百分比是指占父控件的百分比

以下代码表示Textview宽度为ConstraintLayout宽度的50%

...

>

...

android:layout_width="0dp"

app:layout_constraintHeight_default="percent"

app:layout_constraintWidth_percent="0.5"/>

3. 宽高比

百分比需要满足下面两个条件:

a. 宽或高至少有一个设置成0dp

b. 通过app:layout_constraintDimensionRatio设置宽高比

这里layout_constraintDimensionRatio宽高的取值有以下4种形式:

16:9 表示宽高比为16:9

0.2 表示宽高比为1:5

H,16:9 表示宽高比为9:16

W,16:9 表示宽高比为16:9

以下代码表示Textview的宽高比为2:1

...

>

...

android:layout_height="0dp"

app:layout_constraintDimensionRatio="2:1"/>

高级用法

一、强制约束

1. 应用场景

使用wrap_content,但仍要强制执行约束以限制结果尺寸,比如一个Textview的宽度是根据文字内容自适应的,文字内容可能很短也可能很长,当文字内容很长的时候可能会打破原先的约束,比如本来在在某个控件的左边,但是随着文字内容的增长会越界!

2. 使用方式

layout_constrainedWidth="true|false"

layout_constrainedHeight="true|false"

使用以上两个属性来强制控件的宽或高严格执行相应的约束条件

3. 示例

...

>

android:id="@+id/tv1"

...

android:layout_width="wrap_content"

app:layout_constraintRight_toLeftOf="@id/tv2"

app:layout_constraintLeft_toLeftOf="parent" />

android:id="@+id/tv2"

...

android:layout_width="wrap_content"

app:layout_constraintTop_toBottomOf="@id/tv1"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent" />

以上代码实现的是tv1在tv2的左边,随着tv1内容不断增加,tv1的右边会越过tv2的左边,如果想限制不管tv1内容怎么增加都不会越过tv2的左边,则可增加layout_constrainedWidth="true"即可

...

>

android:id="@+id/tv1"

...

android:layout_width="wrap_content"

app:layout_constrainedWidth="true"

app:layout_constraintRight_toLeftOf="@id/tv2"

app:layout_constraintLeft_toLeftOf="parent" />

android:id="@+id/tv2"

...

android:layout_width="wrap_content"

app:layout_constraintTop_toBottomOf="@id/tv1"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent" />

二、Barrier

1. 应用场景

当某个控件的约束想以一组控件为参考点,并且始终不越界

2. 使用方式

app:barrierDirection="start|left|top|right|end|bottom"

app:constraint_referenced_ids="tv1,tv2"

3. 示例

以下代码表示以tv1和tv2的底部为一个屏障,tv3始终在tv1和tv2下面,即使tv1和tv2全部都消失

...

>

android:id="@+id/barrier"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:barrierAllowsGoneWidgets="true"

app:barrierDirection="bottom"

app:constraint_referenced_ids="tv1,tv2" />

android:id="@+id/tv1"

...

/>

android:id="@+id/tv2"

...

/>

android:id="@+id/tv3"

...

app:layout_constraintTop_toBottomOf="@id/barrier"/>

三、 Guideline

1. 应用场景

布局参考线可以作为其他控件布局约束的参考,但不会显示出来

2. 使用方式

参考线的方向,可分为水平和竖直两个方向:

android:orientation="vertical|horizontal"

参考线的位置:

app:layout_constraintGuide_begin="100dp"

app:layout_constraintGuide_end="100dp"

app:layout_constraintGuide_percent="0.5"

3. 示例

以下代码表示以ConstraintLayout宽度的中心点为参考线,tv1与参考线左对齐

...

>

android:id="@+id/guideline"

android:orientation="vertical"

app:layout_constraintGuide_percent="0.5"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

android:id="@+id/tv1"

...

app:layout_constraintLeft_toLeftOf="@id/guideline"

/>

四、Group

1. 应用场景

将某几个控件归为一组动态进行显示或隐藏控制

2. 使用方式

需要归为一组控件的ID

app:constraint_referenced_ids="tv1,tv2"

3. 示例

以下代码表示将tv1和tv2两个textview归为一组,并设置为隐藏

...

>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:visibility="gone"

app:constraint_referenced_ids="tv1,tv2"/>

android:id="@+id/tv1"

...

/>

android:id="@+id/tv2"

...

/>

五、Chain

Chain可以很容易达到其他布局管理器不容易实现,甚至无法实现的样式

1. 应用场景

某几个控件之间首位相接,排列方式有特殊要求

2. 使用方式

layout_constraintHorizontal_chainStyle="spread|spread_inside|packed"

layout_constraintVertical_chainStyle="spread|spread_inside|packed"

chainStyle取值:

spread: 控件均匀分布,即控件之间(包括边框)间距相同

spread_inside: 第一个和最后一个控件固定在链两端的约束边界上,其余控件均匀分布,即控件内部之间间距相同

packed: 控件打包在一起(在考虑外边距之后)。 然后,您可以通过更改链的头视图偏差调整整条链的偏差(左/右或上/下)。

bae856661258

chainStyle取值,值得细品再细品

3. 示例

...

>

android:id="@+id/tv1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#00897B"

android:gravity="center"

android:paddingStart="20dp"

android:paddingEnd="20dp"

android:text="1111"

android:textColor="#fff"

android:textSize="20sp"

app:layout_constraintHorizontal_chainStyle="spread_inside"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toStartOf="@id/tv2"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

android:id="@+id/tv2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#3700B3"

android:gravity="center"

android:paddingStart="20dp"

android:paddingEnd="20dp"

android:text="2222"

android:textColor="#fff"

android:textSize="20sp"

app:layout_constraintBaseline_toBaselineOf="@id/tv1"

app:layout_constraintEnd_toStartOf="@id/tv3"

app:layout_constraintStart_toEndOf="@id/tv1" />

android:id="@+id/tv3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#FB8C00"

android:gravity="center"

android:paddingStart="20dp"

android:paddingEnd="20dp"

android:text="3333"

android:textColor="#fff"

android:textSize="20sp"

app:layout_constraintBaseline_toBaselineOf="@id/tv1"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toEndOf="@id/tv2" />

综合实践

使用ConstraintLayout实现以下布局,要求:

两个textview横向并排显示,即一左一右

两个textview的宽度均根据文字内容自适应

两个textview均左对齐

右边textview内容全展示(文字内容最多不会超过单行宽度)

显示不下时左边textview内容尾部显示省略号

最终效果图

bae856661258

tv1文字较少的时候

bae856661258

tv1文字较多的时候

实现代码:

...

>

android:id="@+id/tv1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#00897B"

android:ellipsize="end"

android:gravity="center"

android:maxLines="1"

android:paddingStart="20dp"

android:paddingEnd="20dp"

android:text="AAAAA"

android:textColor="#fff"

android:textSize="20sp"

app:layout_constrainedWidth="true"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toStartOf="@id/tv2"

app:layout_constraintHorizontal_bias="0"

app:layout_constraintHorizontal_chainStyle="packed"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

android:id="@+id/tv2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#FB8C00"

android:ellipsize="end"

android:gravity="center"

android:paddingStart="20dp"

android:paddingEnd="20dp"

android:singleLine="true"

android:text="BBBB"

android:textColor="#fff"

android:textSize="20sp"

app:layout_constraintBaseline_toBaselineOf="@id/tv1"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toEndOf="@id/tv1" />

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值