如何在约束布局上实现重叠/负边距?

2023-12-05

是否可以在约束布局上实现负边距以实现重叠? 我试图让图像以布局为中心,并有一个文本视图,使其与 x dp 重叠。我尝试设置负保证金值,但没有成功。 如果有办法实现这一点那就太好了。


Update 约束布局现在版本 2.1.0-alpha2 支持负边距。简单说明一下

android:layout_marginTop="-25dp"

负 25dp 边距。 (这仅在视图顶部受到约束时才有效。边距对约束布局如果边距一侧不受约束。)



澄清:下面的答案仍然有效,但我想澄清一些事情。原始解决方案将放置一个带有de facto相对于另一个视图的负偏移量将出现在如图所示的布局中。

另一种解决方案是使用翻译YAmir Khorsandi 建议的财产here。我更喜欢这种更简单的解决方案,但有一个警告:翻译发生布局后,因此受限于移位视图的视图将不会遵循翻译。

例如,以下 XML 显示两个文本视图紧邻图像下方。每个视图都从上到下受到紧邻其上方的视图的约束。

enter image description here

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:tint="#388E3C"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_action_droid" />

    <TextView
        android:id="@+id/sayName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Say my name."
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="@+id/imageView"
        app:layout_constraintStart_toStartOf="@+id/imageView" />

    <TextView
        android:id="@+id/sayIt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Say it."
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintEnd_toEndOf="@+id/sayName"
        app:layout_constraintStart_toStartOf="@+id/sayName"
        app:layout_constraintTop_toBottomOf="@id/sayName" />
</androidx.constraintlayout.widget.ConstraintLayout>

现在我们来翻译一下“说出我的名字”TextView up by 50dp通过指定

android:translationY="-50dp"

这会产生以下结果:

enter image description here

《说出我的名字》TextView已按预期向上移动,但“说出来”TextView并没有像我们预期的那样跟进。这是因为翻译发生了布局后。尽管视图在布局后移动,但仍然可以在新位置使其可单击。

所以,IMO,一起去吧翻译X and 翻译Y对于负边距约束布局如果上述警告不影响您的布局;否则,请与space小部件如下所述。

另一个警告:正如 Salam El-Banna 在对另一个答案的评论中所述,翻译X对于 RTL 布局来说,这不是一个好的解决方案,因为无论布局的 RTL 或 LTR 性质如何,转换的符号将决定移位的方向(左/右)。


原答案

尽管似乎不支持负边距ConstraintLayout,有一种方法可以使用可用且受支持的工具来实现该效果。这是图像标题重叠的图像22dp从图像底部 - 实际上是-22dp margin:

enter image description here

这是通过使用Space小部件的底部边距等于您想要的偏移量。这Space然后小部件的底部被限制在ImageView。现在您需要做的就是约束顶部TextView图像标题位于底部Space小部件。这TextView将位于底部Space视图忽略设置的边距。

以下是实现此效果的 XML。我会注意到我使用Space因为它很轻并且适合这种类型的使用,但我可以使用另一种类型View并使其不可见。 (不过,您可能需要进行调整。)您还可以定义一个View具有零边距和所需的插入边距的高度,并约束顶部TextView到插图的顶部View.

另一种方法是覆盖TextView在上面ImageView通过对齐顶部/底部/左/右并对边距/填充进行适当的调整。下面演示的方法的好处是无需大量计算即可创建负裕度。这就是说,有几种方法可以解决这个问题。

Update:有关此技术的快速讨论和演示,请参阅 Google Developers Medium博客文章.

负保证金ConstraintLayout XML

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher" />

    <android.support.v4.widget.Space
        android:id="@+id/marginSpacer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="22dp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintLeft_toLeftOf="@id/imageView"
        app:layout_constraintRight_toRightOf="@id/imageView" />

    <TextView
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Say my name"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/marginSpacer" />
</android.support.constraint.ConstraintLayout>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在约束布局上实现重叠/负边距? 的相关文章

