Плагин для Android: чат-пузырь с текстом даты внизу справа и базовым текстом сообщения

Question

Этот вопрос задан много раз, но так и не получил правильного ответа.

Как я могу создать макет (который похож на наиболее распространенные приложения обмена сообщений, как Whatsapp, телеграммы) со следующими характеристиками:

• Он имеет вид, который действует как контейнер и имеет фон с образ пузыря.
• В контейнере есть два элемента, текстовое сообщение и дата текста.
• Текстовое сообщение начинается сверху слева и может иметь несколько строк.
• Текстовая дата выровнена с базовой линией последней строки текстового сообщения и справа от нее.

Я попытался дотянуться до него с относительной компоновкой.

<RelativeLayout android:id="@+id/message_bubble_container" 
    android:layout_below="@+id/message_date_separator_container" 
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:background="@drawable/chat_message_background" 
    android:padding="4dp"> 


    <RelativeLayout 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content"> 

     <TextView 
      style="@style/TextAppearance.AppCompat.Medium" 
      android:id="@+id/message_text" 
      android:layout_height="wrap_content" 
      android:layout_width="wrap_content" 
      tools:text="This is a message long that causes the date to leave the screen!" /> 

     <TextView 
      style="@style/TextAppearance.AppCompat.Small" 
      android:id="@+id/message_time" 
      android:layout_alignBottom="@id/message_text" 
      android:layout_height="wrap_content" 
      android:layout_toRightOf="@id/message_text" 
      android:textColor="@color/material_grey_900" 
      android:textSize="12sp" 
      tools:text="18:58" 
      android:paddingLeft="4dp"/> 

    </RelativeLayout> 


</RelativeLayout> 

Это хорошо работает, когда текст сообщения на одной строке, но когда он растет, чтобы заполнить ширину контейнера, он выталкивает дату на экране. Как я могу избежать этого поведения и заставить текстовое сообщение сохранить маржу справа на дату?

Если это CSS я просто нужно добавить margin-right: 40px; к .message_text. Конечно, это Android, а не CSS ...

Кроме того, мне не нравится использовать maxWidth на @id/message_text, потому что я не знаю, сколько будет dp на экране.

Наконец, я слышал, что некоторые говорили о FlowLayout. Есть ли способ?

Спасибо всем, кто попытается решить эту проблему, которая затрагивает любого, кто пытается разработать макет чата.

Answer 1

Используйте линейную компоновку с вертикальной ориентацией вместо относительной компоновки. Что-то вроде этого:

<LinearLayout android:id="@+id/message_bubble_container" 
android:layout_below="@+id/message_date_separator_container" 
android:layout_height="wrap_content" 
android:layout_width="wrap_content" 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:orientation="vertical" 
android:background="@drawable/chat_message_background" 
android:padding="4dp"> 


<LinearLayout 
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content" 
    android:orientation="vertical"> 

    <TextView 
     style="@style/TextAppearance.AppCompat.Medium" 
     android:id="@+id/message_text" 
     android:gravity="right" 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content" 
     tools:text="This is a message long that causes the date to leave the screen!" /> 

    <TextView 
     style="@style/TextAppearance.AppCompat.Small" 
     android:id="@+id/message_time" 
     android:layout_alignBottom="@id/message_text" 
     android:layout_height="wrap_content" 
     android:layout_toRightOf="@id/message_text" 
     android:textColor="@color/material_grey_900" 
     android:textSize="12sp" 
     tools:text="18:58" 
     android:paddingLeft="4dp"/> 

</LinearLayout> 
</LinearLayout> 

Попробуйте, дайте мне знать, это сработало. :)

Answer 2

считать, что дата текст вид из внутреннего относительного расположения и держать, что в относительном макете родительского с alignparentbottom истинные и выравнивать parentright правда

День кодирование