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 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的右侧文本（占用尽可能多的空间）换行内容基本上就是换行该元素具有的内容所需的空间

Answer 2

尝试这种布局。它使用链和水平偏差：

<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 3

我相信您可以通过使用horizontal chain来实现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" />