Question

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

示例：

WRAP_CONTENT：

| view1 view2 view3-空空间-|

MATCH_PARENT：

| view1 view2-空空间-view3 |

由于某种原因，我必须在这里使用约束布局。

我尝试了以下代码。当我尝试将第二个视图的宽度更改为WRAP_CONTENT并将整个约束布局设置为MATCH_PARENT时，第二个视图位于中央（而我想要的是将位置保留在左侧）

<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

将您的Views放在一个水平的链中，其偏向为0，以使其向左对齐。

打包链将Views并排排列在父ConstraintLayout的中间。如果Views的宽度均未设置为0dp（匹配约束），则可以通过设置偏差来控制该组的水平位置。如果将第二个View设置为0dp，则它将占用所有剩余空间。

您可以在documentation中了解有关链的更多信息。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        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"
            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"
            android:text="view3"/>
</androidx.constraintlayout.widget.ConstraintLayout>

编辑：

我可以想到两种选择。

首先，在将父布局的宽度设置为wrap_content的同时，您还可以将第二个View的宽度设置为wrap_content。

第二个选项是在第二个和第三个Space之间添加一个View，以在将父版式设置为match_constraint时填充剩余空间，或者在将其设置为{{ 1}}。

wrap_content

Answer 2

ConstraintLayout提供了确定子视图之间的链的功能。有可用的打包，spread_inside和spread。

您可以在此处阅读有关链接的信息： https://constraintlayout.com/basics/create_chains.html

Answer 3

我不确定是否100％理解您要完成的工作，但我会针对我能想到的每种情况进行扩展（已经给出答案）：

| V1 | V2 | V3 ...... |，您只需要用match_constraints告诉第三个视图到android:layout_width="0dp"，它将占据其他视图（具有环绕视图）剩下的所有空间。

这将产生我从这里理解的相同输出：

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

除非用-- empty space --表示|V1|V2|V3| ..... |，否则需要约束布局Chain和bias：

在最左侧的视图中，添加：

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

，并确保所有视图之间都具有连接，例如view1（最左侧）将具有：startToStart = parent，endToStart = view2。然后，View2将具有startToEnd = view1，endToStart = view3和view3 ... startToEnd = view2，endToEnd = parent

您明白了。

这会将所有视图打包到start中，最后留出空白。无论父母的约束（匹配/包装）如何，上面的方法都可以工作，因为引擎无论如何都会根据可用空间来定位/调整视图的大小。

现在，以您的MATCH_PARENT示例为例：

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

（对我来说）您不清楚-空空格-是什么意思，这是否意味着您希望view2包装其内容？还是要让view2使用所有可用空间并将view3推到底？

我假设您的意思是所有视图都在换行并且有空白。如果您不知道确切尺寸，则有一个很好的答案（该提示，您需要在它们之间的空间中进行链接），因为引擎无法确定每个视图将占用多少空间在计算尺寸并包装之前。

现在，如果您不介意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|

哪种可能对您不起作用。

如何在Android约束布局中水平位置包含3个视图来支持wrap_content和match_parent条件

3 个答案: