android - 如何通过可变尺寸的 TextView 防止 ImageView 在屏幕外为 "pushed"？

Question

在约束布局中，我有一个 textview，旁边有一个 imageview:


但有时 textview 中的文本可能会很长，有时会超过一行。在这些情况下， ImageView 被推到 View 之外:


即使在 imageview 和 View 容器之间添加约束，imageview 也会被推到 View 之外。

目标是始终将图像放在文本旁边，如果它变大，只要不超出 View ，图像就会开始被推到一边。当它触及 View 的边界时，它应该停留在那里，而文本换行到下一行。

此代码块仅显示了第二张图片的情况:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent"
    tools:context=".MainActivity">

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView" android:layout_marginTop="8dp"
        app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="8dp"
        tools:text="This is a cat with a lot more text next to it so pay attention  "/>
<ImageView
        android:layout_width="30dp"
        android:layout_height="30dp" tools:srcCompat="@tools:sample/avatars[3]"
        android:id="@+id/imageView"
        app:layout_constraintStart_toEndOf="@+id/textView" android:layout_marginStart="8dp"
        android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.0"/>

</androidx.constraintlayout.widget.ConstraintLayout>

我已经尝试过 usgin 障碍和指南，但它们确实不适用于这种情况。 textview 需要是 wrap_content 因为它的大小是可变的并且最好使用约束布局，这就是我没有使用另一个的原因。链条在这里也不起作用。

Answer 1

您可以使用偏置为 0 的打包链使其开始对齐，然后设置 app:layout_constrainedWidth="true"对于这两个 View ，以便在包装内容时尊重它们的约束。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Text goes here"
        android:textSize="24sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toStartOf="@id/image"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/textView"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/avatars" />

</android.support.constraint.ConstraintLayout>