一文看懂ConstraintLayout的用法

简介: ConstraintLayout 相对于 RelativeLayout来说性能更好,布局上也更加灵活。在最新的Google Android开发文档中是推荐使用 ConstraintLayout的,下面来看看具体用法。

ConstraintLayout 相对于 RelativeLayout来说性能更好,布局上也更加灵活。在最新的Google Android开发文档中是推荐使用 ConstraintLayout的,下面来看看具体用法。

0x00 相对位置(Relative positioning)

这个比较简单,看图解释,假设控件B要放在控件A的右侧,可以使用 layout_constraintLeft_toRightOf属性。

<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
     app:layout_constraintLeft_toRightOf="@+id/buttonA" />

看图2可以了解控件约束属性代表的含义。

类似相对位置的约束属性有:

  • 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

0x01 外边距(Margins)

这个属性也好理解,看图3

可以通过以下属性设置一个控件相对另一个控件的外边距:

  • android:layout_marginStart
  • android:layout_marginEnd
  • android:layout_marginLeft
  • android:layout_marginTop
  • android:layout_marginRight
  • android:layout_marginBottom

属性值必须是大于或者等于0。

接一下看一个 RelativeLayout 没有的属性:

0x02 Margins when connected to a GONE widget

当一个相对的控件隐藏时, ConstraintLayout也可以设置一个不同的边距:

  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

具体的栗子下面会讲到。

0x03 Centering positioning and bias

居中以及设置偏差

<android.support.constraint.ConstraintLayout ...>
	<Button android:id="@+id/button" ...
		app:layout_constraintLeft_toLeftOf="parent"
		app:layout_constraintRight_toRightOf="parent"/>                                     
</android.support.constraint.ConstraintLayout>

还可以设置bias属性,表示子控件相对父控件的位置倾向,可以使用属性:

  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias

假设设置控件A相对父控件横向偏差是30%:

<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"/>
</android.support.constraint.ConstraintLayout>

0x04 弧形定位(Circular positioning)

这个属性是在1.1版本添加的。

可以使用属性有:

  • layout_constraintCircle : 相对控件的id
  • layout_constraintCircleRadius : 相对控件中心的距离,也就是圆的半径
  • layout_constraintCircleAngle : 相对夹角 (从 0 ~ 360度)

例如,图6代码示例

<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
	app:layout_constraintCircle="@+id/buttonA"
	app:layout_constraintCircleRadius="100dp"
	app:layout_constraintCircleAngle="45" />

0x05 Visibility behavior

一般情况下,设置 GONE属性后,控件就不会出现在布局中了,B控件对A控件的margin属性也就没有作用了。

但是 ConstraintLayout 能对已经设置 GONE属性的控件进行特殊处理。当A控件设置 GONE之后,A控件相当于变成了一个点,B控件相对于对A的约束仍然是起作用的。图7的代码示例,A控件设置成了 GONE,当B控件的 margin属性还是有作用的。

<android.support.constraint.ConstraintLayout ...>
    <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button A"
        android:visibility="gone"
        app:layout_constraintLeft_toLeftOf="parent" />
	<!--当A控件设置Gone之后,B控件的margin属性是起作用的,即左边距还是30dp-->
    <Button
        android:id="@+id/buttonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="30dp"
        android:text="button B"
        app:layout_constraintLeft_toRightOf="@+id/buttonA" />
</android.support.constraint.ConstraintLayout>

  

然而有时候,B控件是不希望相对于隐藏控件的属性还起作用。这时候可以用到上面0x02提到的 goneMargin属性。

<android.support.constraint.ConstraintLayout ...>

    <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button A"
        android:visibility="gone"
        app:layout_constraintLeft_toLeftOf="parent" />
	<!--当A控件设置Gone之后,希望B控件的左边距为0dp,那么可以设置layout_goneMarginLeft属性-->
    <Button
        android:id="@+id/buttonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="30dp"
        android:text="button B"
        app:layout_goneMarginLeft="0dp"
        app:layout_constraintLeft_toRightOf="@+id/buttonA" />
</android.support.constraint.ConstraintLayout>

  

0x06 尺寸约束(Dimensions constraints)

设置最小或最大尺寸

可以使用以下属性:

  • android:minWidth
  • android:minHeight
  • android:maxWidth
  • android:maxHeight

ConstraintLayout宽高设置为 wrap_content时,以上属性可以起作用。

设置百分比布局

ConstraintLayout 子布局的宽或高设置为0dp时,可以对宽或高设置百分比,例如设置一个按钮的宽是屏幕宽度的30%,那么可以这样处理:

<android.support.constraint.ConstraintLayout ...>
    <!--按钮width属性设置为0dp,然后需要指定layout_constraintWidth_default,以及layout_constraintWidth_percent两个属性-->
    <Button
        android:id="@+id/buttonB"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="button B"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.3" />
</android.support.constraint.ConstraintLayout>

  

