Android基础-ConstraintLayout布局

2,756 阅读3分钟

「这是我参与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 and layout_constraintHeight_min : 设置尺寸的最小值
  • layout_constraintWidth_max and layout_constraintHeight_max : 设置尺寸的最大值
  • layout_constraintWidth_percent and layout_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的位置

\