阻止视图在ConstraintLayout中重叠 [英] Stop views from overlapping in ConstraintLayout

问题描述

我正在尝试使用ConstrainLayout构建具有三个视图的简单布局:

I am trying to build a simple layout with three views using ConstrainLayout:

当左视图中的文本很长时，我想看一下:

When the text in the left view is very long, I want to see this:

但是我得到的是-左视图向右增长太多，并隐藏了中视图.

But what I get instead is this - the left view growth too much to the right and hides middle view.

这是我的代码:

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

到目前为止我尝试过的一些事情:

Some of the things I tried so far:

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

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

I spent around 4 hours trying to make things work, but so far without success. Would really appreciate help.

推荐答案

您缺少的是app:layout_constrainedWidth="true"，它对Views实施了约束，宽度设置为wrap_content.我将使用packed样式将前两个TextView链接起来，并偏置o 0.0以使该链与父级的左侧对齐，并将其约束到右侧的第三个TextView.右侧的TextView可以在右侧的约束条件下保持独立.

What you are missing is app:layout_constrainedWidth="true" which enforces constraints for Views with width set to wrap_content. I would chain the first two TextView with packed style and bias o 0.0 to align the chain to the left of the parent and constrain it to the third TextView on the right. The TextView on the right can stay on its own with the constraint on the right.

示例(假设只有左侧的TextView会变大):

Example (assuming that only the left TextView will grow in size):

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

这篇关于阻止视图在ConstraintLayout中重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！