ConstraintLayout自学整理与简单使用

最新推荐文章于 2024-05-11 14:53:45 发布
原创 最新推荐文章于 2024-05-11 14:53:45 发布 · 392 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android

一、简单介绍

ConstraintLayout（约束布局）是一 个ViewGroup,支持Api9以上的Android系统，主要解决的问题是 布 局 嵌 套 过 多 \color{red}{布局嵌套过多} 布局嵌套过多。开发过程中经常能遇到一些复杂的UI，可能会出现布局嵌套过多的问题，嵌套得越多，设备绘制视图所需的时间和计算功耗也就越多。

二、使用

2.1 属性介绍

2.1.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
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

上面的属性，是用于设置一个控件相对于其他控件、Barrier、Guideline或者其父容器的位置。其中 l a y o u t _ \color{red}{layout\_} layout_是固定格式，重要的信息是以下两部分：

  • constraintXXX：指定当前控件需要设置约束的属性部分。如constraintRight表示对当前控件的右边进行约束设置。
  • toXXXOf：其指定的内容是作为当前控件设置约束需要依赖的控件或父容器（可以理解为设置约束的参照物）。并通过XXX指定被依赖对象用于参考的属性。如toLeftOf="parent" ：表示当前控件相对于父容器的左边进行约束设置。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button_ro"
        android:layout_width="wrap_content"
        android:layout_height="70dp"
        android:text="Reference Object"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_A"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintRight_toLeftOf="@+id/button_ro"
        app:layout_constraintTop_toBottomOf="@id/button_ro"
        />

    <Button
        android:id="@+id/button_B"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        app:layout_constraintRight_toLeftOf="@+id/button_ro"
        app:layout_constraintBottom_toTopOf="@id/button_ro"
        />

    <Button
        android:id="@+id/button_C"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:gravity="bottom"
        android:text="C"
        app:layout_constraintLeft_toRightOf="@+id/button_ro"
        app:layout_constraintBaseline_toBaselineOf="@id/button_ro"
        />
</android.support.constraint.ConstraintLayout>

相对位置简单示例

2.1.2 角度定位

角度定位指的是可以用一个角度和一个距离来约束两个空间的中心。for example：

<TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintCircle="@+id/textView1"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="150dp" />

上面例子中的TextView2用到了3个属性：
app:layout_constraintCircle="@+id/textView1"
app:layout_constraintCircleAngle=“120”（角度）
app:layout_constraintCircleRadius=“150dp”（距离）
指的是TextView2的中心在TextView1的中心的120度，距离为150dp，效果如下：

image.png

2.1.3 边距

在ConstraintLayout中，控件除了可以设置普通的边距属性，还可以设置当控件依赖的控件GONE之后的边距属性。即我们可以理解可以根据被依赖控件是否GONE的状态，设置两种边距值。分别通过如下属性进行设置：

  • 普通属性
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
  • 被依赖控件GONE之后的边距属性goneMargin
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

简单举个例子：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <Button
        android:id="@+id/button_A"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        android:layout_marginLeft="25dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <Button
        android:id="@+id/button_B"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        app:layout_goneMarginLeft="70dp"
        app:layout_constraintLeft_toRightOf="@+id/button_A"
        app:layout_constraintBottom_toBottomOf="@id/button_A"
        />

</android.support.constraint.ConstraintLayout>

goneMargin.gif

2.1.4 居中
  • 水平居中：相对一个控件或者父容器左右对齐
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent
  • 垂直居中：相对一个控件或者父容器上下对齐
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
2.1.5 偏移

在设置控件的居中属性之后，通过偏移属性可以设置让控件更偏向于依赖控件的某一方，偏移设置为0～1之间的值。相应属性：

layout_constraintHorizontal_bias // 水平偏移
layout_constraintVertical_bias   // 垂直偏移

例子：

<Button
        android:id="@+id/button_A"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.2"
        />

image.png

2.1.6 可见性

