在ConstraintLayout中防止视图重叠

Question

我正在尝试使用ConstrainLayout构建一个包含三个视图的简单布局：

当左侧视图中的文本非常长时，我希望看到这个效果：

但是我得到的结果是这样的——左侧视图过度增长向右隐藏了中间视图。

这是我的代码：

<android.support.constraint.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/left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
    
    <TextView
            android:id="@+id/middle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toRightOf="@id/left"
            app:layout_constraintTop_toTopOf="parent"/>
    
    <TextView
            android:id="@+id/right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

到目前为止，我尝试过以下一些方法：

• 制作链式布局并尝试不同的样式
• 将android:minWidth设置为中间视图，以防止其被左视图挤压
• 使用Guideline来防止左视图和/或中间视图向右扩展太远

我花了约4个小时尝试让事情正常工作，但目前没有成功。真的很感激帮助。

- displayname

Answer 1

你缺少的是 app:layout_constrainedWidth="true" 这个属性，它会强制对宽度设置为wrap_content的Views执行约束。我建议将前两个TextView链接在一起，并使用packed样式和 bias o 0.0来将链与父级左侧对齐，并将其限制在右侧的第三个TextView上。右侧的TextView可以保持独立，并在右侧使用约束。

例子（假设只有左侧的TextView会变大）：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="left"
            app:layout_constrainedWidth="true"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/middle"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/middle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="middle"
            app:layout_constraintLeft_toRightOf="@id/left"
            app:layout_constraintRight_toLeftOf="@id/right"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="right"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

- Pawel Laskowski

---

太好了，这是唯一有效的答案。在其他所有答案中，视图没有环绕文本，而是伸展到填充父视图的整个宽度。 - displayname

满足我所需的精度，这就是解决方案。 - Otieno Rowland

你救了我的一天，伙计。 - Patrick Prakash

Answer 2

使用链式布局是没有问题的，只需要将你的视图宽度设置为match_constraint，这样就不会与其他视图重叠：

Original Answer翻译成：“最初的回答”

  <TextView
    android:id="@+id/left"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="this is some text"
    app:layout_constraintEnd_toStartOf="@+id/right"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/middle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="this is some text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/right"
    app:layout_constraintTop_toTopOf="@+id/right" />

<TextView
    android:id="@+id/right"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="this is some text but longgggggggggggggggggggggggggggggggggggggggggggggggggggggg"
    app:layout_constraintEnd_toStartOf="@+id/middle"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/left"
    app:layout_constraintTop_toTopOf="@+id/left" />

它将看起来像这样：

你已经走了95%的正确道路，只需要改变你的视图的宽度。

最初的回答

- Tamir Abutbul

Answer 3

你可以使用权重来将水平间距分配给下面给出的textview

<android.support.constraint.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:text="A long text to show how weights work in constraint layouts"
    android:id="@+id/one"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="#caf"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/two"
    app:layout_constraintHorizontal_weight="1"/>

<TextView
    android:text="Short text in middle"
    android:id="@+id/two"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="#fac"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/one"
    app:layout_constraintRight_toRightOf="@id/three"
    app:layout_constraintHorizontal_weight="1"/>

<TextView
    android:text="Here is the end to the right"
    android:id="@+id/three"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="#fea"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/two"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_weight="1"/>

</android.support.constraint.ConstraintLayout>

- sanoJ