设置宽度百分比布局:

  1. layout_width或者 layout_height 设置为0dp
  2. 设置 layout_constraintWidth_default="percent"或者 layout_constraintHeight_default="percent"
  3. 通过 layout_constraintWidth_percent或者 layout_constraintHeight_percent指定百分比

设置宽高比例

layout_width或者 layout_height设置为0dp时,还可以通过 layout_constraintDimensionRatio设置宽高比例。该比例表示 width:height的值。

<Button 
	android:layout_width="wrap_content"
	android:layout_height="0dp"
	app:layout_constraintDimensionRatio="1:1" />

  

layout_widthlayout_height都设置为0dp时,通过 app:layout_constraintDimensionRatio 指定宽高的比例。这时控件的宽高将按照该比例相对于父布局的大小设置宽高。

<android.support.constraint.ConstraintLayout ...>
    <Button
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="h,16:9"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

h,16:9的含义是 h:w=16:9 也可设置 w,9:16效果是一样的。

0x07 Chains

在横轴或或者数轴上的控件相互约束时,可以组成一个链式约束

图9中,A控件与B控件相互约束,这就是一个简单的链式约束。

链头

Chain Style

可以通过 layout_constraintHorizontal_chainStylelayout_constraintVertical_chainStyle设置链式控件的样式。这个属性有点像 LinearLayout中的 weight 属性平分布局。

  • CHAIN_SPREAD
  • Weighted chain
  • CHAIN_SPREAD_INSIDE
  • CHAIN_PACKED

设置权重

  • layout_constraintHorizontal_weight
  • layout_constraintVertical_weight

0x08 引用

https://developer.android.com/reference/android/support/constraint/ConstraintLayout

目录
相关文章
|
存储 SQL 大数据
大数据技术之ClickHouse---入门篇---介绍
大数据技术之ClickHouse---入门篇---介绍
安装JDK18没有JRE环境的解决办法
安装JDK18没有JRE环境的解决办法
1420 141
|
10月前
|
存储 XML JSON
Activiti 7 核心数据库表概览及流程生命周期中的作用
Activiti 7 工作流引擎通过约25张核心数据库表实现流程定义、运行时状态、历史记录与身份数据的存储。表名以ACT_开头,后跟标识用途的字母组合(如RE表示Repository静态信息,RU表示Runtime动态数据)。流程启动时在运行时表登记数据,任务执行中更新关联信息,结束时清理运行时记录并完善历史记录。各表分工明确且逻辑紧密关联,确保高效运行与完整留痕的平衡。掌握这些表的作用和关联有助于深入理解Activiti底层原理及进行高级应用开发。
813 0
|
人工智能 并行计算 程序员
【AI系统】SIMD & SIMT 与芯片架构
本文深入解析了SIMD(单指令多数据)与SIMT(单指令多线程)的计算本质及其在AI芯片中的应用,特别是NVIDIA CUDA如何实现这两种计算模式。SIMD通过单指令对多个数据进行操作,提高数据并行处理能力;而SIMT则在GPU上实现了多线程并行,每个线程独立执行相同指令,增强了灵活性和性能。文章详细探讨了两者的硬件结构、编程模型及硬件执行模型的区别与联系,为理解现代AI计算架构提供了理论基础。
2815 12
|
存储 安全 Java
ConcurrentLinkedQueue详解
通过本文的介绍,希望您能够深入理解 `ConcurrentLinkedQueue`的工作原理、主要特性、常用方法以及实际应用,并在实际开发中灵活运用这些知识,编写出高效、健壮的并发程序。
379 3
|
监控 IDE 物联网
使用ESP32和OV2640进行图传
本文详细介绍了如何使用ESP32和OV2640进行图像传输。通过硬件连接、软件配置和编程实现,我们可以轻松地将摄像头捕捉的图像通过WiFi传输到浏览器中进行查看。这一技术在智能家居、安防监控等领域具有广阔的应用前景。希望这篇文章能为您提供有价值的参考。
3130 2
|
Python
python语法错误变量未定义
【7月更文挑战第9天】
807 1
包管理工具——npm实用教程 (修改下载源,安装依赖 -D -S -g ,卸载依赖等)
包管理工具——npm实用教程 (修改下载源,安装依赖 -D -S -g ,卸载依赖等)
413 0
|
存储 算法 Java
12张图一次性搞懂高性能并发容器ConcurrentLinkedQueue
12张图一次性搞懂高性能并发容器ConcurrentLinkedQueue
|
XML Android开发 数据格式
Android自定义控件(六)——文字波浪加载效果
前面介绍了贝济埃曲线,实现了波浪动画,也介绍了颜色叠加相关模式,比如其中的SRC_OUT模式实现了刮刮乐,今天将反过来以目标图像模式来是实现文字波浪加载动画效果。
459 1
Android自定义控件(六)——文字波浪加载效果