ConstraintLayout 中的 TextView 环绕/关闭屏幕

Question

我试图在 ConstraintLayout 中并排设置两个 TextView。 TextView2（市场）应始终位于 TextView1 的右侧。 它永远不应该离开屏幕。 这是我对不同长度的 TextView1 的要求：

这是我的 XML：

<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="wrap_content"
    android:orientation="horizontal">


    <TextView
        android:id="@+id/chat_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Lorem ipsum"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="wrap" />

    <TextView
        android:id="@+id/tvRate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/half_margin"
        android:background="@drawable/tag_marketplace_backround"
        android:paddingStart="@dimen/half_margin"
        android:paddingEnd="@dimen/half_margin"
        android:text="@string/market"
        android:textAllCaps="true"
        android:textColor="@android:color/white"
        android:textSize="12sp"
        app:layout_constraintStart_toEndOf="@id/chat_message"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

这在 TextView1 很小（第一张图片）时有效。 但是当我增加 TextView2 的长度时 TextView2 会离开屏幕。 请帮我实现这一点。

Answer 1

试试这个布局。 它使用链和水平偏置：

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

    <TextView
        android:id="@+id/chat_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum "
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tvRate"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvRate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/half_margin"
        android:background="@drawable/ic_launcher_background"
        android:paddingStart="@dimen/half_margin"
        android:paddingEnd="@dimen/half_margin"
        android:text="@string/market"
        android:textAllCaps="true"
        android:textColor="@android:color/white"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/chat_message"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

尝试这个

    <androidx.constraintlayout.widget.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="wrap_content">

<androidx.constraintlayout.widget.ConstraintLayout
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/chat_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tvRate"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Lorem dsjdlk lkjdksl jdlk jdlk djslkdjslkdsjdlskdjsdlsjsdl kjdl ksjd lksjlkd jl kjdl ksj slk jdslkd sjdlskjdslkj dlkj dlkjd lkd jsldksjdlksdjskdlsdjlksdjsl kj ldkjd lskdjs ldkjsldskjlk" />

    <TextView
        android:id="@+id/tvRate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/black"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:textAllCaps="true"
        android:textColor="@android:color/white"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Market" />

</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

0dp 基本上在屏幕的左侧直到右边的文本 tvRate（占用尽可能多的空间） wrap content 基本上占用了包装元素所具有的内容所需的空间

Answer 3

我相信您可以使用水平链实现这一点，您可以使View的布局相互依赖并依赖于父级。 然后ConstraintLayout可以以有趣的方式定义它们解决的约束。 您可以在链中的第一个View上定义链的样式。 我还注意到设置了orientation ，但这对ConstraintLayout没有任何作用，并且layout_constraintWidth_default仅在android:width设置为0dp 。

<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="wrap_content">


<TextView
    android:id="@+id/chat_message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Lorem ipsum"
    app:layout_constrainedWidth="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toStartOf="@id/tvRate"
    app:layout_constraintHorizontal_chainStyle="spread_inside" />

<TextView
    android:id="@+id/tvRate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/half_margin"
    android:background="@drawable/tag_marketplace_backround"
    android:paddingStart="@dimen/half_margin"
    android:paddingEnd="@dimen/half_margin"
    android:text="@string/market"
    android:textAllCaps="true"
    android:textColor="@android:color/white"
    android:textSize="12sp"
    app:layout_constraintStart_toEndOf="@id/chat_message"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />