如何在Constraint Layout上实现重叠/负边距？

Question

是否有可能在约束布局上实现负边距以实现重叠？我试图让一个图像以布局为中心,并有一个文本视图,使其重叠x x dp.我尝试设置负保证金值,但没有运气.如果有办法实现这一目标会很棒.

Answer 1

虽然看起来不支持负边距50dp,但有一种方法可以使用可用和支持的工具来实现效果.这是一个图像,其中图像标题ConstraintLayout从图像的底部重叠- 实际上是一个22dp边距:

这是通过使用-22dp底部边距等于您想要的偏移量的小部件来完成的.然后Space小部件的底部被限制在底部Space.现在,您需要做的就是ImageView将图像标题的顶部约束到TextView窗口小部件的底部.的Space将被定位在底部的TextView忽略所设定的余量视图.

以下是实现此效果的XML.我会注意到我使用Space它是因为它是轻量级的并且用于这种类型的使用,但我可以使用另一种类型Space并使其不可见.(但您可能需要进行调整.)您还可以定义View零边距和所需插入边距的高度,并将顶部限制View在插图的顶部TextView.

另一种方法是通过对齐顶部/底部/左侧/右侧来覆盖View顶部,并对TextView边缘/填充进行适当的调整.下面演示的方法的好处是可以在没有大量计算的情况下创建负余量.这就是说有几种方法可以解决这个问题.

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

ImageViewXML的负边距

<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>

Answer 2

另一种方法是使用translationX或translationY像这样:

  <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:translationX="25dp"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>

它会像 android:layout_marginRight="-25dp"

Answer 3

RelativeLayout从未正式支持负边距.ConstraintLayout不支持负边距.[...]

- 2016年6月8日的Romain Guy

请遵循以下两个问题:

https://code.google.com/p/android/issues/detail?id=212499 https://code.google.com/p/android/issues/detail?id=234866

Answer 4

我找到了一种更简单的方法.

基本上有ImageView,然后在文本视图上添加顶部约束以匹配图像的顶部约束,只需添加TextView的边缘顶部以匹配以实现-ve边距类型行为.

Answer 5

这是我在数小时试图找到解决方案后想出来的.

让我们考虑两个图像,image1和image2.Image2将放置在位于右下侧的image1的顶部.

重叠视图示例

我们可以使用Space小部件来重叠视图.

使用image1的四个边分别约束Space小部件的四个边.对于此示例,使用Space小部件的右侧约束image2的左侧,使用Space小部件的底部约束image2的顶部.这将使image2与Space小部件绑定,并且由于Space小部件受到所有边的约束,我们可以定义所需的水平或垂直偏移,这将根据需要移动image2.

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Player">
 <ImageView
     android:id="@+id/image1"
     android:layout_width="250dp"
     android:layout_height="167dp"
     android:src="@android:color/holo_green_dark"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />
 <Space
     android:id="@+id/space"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     app:layout_constraintBottom_toBottomOf="@+id/image1"
     app:layout_constraintEnd_toEndOf="@+id/image1"
     app:layout_constraintHorizontal_bias="0.82"
     app:layout_constraintStart_toStartOf="@+id/image1"
     app:layout_constraintTop_toTopOf="@+id/image1"
     app:layout_constraintVertical_bias="0.62" />
 <ImageView
     android:id="@+id/image2"
     android:layout_width="82dp"
     android:layout_height="108dp"
     android:src="@android:color/holo_green_light"
     app:layout_constraintStart_toEndOf="@+id/space"
     app:layout_constraintTop_toBottomOf="@+id/space" />
 </android.support.constraint.ConstraintLayout>

另外,为了将image2定位在image1的中心底部,我们可以分别使用Space小部件的左侧和右侧约束image2的左侧和右侧.类似地,我们可以通过使用Space小部件更改image2的约束来将image2放置在任何位置.