可见性这个属性大家应该很熟悉，但是约束布局的可见性属性和其它布局相比，存在以下区别：

  • 当控件设为GONE时，被认为尺寸为0。可以理解为布局上的一个点。
  • 若GONE的控件对其它控件有约束，则约束保留并生效，但所有的边距（margin）会清零。
2.1.7比例

控件可以定义两个尺寸之间的比例，目前支持宽高比。 前提条件是至少有一个尺寸设置为0dp，然后通过layout_constraintDimentionRatio属性设置宽高比。设置方式有以下几种：

  • 直接设置一个float值，表示宽高比
  • 以” width：height”形式设置
  • 通过设置前缀W或H，指定一边相对于另一边的尺寸，如”H, 16:9”，高比宽为16:9
2.1.8链

链这个概念是约束布局新提出的，它提供了在一个维度（水平或者垂直），管理一组控件的方式。如果两个或以上控件通过下图的方式约束在一起，就可以认为是他们是一条链（图为横向的链，纵向同理）。
image.png

 <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/TextView2" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_constraintRight_toLeftOf="@+id/TextView3"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView2"
        app:layout_constraintRight_toRightOf="parent" />
  • 链头
    最 左 边 或 最 上 面 的 控 件 ， 链 的 属 性 由 链 头 控 制 \color{red}{最左边或最上面的控件，链的属性由链头控制} 最左边或最上面的控件，链的属性由链头控制
  • 设置
    通过layout_constraintHorizontal_chainStyle和layout_constraintVertical_chainStyle在链的第一个元素上设置。默认spread样式。如上所示，A作为链头，设置了 chainStyle：
app:layout_constraintHorizontal_chainStyle="spread_inside"。

几种链的样式如下图所示：
image.png

三、拓展工具

3.1 Barrier（屏障）

image.png

Barrier详解（非官方）

3.2 Guideline

Guildline像辅助线一样，在预览的时候帮助你完成布局（不会显示在界面上）。
Guildline的主要属性：
android:orientation 垂直vertical，水平horizontal
layout_constraintGuide_begin 开始位置
layout_constraintGuide_end 结束位置
layout_constraintGuide_percent 距离顶部的百分比(orientation = horizontal时则为距离左边)

<android.support.constraint.Guideline
        android:id="@+id/horizontal_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="50dp" />

    <android.support.constraint.Guideline
        android:id="@+id/vertical_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.4" />

image.png
image.png

3.3 Group

Group可以把多个控件归为一组，方便隐藏或显示一组控件，举个例子：

<TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@id/TextView2" />

image.png
现在有3个并排的TextView，用Group把TextView1和TextView3归为一组，再设置这组控件的可见性，如下所示：

 <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="TextView1,TextView3" />

效果如下：
image.png

3.4 Placeholder

Placeholder指的是占位符。在Placeholder中可使用setContent()设置另一个控件的id，使这个控件移动到占位符的位置。

 <android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@+id/right_text"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/right_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#cccccc"
        android:padding="16dp"
        android:text="right_text"
        android:textColor="#000000"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

image.png

