Android TextView文字过长将后面View挤出屏幕解决方案

前言

需求：横排两个 TextView ，第一个 TextView 宽度自适应，第二个 TextView 宽度固定且跟随在 TextView 后面。

第二个View可为任意View，宽度需已知，需要第一个View margin出相应宽度给第二个 View。

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/x2_dp"
            android:layout_marginEnd="@dimen/x60_dp"
            android:ellipsize="end"
            android:fontFamily="sans-serif-medium"
            android:singleLine="true"
            android:textColor="@color/color_FFFFFF"
            android:textSize="@dimen/font_14sp"
            app:layout_constrainedWidth="true"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="测试测试测试测试测试测试测试测试测试测试测试测试测试测试" />

        <TextView
            android:layout_width="@dimen/x60_dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/x6_dp"
            android:fontFamily="sans-serif-medium"
            android:paddingStart="@dimen/x5_dp"
            android:paddingEnd="@dimen/x5_dp"
            android:text="@string/vip"
            android:textSize="@dimen/font_10sp"
            app:layout_constraintBottom_toBottomOf="@+id/tvName"
            app:layout_constraintStart_toEndOf="@+id/tvName"
            app:layout_constraintTop_toTopOf="@+id/tvName" />

    </androidx.constraintlayout.widget.ConstraintLayout>

关键代码：

android:layout_marginEnd="@dimen/x60_dp"

给第二个view 留出所需宽度

 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constrainedWidth="true"
 app:layout_constraintHorizontal_bias="0"

最新更新 2021.12.29

最近发现一种更好的写法，对比上面不需要预留空间给第二个view，且第二个view宽度可变

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/ui_dp10"
            android:ellipsize="end"
            android:lines="1"
            android:textColor="@color/publish_color_2B2E34"
            android:textSize="@dimen/ui_sp14"
            app:layout_constrainedWidth="true"
            app:layout_constraintEnd_toStartOf="@+id/tv_label"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tv_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/ui_dp4"
            android:paddingStart="@dimen/ui_dp2"
            android:paddingEnd="@dimen/ui_dp2"
            android:textColor="@color/cui_color_white"
            android:textSize="@dimen/ui_sp10"
            app:layout_constraintBottom_toBottomOf="@+id/tv_title"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_title"
            app:layout_constraintTop_toTopOf="@+id/tv_title" />

    </androidx.constraintlayout.widget.ConstraintLayout>

首先使用链式将两个view链接起来，设置链接模式为 packed，然后在第一个view添加属性

app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"

这样第二个view的宽度可变，也会影响第一个view的宽度。

Tp:
如有其他更好方案，欢迎告知，谢谢！