ConstraintLayout - 中心和约束

Question

我想实现以下目标，但我不知道该怎么做。

如下图所示：

1. 我希望 Box 1 和 Box 2 始终居中。
2. Box 2 的宽度应为 wrap_content。
3. Box 3 可以是 visible 或 gone。
   1. 当它是 visible 时，我希望它位于 Box 2 的左侧，但左侧受 Box 1 的约束。
   2. 当它消失时，我希望Box 2 能够根据需要伸展，但仍受Box 1 的限制

我愿意接受建议。我试图在 XML 中实现所有这些，但也许我也需要一些代码？提前谢谢大家。

Answer 1

我希望框 1 和框 2 始终居中。

您可以将 Box 1 居中到父级的左右边缘，并使 Box 2 的边缘约束到 Box 1 或也限制到父级边缘。

当它消失时，我希望 Box 2 能够根据需要伸展，但仍受框 1 的限制（Box 3 也是如此）

然后使用app:layout_constrainedWidth="true"启用Box 2和Box 3的宽度限制，因此它们不能超过Box1的限制。

然后在 Box 2 和 3 之间添加法线边缘约束。

Box 3 当它可见时，我希望它位于 Box 2 的左侧

使用正向水平偏置 (app:layout_constraintHorizontal_bias="1") 到 Box 3，以便其右边缘可以偏置到 Box 2

更新

我仍然认为您的建议存在问题。当 Box 2 变大时，它会将 Box 3 推开并离开 Box 1 的边界

您可以将app:layout_constraintWidth_min="wrap"添加到Box 3

<?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="match_parent">

    <TextView
        android:id="@+id/box1"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:layout_marginTop="100dp"
        android:layout_marginBottom="20dp"
        android:background="#FFF2CC"
        android:gravity="center"
        android:text="Box1"
        android:textSize="22dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/box2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:background="#D5E8D4"
        android:padding="10dp"
        android:text="Box2"
        app:layout_constraintEnd_toEndOf="@id/box1"
        app:layout_constraintStart_toStartOf="@id/box1"
        app:layout_constraintTop_toBottomOf="@+id/box1" />

    <TextView
        android:id="@+id/box3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:background="#F8CECC"
        android:padding="10dp"
        android:text="Box3"
        android:visibility="visible"
        app:layout_constrainedWidth="true"
        app:layout_constraintBaseline_toBaselineOf="@+id/box2"
        app:layout_constraintEnd_toStartOf="@+id/box2"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintStart_toStartOf="@id/box1"
        app:layout_constraintTop_toBottomOf="@+id/box1" />


</androidx.constraintlayout.widget.ConstraintLayout>

预览：

Box 3 是 Box 1 左侧的约束

框 3 被隐藏，框 2 被限制在框 1 的左侧