「这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战」
简介
Google官方推行ConstraintLayout作为默认的布局文件Root,ConstraintLayout可以有效解决可视化编写界面的问题,另外,可以解决布局嵌套过多的问题。我们平时编写界面,复杂的布局总是会伴随着多层的嵌套,嵌套越多,程序的性能也就越差。ConstraintLayout使用约束的方式指定各个控件的位置和关系,有点类似RelativeLayout,但是远比RelativeLayout要强大。
简介
View有四个方向的约束条件,只需要4个基本的属性就可以使用ContraintLayout
app:layout_constraintBottom_toBottomOf
app:layout_constraintEnd_toEndOf
app:layout_constraintStart_toStartOf
app:layout_constraintTop_toTopOf
上面的约束条件是将View约束在目标View之内,那么其实可以推理出在之外的情形
app:layout_constraintBottom_toTopOf
app:layout_constraintEnd_toStartOf
app:layout_constraintStart_toEndOf
app:layout_constraintTop_toBottomOf
其Value指定为parent或者某个View的id即可。
用法
下面详细看一下ContraintLayout的用法。
相对位置
上面已经介绍了相对位置的用法
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toRightOf="@+id/buttonA" />
基准线约束:
app:layout_constraintBaseline_toBaselineOf//默认parent
可用于使两个大小不同View保持文字对齐。
相对位置约束属性包括
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
都是通过将Value指定为parent或者某个View的id来完成约束。
<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toLeftOf="parent" />
外边距Margin
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
GONE约束
当一个控件隐藏时,可以设置一个不同的约束
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
居中和偏移
居中显示View
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
</>
偏移Bias
可以使用到如下两个属性
layout_constraintHorizontal_bias
layout_constraintVertical_bias
将View水平居中后,可设置View的bias值,使其向一个方向偏移,Value取值0~1.0,默认0.5为不偏移。
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
</>
圆形定位Circular positioning (Added in 1.1)
约束可以设置为另一个View的中心点
layout_constraintCircle : 另一个View的id
layout_constraintCircleRadius : 半径
layout_constraintCircleAngle : 角度0~360
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintCircle="@+id/buttonA"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="45" />
可见性行为
ConstraintLayout对标记为View.GONE的View有特殊的处理。
通常的,GONE的空间不会被展示,并且会从layout中移除。但是在计算布局中仍然被处理。
- 其尺寸被视为0,被解析为一个点
- 如果有有别的View使用它为约束,它仍然会被处理,而View的边距Margin会被视为0
ConstraintLayout中:
- A在GONE之后变成1个点,B对A使用的相对约束仍然起作用;
- 如果不希望A在GONE之后会保留约束,可使用gone相关的属性
尺寸约束
可以设置View的最小尺寸
android:minWidth set the minimum width for the layout
android:minHeight set the minimum height for the layout
android:maxWidth set the maximum width for the layout
android:maxHeight set the maximum height for the layout
WRAP_CONTENT
MATCH_CONSTRAINT
当尺寸设置为MATCH_CONSTRAINT时,默认行为是使生成的尺寸占据所有可用空间,可以设置多个附加的修改器:
layout_constraintWidth_min
andlayout_constraintHeight_min
: 设置尺寸的最小值layout_constraintWidth_max
andlayout_constraintHeight_max
: 设置尺寸的最大值
layout_constraintWidth_percent
andlayout_constraintHeight_percent
: 设置相对于parent的比例尺寸
百分比尺寸
- 设置MATCH_CONSTRAINT为0dp
- 设置app:layout_constraintWidth_default="percent"或app:layout_constraintHeight_default="percent"
- 设置layout_constraintWidth_percent或layout_constraintHeight_percent为0~1.0
比例约束
将layout_width或layout_height之一设置为0dp,通过layout_constraintDimensionRatio设置Ratio的值
<Button android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1" />
例子中将空间的高度设置为与宽度相同。
\
如果宽高都设置为0dp,可以基于一个属性与另一个属性的比例来设置值,通过在app:layout_constraintDimensionRatio的Value中添加w或h分别约束宽高比和高宽比。例如
<Button android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
例子将高宽比设为16:9,高度变化,宽度自适应
约束链
一系列的相互约束的View可以被组成约束链。
约束链中最前端的View称为链头
类型
CHAIN_SPREAD
-- 默认值,元素将会展开- Weighted chain -- 在
CHAIN_SPREAD
模式,如果View设置了MATCH_CONSTRAINT,他们将划分可用空间
CHAIN_SPREAD_INSIDE
-- 元素不会展开CHAIN_PACKED
--元素会打包在一起,资源度的偏移属性将影响整个包中View的位置
\