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

更新（ConstraintLayout 1.1.+）

将app:layout_constrainedWidth="true" 与android:layout_width="wrap_content" 一起使用

以前（已弃用）：

app:layout_constraintWidth_default="wrap" 与 android:layout_width="0dp"

Answer 2

已过时：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 相同的大小，但会受到约束的限制（即它不会扩展超出它们）

更新 现在这些标签已被弃用，而是使用 layout_width="WRAP_CONTENT" 和 layout_constrainedWidth="true"。

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 之前的版本中，它们将被视为 字面维度——意思是，约束不会限制结果 方面。虽然总的来说这已经足够（而且更快），但在某些情况下 在这种情况下，您可能想使用 WRAP_CONTENT，但继续执行 限制结果维度的约束。在这种情况下，您可以 添加相应的属性之一：

app:layout_constrainedWidth=”true|false” app:layout_constrainedHeight=”true|false”

至于最新版本，当我回答这个问题时，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." />

你会得到这个结果