ConstraintLayout使用详解

最新推荐文章于 2024-05-10 13:13:32 发布
最新推荐文章于 2024-05-10 13:13:32 发布
阅读量486 收藏
点赞数
分类专栏： android 文章标签： ConstraintLayout 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hana_one/article/details/89111082
版权

文章目录

为什么要用？

https://juejin.im/entry/59b63f26f265da064d345791

ConstraintLayout基本使用

Relative positioning

约束 ：view 在垂直方向 ，或在水平方向，相对于其他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
示例 ：
<View
        android:id="@+id/test"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

Centering and Margins

Margins(偏移)

在有约束的情况下才能有效果
效果：
在这里插入图片描述
示例 ：

<View
        android:id="@+id/test"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>


<View
        android:id="@+id/test1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintLeft_toRightOf="@+id/test"
        android:layout_marginStart="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
margin with gone

当与之相关联的view状态为GONE时如果需要可以使用一下属性设置margin

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

效果 ：

在这里插入图片描述

居中

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

在这里插入图片描述

垂直居中类似

偏移占比 (Bias)

调整view 位置，不仅可以使用居中，margin 等，还可以使用百分比：

layout_constraintHorizontal_bias  
layout_constraintVertical_bias

上面两个属性取值范围 [0,1] 0 : 最左 或 最上 ， 1：最右 或 最下

偷个例子：

 <Button android:id="@+id/button" ...
         app:layout_constraintHorizontal_bias="0.3"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent/>

在这里插入图片描述

Chains

Creating a chain

<View
        android:id="@+id/test"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/test1"
        app:layout_constraintBottom_toBottomOf="parent"/>


<View
        android:id="@+id/test1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintLeft_toRightOf="@+id/test"
        android:layout_marginStart="10dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

类似效果：
在这里插入图片描述

Chain Style

在链的第一个元素上设置属性layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle时，链的行为将根据指定的样式更改（默认为spread）
spread : 所有元素分布开
packed ：所有元素在一起
spread_inside : （同spread ）首尾元素除外

在这里插入图片描述

Chain heads

Chain heads 指chain中水平最左，垂直最上的view

Chain margin

上面可以看出，chain 中的左中右的间距都是相同的（平分剩下的空间），当chain 中的view 设置margin 的时候会把除去margin 后剩余空间平分分配 。
效果：

在这里插入图片描述

weightd chain

链的默认行为是在可用空间中平均分布元素。如果一个或多个元素使用MATCH_CONSTRAINT，它们将使用可用的空白空间（在它们之间平均分配）。layout_constraintHorizontal_weight和layout_constraintVertical_weight属性将控制如何使用MATCH_CONSTRAINT在元素之间分配空间。例如，在使用MATCH_CONSTRAINT的包含两个元素的链上，第一个元素使用权重2，第二个元素使用权重1，第一个元素占用的空间将是第二个元素占用的空间的两倍。

例如

<View
        android:id="@+id/button1"
        android:layout_width="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button2"
        app:layout_constraintLeft_toLeftOf="parent"
        android:background="@color/colorPrimary"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_height="100dp"/>

<View
        android:id="@+id/button2"
        android:layout_width="0dp"
        app:layout_constraintLeft_toRightOf="@+id/button1"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@color/colorAccent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_height="100dp"/>

Circular positioning (Added in 1.1)

您可以以角度和距离约束控件中心相对于另一个控件的中心。这使你可以将控件放在圆上。
可以使用以下属性：

layout_constraintCircle : 另一个控件的ID  
layout_constraintCircleRadius : 相对另一控件中心的距离
layout_constraintCircleAngle : 位于另一控件的角度位置

示例

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

在这里插入图片描述
Note: 0度角为正上方，向右为增大方向，如果设置为负数 （-90 会按照绝对值来计算）

Dimensions constraints（尺寸限制）

ConstraintLayout 自身的尺寸约束

最大最小宽高设置

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

设置方式类似其他布局 只有在其尺寸设置为WRAP_CONTENT作用

控件的尺寸约束

固定尺寸 （123dp）
  • WRAP_CONTENT
  • 0dp(MATCH_CONSTRAINT) 相当于MATCH_PARENT

**Note **：不建议对ConstraintLayout中包含的小部件使用MATCH_PARENT。可以通过使用MATCH_CONSTRAINT来定义类似的行为，其中相应的左/右或上/下约束被设置为"parent"。 ** (即 ：约束边作为其大小) **

WRAP_CONTENT

enforcing constraints（强制约束）

一般情况下使用WRAP_CONTENT ，表示在可用剩余空间下任意大小
如果想要在使用WRAP_CONTENT的时候限制一个大小范围使用一下方式：

app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”

再配合最大最小的最大最小宽度去设置：

layout_constraintWidth_min 
layout_constraintHeight_min  
layout_constraintWidth_max
layout_constraintHeight_max
MATCH_CONSTRAINT

Percent dimension（百分比尺寸设置）

