将视图从 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 小部件约束到指南，并在屏障的引用 id 中设置 Space 小部件的 id。）

现在用 8dp 边距将文本限制在屏障内。文本现在将随着边界浮动，该边界始终比指南和图像中较高者高 8dp。

Answer 2

把TextView绑定到Image上，简单的设置padding怎么样？图片将始终与屏幕同宽，高度取决于屏幕类型 - 但文本始终比图片高出 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>

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

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

Move view away from overlapping in ConstraintLayout (minimum constraint)

android

android-constraintlayout