android - 在使用 layout_constrainedWidth 时，如何防止 ConstraintLayout 链中的 TextView 将其他 TextView 推到其约束之外？

Question

我的最终目标是在左对齐、打包的水平链中拥有两个单行 TextView，允许它们都增长以填充剩余空间，如有必要，将其均匀分割，在没有空间时省略。

视觉辅助：

这是我尝试完成的布局代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        tools:text="@tools:sample/lorem"
        app:layout_constrainedWidth="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/textView2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:ellipsize="end"
        android:maxLines="1"
        tools:text="@tools:sample/lorem"
        app:layout_constrainedWidth="true"
        app:layout_constraintStart_toEndOf="@id/textView1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

如您所见，我在水平链中布置了两个文本视图。我已经将链条样式设置为打包，以便它们保持在一起。我已将水平偏差设置为 0，以便链左对齐。我将宽度设置为 wrap_content 以便它们在文本很短时不会拉伸，并且我还进行了设置app:layout_constrainedWidth="true"，以便它们在文本很长时不会超出其范围。这几乎完全符合我的要求，除了当 textView2 中的文本增长时。随着 textView1 的增长，它会将 textView2 向右推，直到达到其约束，此时它会椭圆化（如预期/期望的那样），但对于 textview2，情况并非如此。随着 textView2 的增长，它会拉伸以填充其右侧的房间，但一旦它达到其约束，而不是椭圆化，它会继续拉伸并开始将 textView1 推向左侧，直到它不再可见。

视觉辅助（实际行为）：

我尝试layout_constraintHorizontal_weight在每个视图上使用设置为 0.5 之类的东西，但除非我将两个视图宽度都更改为 0dp（match_constraints），否则这没有效果，这打破了两个视图都有短文本的情况（它在两个文本之间增加了额外的空间意见）。

感觉是当你与 结合width=wrap_content时layout_constrainedWidth=true，权重值被忽略了。这只是 ConstraintLayout 的限制吗？我花了很多时间试图找出一种方法来完成这项工作，但现在似乎不可能。我已经退回到使用 LinearLayout 并做出一些设计妥协，但如果有人有任何想法，我真的很想让它工作。谢谢！

Answer 1

如果有人仍在寻找答案，我认为以下代码会有所帮助。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/text1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintWidth_max="wrap"
        app:layout_constraintWidth_percent="0.5"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/text2"
        app:layout_constraintHorizontal_chainStyle="packed"
        android:background="#ff0000"
        android:text="This is what you are looking for ?"
        />

    <TextView
        android:id="@+id/text2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintWidth_max="wrap"
        app:layout_constraintWidth_percent="1"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/text1"
        app:layout_constraintEnd_toEndOf="parent"
        android:background="#ee0"
        android:text="This is a Long Text TextView2 And not something else"
        />

</android.support.constraint.ConstraintLayout>

Answer 2

我需要在另一个答案中进行修复。

并执行以下操作。

            <TextView
                android:id="@+id/first_tv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="1"
                app:layout_constraintHorizontal_bias="0" <!-- if you want gravity left -->
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/second_tv"
                app:layout_constraintHorizontal_chainStyle="packed"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintWidth_default="wrap"
                tools:text="ABCDEFGHIJKLMNOPQRSTU" />

            <TextView
                android:id="@+id/second_tv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:ellipsize="end"
                android:maxLines="1"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/first_tv"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintWidth_default="wrap"
                tools:text="VWXYZ" />

Answer 3

在 ConstraninLayout 中，如果要设置权重，例如 linearLayout 的权重，则应在 (layout_constraintWidth_percent) 中设置 0..1 之间的值：

 app:layout_constraintWidth_percent="1"
 or
 app:layout_constraintWidth_percent="0.5"

并将组件的开头和结尾相互连接：

 app:layout_constraintStart_toEndOf="@id/textView1"
 app:layout_constraintEnd_toStartOf="@id/textView2"

完成代码：

  <androidx.constraintlayout.widget.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/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/textView2"
        app:layout_constraintWidth_percent="0.5"
        android:background="@color/yellow_light"
        android:text="This is a long text that showing in textview1.This textview is a expanded textview.if you don't set (android:maxLines='1'),the whole text will be show." />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/textView1"
        app:layout_constraintWidth_percent="1"
        android:background="@color/orange_dark"
        android:maxLines="1"
        android:text="This is a long text that showing in textview2 that set (android:maxLines='1')" />

</androidx.constraintlayout.widget.ConstraintLayout>