Как я могу сделать обтекание содержимого двумя текстовыми представлениями, сохраняя максимальную длину?

Question

Я работаю над функцией чата, в которой я хочу, чтобы сообщения пользователей появлялись на правой стороне , а сообщения других пользователей на левой стороне .Правая сторона создает некоторые проблемы.

Поскольку сообщение короткое, оно должно прилипать к правой стороне экрана, тогда имя пользователя должно быть справа от него, какпоказано ниже (разработчики Android: « показать границы макета » включено):

Просто несколько LinearLayout с двумя TextView, выровненными по правому краю, но вы можете видеть, что это не работает с более длинными сообщениями, так как они обрезаются, а имя часто вообще невидимо.Мне удалось сделать это с помощью макета ограничения:

]

ConstraintLayout (обертка) имеет ограничение 100dp слева дляполе и внутри него имя и сообщение связаны друг с другом.Недостатком является то, что короткие сообщения больше не смещаются вправо.

Как управлять макетом для автоматического выравнивания, как я хочу?

Answer 1

Может быть, это может помочь вам, если у вас уже есть ConstraintLayout, поиграйте немного больше с возможными атрибутами ограничения.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

  <TextView
      android:id="@+id/name"
      style="@style/TextAppearance.AppCompat.Body1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="100dp"
      android:paddingEnd="8dp"
      android:text="Name"
      app:layout_constraintEnd_toStartOf="@id/message"
      app:layout_constraintHorizontal_chainStyle="spread_inside"
      app:layout_constraintStart_toStartOf="parent"/>

  <TextView
      android:id="@+id/message"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginEnd="16dp"
      android:text="Message"
      app:layout_constrainedWidth="true"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toEndOf="@id/name"/>

  <TextView
      android:id="@+id/name2"
      style="@style/TextAppearance.AppCompat.Body1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="100dp"
      android:paddingEnd="8dp"
      android:text="Name"
      app:layout_constraintEnd_toStartOf="@id/message2"
      app:layout_constraintHorizontal_chainStyle="spread_inside"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@id/message"/>

  <TextView
      android:id="@+id/message2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginEnd="16dp"
      android:text="A Very Long message for you to read  set we cen test to row breaking in this text Message"
      app:layout_constrainedWidth="true"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toEndOf="@id/name2"
      app:layout_constraintTop_toBottomOf="@id/message"/>
</android.support.constraint.ConstraintLayout>

Магия: app:layout_constrainedWidth="true", которая заботится омаксимальная ширина вида в зависимости от окружающих видов (просто ограничение с помощью toStartOf ... EndOf) (см .: https://developer.android.com/reference/android/support/constraint/ConstraintLayout).

Также app:layout_constraintHorizontal_chainStyle="spread_inside" заботится о том, чтобы представления всегда выравнивались по максимуму слева иверно, это цепочка в макетах ограничений (https://developer.android.com/training/constraint-layout/)

Надеюсь, это поможет вам решить вашу проблему.

Answer 2

Вы сможете управлять этой функцией, внедрив constraint Guideline.

. Таким образом, вы можете разделить весь макет по вертикали и разделить пользовательские сообщения и ответы, отформатировав каждую сторону по отдельности.

<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />

Попробуйте использовать что-то вроде этого:

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

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<LinearLayout
    app:layout_constraintRight_toLeftOf="@id/guideline"
    android:id="@+id/friend_column"
    android:layout_width="0dp"
    app:layout_constraintWidth_percent=".5"
    android:layout_marginLeft="10dp"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/friend"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:text="Friend"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:gravity="end"
        android:text="Whats up?"/>
</LinearLayout>

<LinearLayout
    app:layout_constraintTop_toBottomOf="@id/friend_column"
    app:layout_constraintLeft_toRightOf="@id/guideline"
    android:id="@+id/user_column"
    android:layout_width="0dp"
    app:layout_constraintWidth_percent=".5"
    android:layout_marginRight="10dp"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/user"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:textStyle="bold"
        android:text="User"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:gravity="end"
        android:text="I'm sailing away set an open course for the virgin sea
        I've got to be free free to face the life that's ahead of me
        On board I'm the captain so climb aboard
        We'll search for tomorrow on every shore
        And I'll try oh Lord I'll try to carry on"/>
</LinearLayout>

</android.support.constraint.ConstraintLayout>