ConstraintLayout内的Wrap_content视图在屏幕外伸展

Question

我正在尝试使用ConstraintLayout实现一个简单的聊天气泡。这就是我想要实现的目标：

但是，wrap_content似乎无法正常使用约束。它尊重边距，但不能正确计算可用空间。这是我的布局：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/chat_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0"
        tools:background="@drawable/chat_message_bubble"
        tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum."
        android:layout_marginStart="64dp"
        android:layout_marginLeft="64dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp" />
</android.support.constraint.ConstraintLayout>

呈现如下：

我正在使用com.android.support.constraint:constraint-layout:1.0.0-beta4。

我做错了吗？这是一个错误还是一个不直观的行为？我可以使用ConstraintLayout来实现正确的行为（我知道我可以使用其他布局，我具体询问ConstrainLayout。）

Answer 1

过时：See better answer

不，你今天不能用ConstraintLayout做你想要的（1.0 beta 4）：

• wrap_content仅要求窗口小部件自行衡量，但不会限制其扩展以抵御最终约束
• match_constraints（0dp）将根据约束限制小部件的大小...但即使wrap_content更小，也会匹配它们（您的第一个示例） ），这不是你想要的。

所以现在，你对这个特殊情况运气不好： - /

现在......我们正在考虑为match_constraints添加额外的功能来处理这个确切的场景（表现为wrap_content，除非大小超过约束）。

我不能保证这个新功能会在1.0发布之前完成。

编辑：我们在1.0中添加了此功能，其属性为app:layout_constraintWidth_default="wrap"（宽度设置为0dp）。如果设置，小部件将具有与使用wrap_content相同的大小，但将受到约束的限制（即它不会超出它们的范围）

Answer 2

更新（ConstraintLayout 1.1。+）

使用宽度设置为app:layout_constrainedWidth="true"

的wrap_content

以前（已弃用）：

宽度设置为app:layout_constraintWidth_default="wrap"

的

0dp

Answer 3

是的，如Nikolas Roard给出的答案中所述，您应该添加app:layout_constraintWidth_default="wrap"并将宽度设置为0dp。要正确调整气泡，您应该为layout_constraintHorizontal_bias设置1.0。

这是最终的源代码：

<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/chat_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginStart="64dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@drawable/chat_message_bubble"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum." />

</android.support.constraint.ConstraintLayout>

结果看起来像：

Answer 4

与已经说过的其他答案一样，自ConstraintLayout 1.0以来，它可以实现这一目标，但是从最新版本（1.1.x）开始，它们已经改变了你的方式。

自ConstraintLayout 1.1发布以来，旧的app:layout_constraintWidth_default="wrap"和app:layout_constraintHeight_default="wrap"属性现已弃用。

如果您想提供wrap_content行为，但仍然强制执行视图约束，则应将其宽度和/或高度设置为wrap_content并结合app:layout_constrainedWidth=”true|false”和/或app:layout_constrainedHeight=”true|false”属性，如on the docs所述：

  

WRAP_CONTENT：强制执行约束（在1.1中添加）如果维度是   设置为WRAP_CONTENT，在1.1之前的版本中，它们将被视为a   文字维度 - 意义，约束不会限制结果   尺寸。虽然一般来说这足够（而且速度更快）   在某些情况下，您可能希望使用WRAP_CONTENT，但仍然要执行   限制结果维度的约束。在那种情况下，你可以   添加一个相应的属性：

     

应用程式：layout_constrainedWidth =”真|假”   应用程式：layout_constrainedHeight =”真|假”

至于最新版本，当我回答这个问题时，ConstraintLayout is on version 1.1.2。

Answer 5

@ nicolas-roard对app:layout_constraintWidth_default="wrap"和android:layout_width="0dp"的回答现在已弃用。

继续并使用app:layout_constrainedWidth="true"和android:layout_width="wrap_content"。

不赞成使用的原因，我不知道。但是它在ConstraintLayout的源代码中是正确的

Answer 6

我用这个

app:layout_constraintEnd_toEndOf="parent"

Answer 7

你应该替换

android:layout_width="wrap_content"

与

android:layout_width="match_parent"

从TextView中

然后相应地调整填充和边距。 我已更新您的代码，

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
    android:id="@+id/chat_message"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="10dp"
    android:layout_marginLeft="60dp"
    android:layout_marginRight="10dp"
    android:layout_marginStart="60dp"
    android:layout_marginTop="8dp"
    android:padding="16dp"
    app:layout_constraintTop_toTopOf="parent"
    tools:background="#c9c7c7"
    tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum." />

你会得到这个结果