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设置为“中间”视图，以防止其被左视图挤压
使用准则防止左视图和/或中间视图向右扩展太远

我花了大约4个小时试图使事情正常进行，但到目前为止还没有成功。非常感谢您的帮助。

Answer 1

您缺少的是app:layout_constrainedWidth="true"，它为Views设置了宽度设置为wrap_content的约束。我将用TextView样式将前两个packed链接起来，并偏向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>

Answer 2

<TextView
    android:id="@+id/left"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="left left left left left left left left left left left left left left left left left "
    app:layout_constraintEnd_toStartOf="@+id/middle"
    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="middle"
    app:layout_constraintEnd_toStartOf="@+id/right"
    app:layout_constraintStart_toEndOf="@+id/left"
    app:layout_constraintTop_toTopOf="parent" />

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

Answer 3

您可以使用权重如下所示在文本视图之间划分水平间距

<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>

Answer 4

您需要的是障碍：

What is difference between Barrier and Guideline in Constraint Layout?

https://constraintlayout.com/basics/barriers.html

Answer 5

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

  <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％，所有这些都需要更改视图的宽度。

阻止视图在ConstraintLayout中重叠

5 个答案: