ConstraintLayout - 中心和约束

Question

我想实现以下目标，但我不确定如何实现。

如下图所示：

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

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

Answer 1

I want Box 1 and Box 2 to be centered at all times.

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

When it's gone I want Box 2 to be able to stretch as much as it needs but still constrained by Box 1 (The same for Box 3)

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

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

Box 3 When it's visible I want it to be to the left of Box 2

对Box 3使用正水平偏移（app:layout_constraintHorizontal_bias="1"），这样它的右边缘就可以偏移到Box 2

更新

I still see an issue with your suggestion. When Box 2 becomes large, it pushes Box 3 away and out of its boundaries with 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 的左侧

方框 3 隐藏且方框 2 约束在方框 1 的左侧

ConstraintLayout - 中心和约束

ConstraintLayout - center and constraint

android

constraints

android-layout

android-constraintlayout