ConstraintLayout - 中心和约束

如何解决ConstraintLayout - 中心和约束

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

如下图所示：

我希望 Box 1 和 Box 2 始终居中。
Box 2 的宽度应为 wrap_content。
Box 3 可以是 visible 或 gone。
1. 当它是 visible 时，我希望它位于 Box 2 的左侧，但在左侧受到 Box 1 的约束。
2. 当它消失时，我希望 Box 2 能够尽可能多地伸展，但仍然受到 Box 1 的约束

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

解决方法

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

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

当它消失时，我希望 Box 2 能够尽可能多地伸展，但仍受框 1 的限制（Box 3 也是如此）

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

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

框 3 当它可见时，我希望它位于框 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>

预览：

框 3 是框 1 左侧的约束

Box 3 是隐藏的，Box 2 是 Box 1 左侧的约束