【约束布局】ConstraintLayout 组件可见性 View.GONE 处理 与 Margin 属性

最新推荐文章于 2024-08-12 04:04:08 发布
最新推荐文章于 2024-08-12 04:04:08 发布
阅读量2.6k 收藏
点赞数
分类专栏： android 文章标签： android studio 约束布局 goneMargin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZyClient/article/details/122234538
版权
本文详细解释了ConstraintLayout（cons）中Margin属性的使用规则，特别是当控件gone时，如何通过goneMargin属性保持布局一致性。通过实例演示了如何在C控件不显示时，B控件保持与底部10dp间距，同时避免了marginBottom导致的间距变化。
摘要由CSDN通过智能技术生成

很久没写文章了，但是针对今天这篇文章还是值得记录下，供大家参考学习，目前布局中用ConstraintLayout（简称cons）应该很常见了，至于为什么要用这个布局，我想大家用过的都知道cons没有出现之前稍微复杂点的界面就各种嵌套，对于维护，修改也不是很方便。cons它作用就是控件与控件直接约束，不需要额外的嵌套。好了说下今天的正题：

1.首先了解下cons中的Margin属性:

cons中用Margin属性必须有个条件就是约束，比如你要设置marginStart=15dp.那么你必须有个横向约束，要设置margintop，必须要有竖向约束。不然就算你设置了值也不会生效的，当然这是约束布局的基本原则。
2.当组件设置View.GONE时，Margin属性以及goneMargin属性的作用：

这个就是今天的重点，前面讲了margin属性的设置，现在模拟一个场景假如有A，B,C三个控件，依次ABC顺序：

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>

每个都设置了10dp间隔,现在C在底部，并且距离底部有10dp，（我们假如设计图就是这么设计的），现在需要根据数据控制C是否显示，假如C不显示那么B是什么效果呐，改下布局

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"
        android:visibility="gone"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>

很明显B挨着底部了，没有10dp间距，这样跟设计图不符，这时候有朋友在想我给B设置个marginBottom=10dp不就行了，雀氏在C控件不显示情况下没有问题，C控件显示是不是间距就是20dp了？

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        android:layout_marginBottom="10dp"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"

        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>

等会，抽支烟冷静下。这时候就有了goneMargin了，顾名思义，就是在约束布局中对于控件设置了gone时该属性起效。我们先改下代码看下效果:
 

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_goneMarginBottom="10dp"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>

是不是就有了，这个属性是针对可见属性设置的，如果约束的控件不可见（C）该属性起效。

有人在想如果这时候c可见了会不会跟上面一样20dp间距，骚年别慌，看下面代码就知道了
 

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_goneMarginBottom="10dp"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>
总结:cons布局功能虽然强大，但是使用过程中还是有许多细节地方需要注意的，比如ScroolView嵌套cons，cons高度最好建议设置成match_partent（如果cons中还有rv显示不全的话也设置match_partent），此外对于goneMarin属性的其他方向间距是类似的（说明：不是说只能用goneMargin才能实现上面效果）。如果此篇文章有帮助到你，就请给个赞吧！

ZyClient
关注
专栏目录
ConstraintLayout约束布局设置Gone的注意事项
weixin_41248940的博客
09-23 970
ConstraintLayout约束布局设置Gone的注意事项
约束布局ConstraintLayout
GeofferySun的专栏
04-21 2701
国际惯例，官网参考文档是最好的学习资料： 使用 ConstraintLayout 构建自适应界面 1，背景 约束布局 ConstraintLayout 是最受欢迎的 Jetpack 库之一，其实是Android Studio 2.2中主要的新增功能之一，也是 Google 在2016年的 I/O 大会上重点宣传的一个功能。AS 已经将它作为新建页面默认布局了。经历这几年的迭代，功能已经非常的成熟，现在 2.0 正式版本也发布了，也许你已熟悉了旧版本中的功能，并开始用它来快速构建复杂的页面布局，而新版本除了包
ConstraintLayout 中对视图 GONE 可见性的处理不正确
Roy1986613的博客
03-14 408
ConstraintLayout 中对视图 GONE 可见性的处理不正确，更新依赖项版本
Android ConstraintLayout负的margin
最新发布
weixin_41698664的博客
08-12 69
实现Android ConstraintLayout负的margin：新手开发者指南 在Android开发过程中，使用ConstraintLayout可以创建相对灵活的布局。但有些初学者可能在使用ConstraintLayout时遇到关于使用负margin的问题。本文将详细解释如何在Android中实现负的margin，并...
【约束布局】ConstraintLayout 组件可见性 View.GONE 处理 与 Margin 属性 ( 约束布局可见性处理 | goneMargin 属性 )
热门推荐
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
07-25 1万+
相对定位 Margin 属性 可见性改变后的行为处理 ( Visibility Behavior ) 组件设置 GONE 属性示例 被 约束到不可见组件 后 Margin 属性 表现 goneMargin 属性示例
ConstraintLayout中设置负值的margin失效了？不妨换一种思路来实现！
bugyinyin的博客
05-05 585
在某些场景下，我们可能需要实现两个View的压盖效果，比如常见的气泡、小红点等等，如下所示：如果父布局是RelativeLayout，那么实现起来比较简单，只要给目标View设置负值margin，就能实现我们的效果；而如果父布局是ConstraintLayout，会发现设置负值margin不起作用，那么此时我们可以选择其他的方式来实现，针对这两种情况分别来实现一下。注：实现上述效果不止这两种方案，这里主要为了说明如何在ConstraintLayout中实现对应效果。
RelativeLayout view 设置 为 gone 界面错乱
Venus 的博客
10-08 525
在使用相对布局是，当我的一个参照控件处于gone状态时另外一个控件如需参照处于gone的那个控件需添加android:layout_alignWithParentIfMissing="true"
ConstraintLayout
u012123938的专栏
06-19 466
  部分转：ConstraintLayout 属性详解 和Chain的使用 Relative positioning --- 相对定位 Margins --- 间距 Centering positioning --- 中心定位 Circular positioning --- 圆形定位(这个有意思，做环形按钮应该很棒) Visibility behavior --- 可见性行为 Di...
