ConstraintLayout 中的 Wrap _ content 视图延伸到屏幕之外

我正在尝试使用 ConstraintLayout实现一个简单的聊天泡泡，这是我正在努力实现的:

enter image description here enter image description here

然而，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>

结果如下:

enter image description here

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

我做错什么了吗？这是一个错误还是只是一个不直观的行为？我可以使用 ConstraintLayout实现适当的行为(我知道我可以使用其他布局，我特别询问关于 ConstrainLayout)。

85203 次浏览
小开
最佳答案

过时: 看看更好的答案

不，你不能像现在这样使用 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)。如果设置了，小部件的大小将与使用 wrash _ content 的大小相同，但是会受到约束的限制(也就是说，它不会超出约束的范围)

更新 现在不推荐使用这些标记，而是使用 layowidth = “ WRAP _ CONTENT”和 layostrainedWidth = “ true”。

小开

是的，正如在 尼古拉斯 · 罗德给出的答案中提到的，你应该添加 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>

因此，它看起来像:

enter image description here

小开

你应该把

android:layout_width="wrap_content"

和

android:layout_width="match_parent"

然后相应地调整空白和边距。 我更新了你的代码,

<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." />

你会得到这个结果的 enter image description here

小开

更新(ConstraintLayout1.1. +)

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

前情提要:

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

小开

我用这个

app:layout_constraintEnd_toEndOf="parent"
小开

正如其他答案所说，自从 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”属性，如所述 在文件上:

WRAP _ CONTENT: 强制约束 (在1.1中增补) 设置为 WRAP _ CONTENT，在1.1之前的版本中，它们将被视为 字面维度——意思是，约束不会限制结果 虽然一般来说这是足够的(和更快的) ，在一些 在某些情况下，您可能希望使用 WRAP _ CONTENT，但同时继续执行 约束来限制结果维度。在这种情况下，您可以 添加相应的属性之一:

App: layout _ constrainedWidth =”true | false” App: layout _ constrainedHeight =”true | false”

至于最新的版本，当我回答这个问题的时候，ConstraintLayout 的版本是1.1.2。

小开

Deprecation of app:layout_constraintWidth_default text and its alternative

@ nicolas-roard 的 app:layout_constraintWidth_default="wrap"和 android:layout_width="0dp"的答案现在是 不赞成。

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

废弃的原因，我不知道。但它的权利在源代码的约束布局


提交答案