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
我正在尝试让我的 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_width="match_parent"
android:layout_height="70dp">
<!-- This view does not move or change size. -->
<View
android:id="@+id/firstView"
android:layout_width="35dp"
android:layout_height="35dp"
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_width="wrap_content"
android:layout_height="wrap_content"
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_width="20dp"
android:layout_height="20dp"
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_width="80dp"
android:layout_height="35dp"
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_width="35dp"
android:layout_height="35dp"
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>
我使用了一个垂直 LinearLayout 和另一个水平 LinearLayout。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center">
<View
android:id="@+id/firstView"
android:layout_width="35dp"
android:layout_height="35dp"
android:background="@android:color/holo_red_dark">
</View>
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="8dp"
android:background="@android:color/holo_purple"
android:src="@android:drawable/ic_dialog_info"/>
<View
android:id="@+id/secondView"
android:layout_width="80dp"
android:layout_height="35dp"
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_width="35dp"
android:layout_height="35dp"
android:background="@android:color/holo_orange_dark" />
</LinearLayout>
</LinearLayout>
您可以通过将以下内容添加到 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_width="match_parent"
android:layout_height="70dp">
<!-- This view does not move or change size. -->
<View
android:id="@+id/firstView"
android:layout_width="35dp"
android:layout_height="35dp"
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_width="wrap_content"
android:layout_height="wrap_content"
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_width="20dp"
android:layout_height="20dp"
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_width="80dp"
android:layout_height="35dp"
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_width="35dp"
android:layout_height="35dp"
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>
预览：
我正在尝试让我的 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_width="match_parent"
android:layout_height="70dp">
<!-- This view does not move or change size. -->
<View
android:id="@+id/firstView"
android:layout_width="35dp"
android:layout_height="35dp"
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_width="wrap_content"
android:layout_height="wrap_content"
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_width="20dp"
android:layout_height="20dp"
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_width="80dp"
android:layout_height="35dp"
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_width="35dp"
android:layout_height="35dp"
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>
我使用了一个垂直 LinearLayout 和另一个水平 LinearLayout。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center">
<View
android:id="@+id/firstView"
android:layout_width="35dp"
android:layout_height="35dp"
android:background="@android:color/holo_red_dark">
</View>
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="8dp"
android:background="@android:color/holo_purple"
android:src="@android:drawable/ic_dialog_info"/>
<View
android:id="@+id/secondView"
android:layout_width="80dp"
android:layout_height="35dp"
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_width="35dp"
android:layout_height="35dp"
android:background="@android:color/holo_orange_dark" />
</LinearLayout>
</LinearLayout>
您可以通过将以下内容添加到 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_width="match_parent"
android:layout_height="70dp">
<!-- This view does not move or change size. -->
<View
android:id="@+id/firstView"
android:layout_width="35dp"
android:layout_height="35dp"
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_width="wrap_content"
android:layout_height="wrap_content"
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_width="20dp"
android:layout_height="20dp"
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_width="80dp"
android:layout_height="35dp"
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_width="35dp"
android:layout_height="35dp"
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>
预览：