将视图从 ConstraintLayout 中的重叠移开（最小约束）

Question

在某些屏幕上，文本和图像重叠。在这种情况下，我想将文本向上移动。

我使用指南将 TextView 放置在百分比位置。这是文本的首选位置。在它下面是一个带有 layout_width="match_parent" 和比例的图像。根据屏幕纵横比，图像将变得足够高以与文本重叠。在这种情况下，我希望文本向上移动。所以我想要文本和图像之间的“最小约束”为 8dp。

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

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineGoldenRatio"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.381966" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Keep me from overlapping"
        app:layout_constraintTop_toTopOf="@+id/guidelineGoldenRatio"
        app:layout_constraintBottom_toTopOf="@+id/guidelineGoldenRatio"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/ic_supercat_popular" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

您可以使用Barrier 小部件。将障碍物的方向设置为“顶部”，并将参考 ID 设置为您的图像和指南。 （如果您无法引用指南，请将 Space 小部件约束到指南，并将 Space 小部件的 id 设置在障碍的引用 id 中。）

现在将文本限制在具有8dp 边距的屏障上。文本现在将随着障碍物浮动，障碍物始终位于准则和图像中较高者上方的8dp。

Answer 2

如何将 TextView 绑定到 Image，并简单地设置填充？图片总是屏幕宽，高度取决于屏幕类型 - 但文字总是比图片高 8dp。

    <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Keep me from overlapping"
            android:paddingBottom="8dp"
            app:layout_constraintBottom_toTopOf="@+id/guidelineGoldenRatio"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:srcCompat="@drawable/ic_supercat_popular" />

Answer 3

根据 Cheticamp 的回答：

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

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineGoldenRatio"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.381966" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:barrierDirection="top"
        app:constraint_referenced_ids="imageView, guidelineGoldenRatio" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Keep me from overlapping"
        android:textSize="30dp"
        app:layout_constraintBottom_toTopOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/barrier"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:paddingTop="18dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/ic_supercat_popular" />

</androidx.constraintlayout.widget.ConstraintLayout>

注意：文本和图像之间的最小距离进入图像填充。此填充还应补偿一半的文本高度（当围绕指南垂直居中文本时）。