Android学习|布局—— ConstraintLayout 约束布局
weixin_52551903的博客
02-25 1922
Android学习|布局—— ConstraintLayout 约束布局一、概述二、指导线三、推导约束：根据布局自己推导约束四、清除所有约束 一、概述 ConstraintLayout ：约束布局 。项目自己创建的就是约束布局 该布局下，基本不需要去进行编码，只需要将需要的组件 插入、调整位置即可。 如上图所示，在1的位置选择需要的组件，然后拖入2，然后在3处调整大小、位置、文本等属性，然后根据需要也可以使用3处的 “指导线”、“清除约束”、“推导约束” 几个功能 例如，如下图，创建一个button，
Android-MotionLayout动画：续写ConstraintLayout新篇章
2401_84132357的博客
04-22 547
根标签有一个属性，表示所有未指定时间的动画的默认时间，默认为300毫秒。根标签 必须包含Transition标签，可以有多个Transition标签。Transition标签是用来指定动画的开始和结束状态、任何中间状态以及触发动画的动作，可以理解为一个Transition标签对应一个动画。同时，标签可以包含标签，这是可选的。标签主要为Transition标签提供起始和结束状态的位置和属性。而标签必须包含一个或多个Constraint子标签。Constraint标签用来定义布局中某个View。
ConstraintLayout学习
u012714748的博客
08-05 188
ConstraintLayout是Android Studio 2.2中主要的新增功能之一，也是Google在2016年的I/O大会上重点宣传的一个功能。众所周知，在界面渲染时，嵌套的层级越多，效率就越慢。而在日常开发当中，有时我们需要编写非常复杂的布局，无论是用 relativelayout还是linearlayout都需要多层嵌套，因此违背了布局文件减少层级的这个初衷，而使用Constrain...
ConstraintLayout 学习
cherry459的博客
10-16 408
ConstraintLayout官网学习地址        最近发现使用ConstraintLayout这个布局方式的公司越来越多了，趁着最近比较空闲，利用空余时间来学习应用下，主要是根据官方的文档来进行分析理解~ 一、ConstraintLayout 官方文档的理解学习     ConstraintLayout allows you to create large and complex ...
ConstraintLayout学习笔记
whjk20的专栏
02-23 318
ConstraintLayout: 约束性布局， 类似于相对性布局(RelativeLayout), 但是代码更简洁。 参考了大神的介绍，学习了基本属性，自己动手写了下代码，增加记忆，Mark 一下 (大神链接:https://www.baidu.com/link?url=S0vGu-ixKTCrSmXh9AwhZE8GW0drUi85-T-qfUf9zznuaGEcJbn8zTBdqnFsz...
Android屏幕适配（使用ConstraintLayout）
2401_84003809的博客
04-04 857
【Android开发核心知识点笔记】【Android思维脑图（技能树）】【Android核心高级技术PDF文档，BAT大厂面试真题解析】【Android高级架构视频学习资源】《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！T大厂面试真题解析】**[外链图片转存中…(img-BqHbc95g-1712219445201)]【Android高级架构视频学习资源】《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取。
Android面试题高清PDF下载，精心收集整理
- Retrofit、OkHttp、Glide、RxJava、Dagger、ARouter 等主流框架的原理与使用 - 插件化框架（如 RePlugin、Atlas、VirtualAPK）的原理与实现 - 组件化开发思想与实践 - Android 中的热修复方案（如 Tinker、...
Android告别使用shape标签，自定义实现圆角、背景色、描边Button(1)
2401_84150043的博客
04-22 581
因为GradientDrawable是shape标签的具体代码实现，所以，如果我们想通过GradientDrawable来实现圆角等功能需求的话，需要把上一步骤中我们自定义的GradientDrawable来作为button的background，具体代码如下：/**可以设置背景色、指定圆角、描边的宽度和颜色*//**设置背景颜色*/@Override/**设置描边的宽度和颜色*//**设置描边颜色*//**设置四个角的半径*//**
哲♂学三幻神带你学习ConstraintLayout(约束布局)
热门推荐
Coder-Pig的猪栏
12-22 18万+
哲♂学三幻神带你学习ConstraintLayout(约束布局)标签（空格分隔）： Tutorial-AndroidConstraintLayout 是什么    ConstraintLayout(约束布局) 其实已经不算什么新东西了，很多同学应该知道 或听过这个东西。人嘛，对陌生的事物总会本能性地去排斥，很多人都觉得 RelativeLayout(相对布局)和LinearLayout(线性布局
Android 约束布局(ConstraintLayout)学习笔记
小旭的专栏
09-14 4386
ConstraintLayout 是 Android Studio 2.2 中主要的新增功能之一，也是Google在去年的I/O大会上重点宣传的一个功能。ConstraintLayout 非常适合使用可视化的方式来编写界面，但并不太适合使用 XML 的方式来进行编写。另外，ConstraintLayout还有一个优点，它可以有效地解决布局嵌套过多的问题，它有点类似于 RelativeLayout，但远 比RelativeLayout 要更强大。
ConstraintLayout学习总结
WeirdoCy的博客
07-21 548
昨天更新了Android Studio，发现 现在xml的根布局已经默认是ConstraintLayout了，后知后觉的我去学习了一下官方文档，现在这里做个记录。 ConstraintLayout继承自ViewGroup,它允许你用一种灵活的方式去控制控件的位置及大小。 下面从一下七种约束来总结： Relative Position Relative Position是在约束布局中创建布局
ConstraintLayout（约束布局）使用详解
一个IT人的技术成长历程。
10-01 9103
ConstraintLayout 是一个使用“相对定位”灵活地确定微件的位置和大小的一个布局，在 2016 年 Google I/O 中面世，它的出现是为了解决开发中过于复杂的页面层级嵌套过多的问题——层级过深会增加绘制界面需要的时间，影响用户体验，以灵活的方式定位和调整小部件。从 Android Studio 2.3起，创建layout文件就已经是默认ConstraintLayout了，但是尽管Google如此大力推这项技术，但在当时很少有人使用，近些年逐渐被大家拿起来，啊真香！（此处无图胜有图）。
你不知道的ConstraintLayout高级用法
最新发布
fxjzzyo的博客
05-11 1597
ConstraintLayout的高级用法，Chain，Guideline，Barrier，Group，Layer等。
约束布局ConstraintLayout用起来！！！
u013095264的博客
03-18 310
ConstraintLayoutt用起来相对定位角度定位边距居中和偏移尺寸约束宽高比链辅助特性1 Optimizer2 Barrier3GroupPlaceholderGuideline Google其实很早就推出了约束布局，主要是为了减少布局嵌套，优化布局性能和渲染时间，同时又有一些丰富的属性，如角度定位，那么我们很有必要了解并去使用它。 约束布局ConstraintLayout 是一个View...
ConstraintLayout简介
Charon_Chui的专栏
05-30 510
ConstraintLayout简介 ConstraintLayout从发布到现在也得有两年的时间了，但是目前在项目中却很少用到他。今天闲下来记录一下，以后可以用来解决一些布局的嵌套问题。 ConstraintLayout是RelativeLayout的升级版本，但是比RelativeLayout更加强调约束，它能让你的布局更加扁平化，一般来说一个界面一层就够了。 而且它可以直接在布局编辑...
Android ConstraintLayout
zenmela2011的专栏
08-25 3710
1.ConstraintLayout ConstraintLayout指约束布局，目的是为了解决复杂的页面层级嵌套过多的问题。使用该布局，需要引入依赖implementation ‘androidx.constraintlayout:constraintlayout:2.1.2’ 2.属性用法 ①位置约束layout_constraintXXX_toYYYOf ConstraintLayout的位置约束属性如下，属性值可以是parent或者@+id/兄弟组件的id： layout_const.
ConstraintLayout（约束布局）开发指南
Extra Lazy的博客
06-20 5041
ConstraintLayout 是一个使用“相对定位”灵活地确定组件的位置和大小的一个布局，解决开发中过于复杂的页面层级嵌套过多的问题——层级过深会增加绘制界面需要的时间。相对定位是在 ConstraintLayout 中创建布局的基本构建块之一。这些约束允许您相对于另一个控件定位给定的控件。您可以在水平和垂直轴上约束一个控件：水平轴：左、右、起点和终点 垂直轴：顶部、底部和文本基线 一般概念是将控件的给定一侧约束到任何其他控件的另一侧。例如，为了将按钮 B 定位到按钮 A 的右侧（图 1）： 这告诉系
TableLayout布局
qq_44610809的博客
06-11 670
在TableLayout布局布局中加入按钮，会占据一行，想要多按钮在同一行就需要TableRow，但是超出的部分不会换行，不会显示。 常用属性 android:collapseColumns 设置需要被隐藏的列的序号，从0开始 android:stretchColumns 设置允许被拉伸的列的列序号，从0开始 android:shrinkColumns 设置允许被收缩的列的列序号，从0开始 子控件设置属性 android:layout_column 显示在第几列(默认第0列) android:layou
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值