随机推荐

  • 转义 T-SQL“模式”表达式字符类中的 ] 和 ^ 字符

    我正在尝试模仿 OracleRTRIM expression characters 在 MsSql Server 2008 R2 中使用以下查询 REVERSE SUBSTRING REVERSE field PATINDEX chars
  • 如何在Python中找到pow(a,b,c)的逆序?

    pow a b c python中的运算符返回 a b c 如果我的价值观是b c 以及该操作的结果 res pow a b c 我怎样才能找到值a Despite the statements in the comments this i
  • 如何使用jquery查找并检查树中的所有动态子复选框?

    我已动态地将复选框添加到所有元素 并成功添加了选择所有复选框的功能 但无法选择树结构中的父子复选框 这意味着如果我选择 亚洲 它应该选择所有 东亚 和 南亚 如果我选择东亚 它应该选择所有国家 反之亦然 var json Asia regi
  • 使用 Google Cloud Storage 从 Firebase 存储中删除文件夹

    我想删除文件夹 test 及其中的所有内容 我可以使用以下代码在终端成功删除 FirebaseStorage 中的文件夹及其所有内容 子文件夹 gsutil rm r gs bucketname appspot com test 然而 当我
  • 表格和屏幕阅读器

    我似乎无法让屏幕阅读器阅读简单的表格 我有以下 HTML table alt Account Information tr th Account Number th td 1111 1111 1111 td td nbsp nbsp td
  • 如何删除div中某个div之后的所有元素

    所以我有一个在其底部绘制动态元素的 div 我想隐藏这些元素 无论它们的 ID 使用 javaScript jQuery 是什么 基本上我的 HTML 看起来像这样 div class right panel div class info
  • Ajax:将整数数组发布到 Django

    我在用着数据表 我想让用户选择多行并删除它们 到目前为止 我已经让它工作了 所以它使用下面的代码删除了选择中的第一行 阿贾克斯代码 Add a click handler for the delete row delete click fu
  • Eclipse 中 Tomcat 上 Jersey 的基本完整配置

    我是 Jersey 的新手 正在尝试使用 Tomcat 和 eclipse 建立一个基本的 web 应用程序 我看过许多教程和示例 但它们彼此不同 或者省略了部分过程 例如使用 Spring 使用 web xml 文件 在 Tomcat 上
  • 如何使用 jQuery ajax 获取另一个页面上的 div 的 html?

    我正在使用 jQuery 的 ajax 代码来加载新页面 但希望他只获取 div 的 html 我的代码 HTML div div Script ajax url href type GET success function data co
  • 如何在 Android 中动态切换 XML 样式?

    长话短说 我有一个应用程序 我在其中直接将样式属性应用于活动和片段的 XML 文件 现在我将其重构为styles xml文件 我几乎不敢直接修改主题本身 因为我之前已经尝试过类似的东西 继承变得混乱 所以 我的作品里有好几种这样的风格sty
  • R 子集的回归

    我想对不同国家 即我的数据的子集 运行相同的回归 我确实弄清楚了如何在 R 中执行此操作 但是在 Stata 中更轻松地完成相同的操作之后 我想知道 R 中是否有更好的方法 在 Stata 中你会做这样的事情 foreach country
  • PDF 中的透明图像

    This PDF由多个源代码片段组成 其中五个是包含 Alpha 通道的 PNG 一种是没有 Alpha 通道的 PNG 最后一张是带有透明效果的 Photoshop PDF 这些部件是使用 ABCpdf 9 1 组装的 在 Acrobat
  • 在 CLX TEdit 的 KeyPress 事件中拦截 TAB 键

    我有一个 TEdit VisualCLX 组件 我想覆盖 onKeyPress 事件中 TAB 键的行为 但是如果我尝试拦截 KeyPress 事件中的 TAB 键 它将不起作用 因为当在 TEdit 上按下 Tab 键 如何拦截 TEdi
  • 无法在 centos VPS 上通过 google smtp 发送电子邮件

    我正在尝试通过 google SMTP 发送电子邮件 该代码在我本地 Windows PC 的 tomcat 中运行良好 但我在我的 centos VPS 上遇到了这个错误 org apache commons mail EmailExce
  • 当我删除指针时出现分段错误(核心转储)

    我正在尝试从链接列表中删除重复项 并遇到了一个问题 这可能是显而易见且简单的 但我没有使用过C 多年来 我无法通过阅读类似的问题来找出我做错了什么 下面是我的代码的一部分 我删除了不相关的部分 例如构造函数 其他方法等 template
  • asp.net webapi 2 post参数始终为空

    过去一个小时我一直在试图弄清楚这是我们的 但我不明白它出了什么问题 这篇文章来自我正在编写的 Xamarin 应用程序 使用 RestSharp 便携式客户端 POST http 192 168 30 103 8080 api Order
  • 类型错误:不可散列的类型:'dict',当 dict 用作​​另一个 dict 的键时 [重复]

    这个问题在这里已经有答案了 我有这段代码 for element in json referenceElement keys 当我运行该代码时 我收到此错误 类型错误 不可散列的类型 dict 该错误的原因是什么 我可以采取什么措施来修复它
  • CountIf - 如何转义特殊字符(尖括号)

    我正在尝试使用 VBA 计算 Excel 电子表格中特定单元格值出现的次数 单元格值是一个 XML 标记 函数将尖括号解释为小于 大于 如何逃脱这些字符 微软说 您可以使用通配符 问号 和星号 作为条件 问号匹配任何单个字符 星号匹配任何字
  • ui-router 默认子状态不起作用

    我正在测试UI Router嵌套状态 但我无法在父 子场景中设置默认状态 请帮助 图书馆 角度 1 3 15 用户界面路由器 0 2 15 导航路径 home settings parent state page settings defa
  • 如何在约束布局上实现重叠/负边距?

    是否可以在约束布局上实现负边距以实现重叠 我试图让图像以布局为中心 并有一个文本视图 使其与 x dp 重叠 我尝试设置负保证金值 但没有成功 如果有办法实现这一点那就太好了 Update 约束布局现在版本 2 1 0 alpha2 支持负