Android - ConstraintLayout 内的 TextView 向右无限远 - 如何使用 ImageView 固定并有省略号

Posted 2023-04-18

技术标签:

【中文标题】Android - ConstraintLayout 内的 TextView 向右无限远 - 如何使用 ImageView 固定并有省略号【英文标题】：Android - TextView inside a ConstraintLayout goes off to infinity to the right - how to pin with ImageView and have ellipsis too 【发布时间】：2021-09-20 05:53:41 【问题描述】：

我正在尝试使我的TextView 具有动态宽度，并且ImageView 固定在其末尾，位于ConstraintLayout 内部。当文本很长时，我想使用省略号并将ImageView 引脚放在它右侧的视图中。

这是我试图在视觉上实现的示例：

使用我的代码，我可以使用thisIsShortText 实现第一张图片，但是当我有长文本时，它看起来不好，如下所示：

TextView 和 ImageView 向右移动到无穷大。谁能帮我解决这个问题？这是我拥有的 XML 代码。如果你只是把它放到你的 android Studio 中，它看起来就像我的图像。谢谢：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_>

    <!-- This view does not move or change size. -->
    <View
        android:id="@+id/firstView"
        android:layout_
        android:layout_
        android:background="@android:color/holo_red_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </View>

    <!-- This view's width is dynamic and changes size based on it's text length.
     If the length of text is too long to fit, it uses an ellipsize. -->
    <TextView
        android:id="@+id/textview"
        android:layout_
        android:layout_
        android:layout_marginStart="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="thisIsVeryLongTextThatIsTooLongAndIsLong"
        android:textColor="@color/primary_text_dark"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@id/firstView"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- This view is pinned to the end of textView. -->
    <ImageView
        android:id="@+id/imageview"
        android:layout_
        android:layout_
        android:layout_marginStart="8dp"
        android:background="@android:color/holo_purple"
        android:src="@android:drawable/ic_dialog_info"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@id/textview"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- This view does not move or change size. -->
    <View
        android:id="@+id/secondView"
        android:layout_
        android:layout_
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/thirdView"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- This view does not move or change size. -->
    <View
        android:id="@+id/thirdView"
        android:layout_
        android:layout_
        android:background="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

【问题讨论】：

【参考方案1】：

您可以通过将以下内容添加到TextView 来实现：

启用宽度限制。使用水平偏移为 0 的打包链。将结束约束到右视图的开始 (imageview)

并将信息imageview 的结尾限制为secondView 的开头

因此，您需要在textview 中添加以下内容：

    app:layout_constrainedWidth="true"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintEnd_toStartOf="@id/secondView"

还有imageview：

    app:layout_constraintEnd_toStartOf="@+id/secondView"

现在整个布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_>

    <!-- This view does not move or change size. -->
    <View
        android:id="@+id/firstView"
        android:layout_
        android:layout_
        android:background="@android:color/holo_red_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </View>

    <!-- This view's width is dynamic and changes size based on it's text length.
     If the length of text is too long to fit, it uses an ellipsize. -->
    <TextView
        android:id="@+id/textview"
        android:layout_
        android:layout_
        android:layout_marginStart="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="thisIsVeryLongTextThatIsTooLongAndIsLong"
        android:textColor="@color/primary_text_dark"
        android:textSize="16sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/imageview"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toEndOf="@id/firstView"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- This view is pinned to the end of textView. -->
    <ImageView
        android:id="@+id/imageview"
        android:layout_
        android:layout_
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:background="@android:color/holo_purple"
        android:src="@android:drawable/ic_dialog_info"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/secondView"
        app:layout_constraintStart_toEndOf="@id/textview"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- This view does not move or change size. -->
    <View
        android:id="@+id/secondView"
        android:layout_
        android:layout_
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/thirdView"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- This view does not move or change size. -->
    <View
        android:id="@+id/thirdView"
        android:layout_
        android:layout_
        android:background="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

预览：

【讨论】：

很好的答案！谢谢！ layout_constrainedWidth 真的拯救了一天。它到底是做什么的？ @BlueBoy Welcome.. layout_constrainedWidth 用于当您有 wrap_content 宽度并希望在 wrap_content 与宽度约束之间存在冲突时强制执行约束.. 换句话说.. 应用 wrap_content 直到满足约束，一旦违反约束，坚持约束。查看here了解更多信息【参考方案2】：

我使用了一个垂直线性布局和另一个水平线性布局。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_
    android:layout_>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_
        android:layout_
        android:gravity="left|center">

        <View
            android:id="@+id/firstView"
            android:layout_
            android:layout_
            android:background="@android:color/holo_red_dark">

        </View>

        <TextView
            android:id="@+id/textview"
            android:layout_
            android:layout_
            android:layout_marginStart="8dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="thisIsVeryLongTextThatIsTooLongAndIsLong"
            android:textSize="16sp"
            android:layout_weight="1.0"/>

        <ImageView
            android:id="@+id/imageview"
            android:layout_
            android:layout_
            android:layout_marginStart="8dp"
            android:background="@android:color/holo_purple"
            android:src="@android:drawable/ic_dialog_info"/>
        
        <View
            android:id="@+id/secondView"
            android:layout_
            android:layout_
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:background="@android:color/holo_blue_light" />

        <!-- This view does not move or change size. -->
        <View
            android:id="@+id/thirdView"
            android:layout_
            android:layout_
            android:background="@android:color/holo_orange_dark" />

    </LinearLayout>

</LinearLayout>

【讨论】：

谢谢，但是当文本很小时，图像视图不会像我原始帖子的第一张图像那样拥抱文本视图。您的解决方案仅适用于文本很长的情况。

以上是关于Android - ConstraintLayout 内的 TextView 向右无限远 - 如何使用 ImageView 固定并有省略号的主要内容，如果未能解决你的问题，请参考以下文章

通向同一活动的两个按钮

TranslationY 动画不与 TransitionManager 一起播放

是否可以将 ConstraintLayout 放在 ScrollView 中？

Android逆向系列文章— Android基础逆向

Android 逆向Android 权限 ( Android 逆向中使用的 android.permission 权限 | Android 系统中的 Linux 用户权限 )