要使用百分比，您需要设置以下内容：

  • 尺寸应设置为MATCH_CONSTRAINT（0dp）
  • 默认值应设置为app app：layout_constraintWidth_default =“percent”或app：layout_constraintHeight_default =“percent”
  • 然后将layout_constraintWidth_percent或layout_constraintHeight_percent属性设置为0到1之间的值

比率 Ratio

可以将控件的一个维度定义为另一个维度的比率。
需要将至少一个约束维度设置为0dp（即MATCH_CONSTRAINT），并将属性layout_constraintDimensionRatio设置为给定比率。
例如 ：

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

另一种表示方式：

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

浮点值，表示宽度和高度之间的比率

如果两个尺寸都设置为MATCH_CONSTRAINT（0dp），也可以使用比率。
在这种情况下，系统设置最大尺寸以满足所有约束并保持指定的纵横比。要根据另一个的尺寸约束一个特定边，可以预先附加W，“或H，分别约束宽度或高度。

例如，如果一个维度受两个目标约束（例如，宽度为0dp并且以父对象为中心）你可以通过在比率前添加字母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"/>

Virtual Helper objects

GuildeLine

作用：辅助布局

设置guildeLine 方向

**通过 orientation的属性设置水平或者垂直 **
水平guildeLine 高度为0 宽度为parent
垂直guildeLine 宽度为0 高度为 parent
eg:

<android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        android:orientation="horizontal"/>
确定guildeLine 位置

三种方式：

  • layout_constraintGuide_begin
  • layout_constraintGuide_end
  • layout_constraintGuide_percent [0,1]

Barrier

屏障

使用场景

参考博客

Placeholder

顾名思义：就是占位图

使用示例
<android.support.constraint.Placeholder
    android:id="@+id/imageHolder"
    android:layout_width="100dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_height="100dp"/>

<ImageView
    android:id="@+id/image"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_width="100dp"
    android:src="@mipmap/ic_launcher"
    android:layout_height="100dp"/>

image.setOnClickListener { 
    imageHolder.setContentId(R.id.image)
}

Group

作用：主要用来控制一组控件的可见性。

示例
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
            android:id="@+id/buttonA"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_width="wrap_content"
            android:text="buttonA"
            android:layout_height="wrap_content"/>

    <Button
            android:id="@+id/buttonB"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_width="wrap_content"
            android:text="buttonB"
            android:layout_height="wrap_content"/>


    <android.support.constraint.Group
            android:id="@+id/group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="visible"
            app:constraint_referenced_ids="buttonA,buttonB"/>

</android.support.constraint.ConstraintLayout>

Group 的可见性对应着与其关联的几个控件，方便的显示隐藏多个控件。

注意：ConstraintLayout可用作支持库，可以在API级别9（Gingerbread）的Android系统上使用

