关于android：如何防止ConstraintLayout链中的TextView在使用layout_constrainedWidth时将其他TextView推超出其约束？


How can I prevent a TextView in a ConstraintLayout Chain from pushing other TextViews beyond their constraints while using layout_constrainedWidth?

我的最终目标是在左对齐的水平包装链中有两个单行TextView，使它们都可以增长以填充剩余的空间，并在必要时将其均匀分割，在没有空间时将其椭圆化。

视觉辅助：
enter image description here

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?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，直到不再可见为止。

视觉辅助(实际行为)：

enter image description here

我尝试在每个视图上使用诸如将layout_constraintHorizontal_weight设置为.5的方法，但是除非将两个视图的宽度都更改为0dp(match_constraints)，否则这没有任何效果，这打破了两个视图都使用短文本的情况(它在两个文本视图)。

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

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?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>

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

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

并将组件的开头和结尾彼此连接：

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

完成的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
  <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>

enter image description here