ConstraintLayout 中的 TextView wrapping/off 屏幕

Question

我试图在 ConstraintLayout 中并排设置两个 TextView。 TextView2 (Market) 应始终位于 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（尽可能多地取 space）换行内容基本上取需要换行的 space元素的内容

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" />

ConstraintLayout 中的 TextView wrapping/off 屏幕

TextView wrapping/off screen in ConstraintLayout

android

android-linearlayout

android-xml

android-constraintlayout