Hana_one
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ConstraintLayout使用详解与实战
06-13
《ConstraintLayout使用详解与实战》课程是针对Android开发者设计的一门深入探讨ConstraintLayout布局的教程。这门课程旨在帮助开发者掌握这一强大而灵活的布局工具，提升应用界面的设计效率和用户体验。 首先，...
【Android】在使用约束布局（ConstraintLayout）中，当某个子View发生隐藏后，某个View无法正确显示了
ganshenml的专栏
11-14 722
这是因为ConstraintLayout布局中的约束是相互关联的，一个View的位置和大小通常依赖于其他View的约束条件。当一个View隐藏后，它所依赖的约束条件就不存在了，因此与该View相关的其他View的位置和大小可能会受到影响，从而导致显示异常。而你通过“显示布局边界”发现，TextView的边界根本就没有，由此可以判定TextView 是Gone掉了。在ConstraintLayout布局中，如果某个View约束于另外一个View，当后者View隐藏时，前者的View可能不会正常显示。
ConstraintLayout布局
weixin_55355282的博客
04-20 2336
在API9以上的Android操作系统中使用，主要是为了解决布局嵌套过多的问题而出现，以灵活的方式定位调整小部件。 从Android2.3起，官方模板默认使用约束布局 constraintLayout和RelaiveLaout类似，采用相对定位的布局模式。 约束布局灵活性更高，且可以按照比例约束空间位置和尺寸，能更好适应屏幕大小不同的机型 基线定位 文本基线，文本对齐 两个textview空间高度不一致希望文本对齐可以使用基线定位 角度定位 边距定位 在ConstraintL..
ConstraintLayout . Group、Barrier 的坑
qq_34224268的博客
07-23 6254
Group 用于控制一群View的显示与隐藏。 1、使用多个 Group 时，尽量不要将某个View重复的放在 多个 Group 中，实测可能会导致隐藏失效 2、当 一个 View 被放到 Group 控制显隐状态时，若 Group 的状态是显示，则是没法在代码中隐藏这个 View 的（设置了GONE后能立即get到GONE，但下次get到的仍是VISIBLE，猜测是ConstraintLa...
Android ConstraintLayout 详解及示例
klylove的博客
12-16 1万+
前言 ConstraintLayout 可让您使用扁平视图层次结构（无嵌套视图组）创建复杂的大型布局。它与 RelativeLayout 相似，其中所有的视图均根据同级视图与父布局之间的关系进行布局，但其灵活性要高于 RelativeLayout，并且更易于与 Android Studio 的布局编辑器配合使用。 ConstraintLayout 的所有功能均可直接通过布局编辑器的可视化工具来使用，因为布局 API 和布局编辑器是专为彼此构建的。 因此，您完全可以使用 ConstraintLayout 通过
Android Constraintlayout Group设置显示或隐藏无效的解决办法
adolph_lu的博客
10-24 9683
Constraintlayout Group简介 在开发中，有时候需要同时隐藏或者显示多个控件，用Group就可以很好的实现，是一个辅助类，不会绘制到屏幕上，也不会展现给用户。 通过属性app:constraint_referenced_ids将一些 View 组成组进行集体操作，最常见的操作是setVisibility <!--计数Group--> &lt...
android,demo,Android ConstraintLayout 使用详解
05-28
**Android ConstraintLayout 使用详解** 在Android开发中，`ConstraintLayout`是Google推出的一种布局管理器，旨在简化复杂的界面设计，并提高布局性能。本教程将深入探讨`ConstraintLayout`的使用，包括其主要特点...
Android利用ConstraintLayout实现漂亮的动画详解
08-30
【Android ConstraintLayout 实现动画详解】 在Android开发中，界面设计和交互的美观性成为了吸引用户的重要因素。自从Android Studio 2.2引入了ConstraintLayout，开发者们在创建复杂的布局时有了更多的灵活性。...
详解Android ConstraintLayout 约束布局的用法
08-28
Android ConstraintLayout 约束布局的用法详解 ConstraintLayout 是 Google 于 2016 年发布的新布局方案，旨在解决传统 Android 开发中界面编写的不便捷问题。 ConstraintLayout 的出现，解决了布局嵌套过多的问题...
Android ConstraintLayout的使用
12-22
**Android ConstraintLayout详解** 在Android应用开发中，布局管理器起着至关重要的作用，它们决定了UI元素在屏幕上的排列方式。`ConstraintLayout`是Google推出的一种先进的布局工具，旨在简化复杂的用户界面设计...
Android ConstraintLayout布局
假装你是大灰狼的专栏
01-02 2590
前言 ConstraintLayout约束布局, 与RelativeLayout有点类似。需要添加依赖 dependencies { ... ... implementation 'com.android.support.constraint:constraint-layout:1.1.3' } 1. 相对位置 主要属性如下， layout_constraintLeft_to...
【约束布局】ConstraintLayout 组件可见性 View.GONE 处理 与 Margin 属性 ( 约束布局可见性处理 | goneMargin 属性 )
热门推荐
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
07-25 1万+
相对定位 Margin 属性 可见性改变后的行为处理 ( Visibility Behavior ) 组件设置 GONE 属性示例 被 约束到不可见组件 后 Margin 属性 表现 goneMargin 属性示例
ConstraintLayout约束布局设置Gone的注意事项
weixin_41248940的博客
09-23 917
ConstraintLayout约束布局设置Gone的注意事项
CSS 超出部分显示省略号
最新发布
qinglp的博客
05-10 352
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Android studio 约束布局嵌套 - ＞ 点击按钮 - ＞ 隐藏布局
桃子不出的博客
07-26 4936
隐藏其实就是Visibility的可见性
ConstraintLayout不常用的属性
mChenys的博客
01-10 1887
Chains 链使我们能够对一组在水平或竖直方向互相关联的控件的属性进行统一管理。 成为链条的条件： 一组控件之间通过一个双向的约束关系链接起来，并且链的属性由一条链的头结点控制,如下图所示: 布局如下: &amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt; &amp;lt;android.support.constraint.Constrain
Android开发之约束布局平均分布|ConstraintLayout平均分布|约束布局均匀分布|ConstraintLayout均匀分布
xiayiye5的博客
05-27 7679
老路子先看效果图 1.先画7个小球会全部重叠在一起 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" andro.
ConstraintLayout
Arieslllll的博客
05-08 429
文章目录什么是ConstraintLayoutConstraintLayout的使用定位方式辅助方式其他 什么是ConstraintLayout 1.约束布局，为子view添加约束来确定位置 2.这种布局可以减少嵌套，来减少过度绘制，从而优化布局 3.优点：减少嵌套，优化布局；可以直接拖拽方式布局 缺点：修改时容易错乱；代码可读性差 ConstraintLayout的使用 定位方式 1.相对定位：两个空间之间拖拽可实现 2.角度定位：layout_constraintCircle;layout_constr
Android ConstraintLayout
07-30
- *1* *2* [Android ConstraintLayout 详解及示例](https://blog.csdn.net/klylove/article/details/121967701)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值