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

2023-07-31  本文已影响0人  雨田Android开发

前言
需求:横排两个 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"

发现一种更好的写法,对比上面不需要预留空间给第二个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"
上一篇 下一篇

猜你喜欢

热点阅读