Android中约束布局baseline,约束布局ConstraintLayout（一）
weixin_36080584的博客
05-26 2331
目录1.介绍2.为什么要用ConstraintLayout3.如何使用ConstraintLayout3.1 添加依赖3.2 相对定位3.3 角度定位3.4 边距3.5 居中和偏移3.6 尺寸约束3.7 Chains4.总结1.介绍约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式...
android 约束布局 性能,Android ConstraintLayout约束布局完全解析
weixin_39887546的博客
05-26 809
布局优化是性能优化的一个方向点，包括了根据需求应该选用哪种布局容器、ViewStub懒加载，如何减少布局层级等，今天我们要探讨的就是如何使用ConstraintLayout来优化我们的布局层级。概述.png提出问题为什么要用这个布局？怎么用这个布局？不足在哪里？优势ConstraintLayout就是为性能而生，目标就是减少布局嵌套，提高measure+layout性能，来看看官方给出的数据。性能...
android自动设置约束布局,Android ConstraintLayout约束布局
weixin_33162074的博客
05-25 1245
一、简介ConstraintLayout(约束布局)是Android Studio 2.3+创建xml的默认布局方式，它是一个viewgroup，我们把它理解成RelativeLayout的升级版，目的就是为了减少嵌套的复杂度，当界面布局过于复杂时使用，不复杂的情况可以延用之前的布局方式二、分类2.1相对定位相对定位允许我们将目标控件的给定侧约束到任何其他控件的另一侧，它允许在水平方向(left，...
ConstraintLayout中依赖的控件为GONE时，如何保持距离
蓝不蓝编程
09-06 1万+
背景： 在ConstraintLayout中，如果设置了一个控件（A）依赖于另一个控件(B)，当控件B设置为GONE时，A控件的位置就会发生变化。为了保持适当的效果，需要设置此种情况下A控件相对于父控件的距离。 解决方案： 通过如下属性设置依赖控件为GONE时相对父控件的距离： 1 layout_goneMarginStart 2 layo...
addHeaderView()异常 —— setAdapter has already been called
2401_84814425的博客
05-06 1050
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
Android ConstraintLayout约束布局学习
残风乱了温柔的博客
03-04 505
1.介绍 约束布局ConstraintLayout 是一个ViewGroup，是Android 8 新增的布局方式，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件，是借鉴IOS所支持的约束的布局。从功能上讲，约束布局相当于相对布局的改进，谷歌官方也是推荐用约束布局来代替相对布局。 ConstraintLayout 官方文档 2.为什么要用ConstraintLayout 在开发过程中经常能遇到一些复杂的UI，可能会出现布局嵌套过多的问题，嵌套得越多，设备绘制视图所需的时间和计
Android 几种布局设置Gone时注意事项
漂泊在猿海
09-06 2192
Android 几种布局设置Gone时注意事项需要实现的功能RelativeLayout相对布局设置goneLinearLayout线性布局设置GoneConstraintLayout约束布局设置Gone总结 需要实现的功能 在Android ui 中我们需要经常实现这种样式的布局，大家拿到UI设计的图稿中，第一反应会去想怎么做，怎么实现。 上图中比较常见的布局可以用 LinearLayout（线性） RelativeLayout （相对） 以及Google推荐的ConstraintLayout （约束
Android 协调者布局:ConstraintLayout margin goneMargin
丿灬安之若死
04-27 832
说到margin。很多小伙伴（其实就我自己）都吵着闹着。这个我会这个我会 但是有点要注意得点 margin只在约束得布局边生效 右边就不生效 要想生效我们可以给右边得控件添加margin 我多加了一个 app:layout_goneMarginStart="50dp" 这个属性什么意思呢？ 当附近得那个控件被隐藏掉得时候 他得作用就出现了 会多出来一个margin数值 非常得方便。 像我们普通布局遇到这种情况。其实还算挺复杂的。要用空白得view去控制显示隐藏才行
android -------- ConstraintLayout Group和goneMargin（五）
weixin_33767813的博客
10-13 167
  前面的文章 ConstraintLayout 介绍 （一） ConstraintLayout约束属性 （二） ConstraintLayout 宽高比和偏移量比（三） ConstraintLayout Guideline和Barrier（四） 此博文主要讲解： Group和goneMargin     1：Group 在开发中，有时候需要同时隐藏或者显示多个控件，用Group就可以很好的实现，...
android 控件设置Gone不起作用
Forevrehailong的博客
03-30 1829
看看是否设置了动画，去掉 动画 view.clearAnimation();
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值