android - 如何在 Android Constraint Layout 中支持 wrap_content 和 match_parent 条件以及水平位置的 3 个 View

Question

我想创建一个包含 3 个水平位置 View 的复合 View 。当我将此复合 View 的宽度设置为 WRAP_CONTENT 时，我希望所有这 3 个 View 并排放置，因为它是 WRAP_CONTENT。但是当我将宽度设置为 MATCH_PARENT 时，我希望第二个 View 占据整个屏幕空间(但第二个 View 仍然位于第一个 View 旁边)。

例子:

WRAP_CONTENT:

|view1 view2 view3 --empty-space--|

MATCH_PARENT:

|view1 view2 --empty-space-- view3|

由于某些原因，我不得不在这里使用约束布局。

我试过下面的代码。当我尝试将第二个 View 的宽度更改为 WRAP_CONTENT，并将整个约束布局设置为 MATCH_PARENT 时，第二个 View 位于中心(而我想要的是保持左侧的位置)

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:text="view1"/>

    <TextView
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/test1"
        app:layout_constraintEnd_toStartOf="@id/test3"
        android:text="view2"/>

    <TextView
        android:id="@+id/view3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="view3"/>
</androidx.constraintlayout.widget.ConstraintLayout>

谢谢。我感谢任何解决方案。

Answer 1

我不是 100% 确定我理解你想要完成的事情，但我会针对我能想象到的每种情况扩展(已经给出答案):

| V1 | V2 | V3 ...... | 你只需要用 android:layout_width="0dp" 告诉第三个 View match_constraints 它就会占据所有的其他 View (有换行)留下的空间。

这将产生与我从此处理解的相同的输出:

|view1 view2 view3 --empty-space--|

除非 -- 空格 -- 你的意思是 |V1|V2|V3| ..... | 在这种情况下，您需要约束布局 Chain 和 bias:

在最左边的 View 中，添加:

app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"

并确保所有 View 之间都有连接，例如 view1(最左边)将具有:startToStart=parent，endToStart=view2。然后 View2 将具有 startToEnd=view1、endToStart=view3 和 view3...startToEnd=view2、endToEnd=parent

你明白了。

这会将所有 View 打包到 start，最后留下空白空间。无论父级的约束(匹配/包装)如何，上述方法都有效，因为引擎无论如何都会根据可用空间定位/调整 View 大小。

现在，对于您的 MATCH_PARENT 示例:

|view1 view2 --empty-space-- view3|

(对我而言)您不清楚 --empty space-- 是什么意思，这是否意味着您希望 view2 包装其内容？还是希望 view2 使用所有可用空间并将 view3 推到最后？

我假设您的意思是所有 View 都在环绕并且有空白区域。如果您不知道确切的尺寸，那么有一个关于如何实现该目标的很好的答案(提示，您需要在中间的空格中链接)，因为引擎无法确定每个 View 将占用多少空间在计算尺寸并包装它们之前。

现在，如果您不介意 view2 占用所有剩余空间并打断链条(仅在需要时)，您可以执行正常的偏向链条，但使用默认展开条件进行包装:

所以它看起来像这样:

<?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/view1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/view2"
            app:layout_constraintTop_toTopOf="parent"
            android:text="view1"/>

    <TextView
            android:id="@+id/view2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/view1"
            app:layout_constraintEnd_toStartOf="@id/view3"
            app:layout_constraintWidth_default="spread"
            android:text="view2"/>

    <TextView
            android:id="@+id/view3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toEndOf="@id/view2"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            android:text="view3"/>

</androidx.constraintlayout.widget.ConstraintLayout>

这会产生如下内容:

| V1 | V2.............|V3|

哪个可能适合你，也可能不适合你。