Правильное выравнивание TextViews в RelativeLayout

Question

Я разрабатываю приложение для обмена мгновенными сообщениями для университетского курса, похожее на Whatsapp, как вы могли догадаться, увидев значок на прикрепленном снимке экрана:).

У меня есть ListFragment, заполненный пользовательским CursorAdapter.Это дает два типа представлений: отправленные сообщения (выровненные по правому краю) и полученные сообщения (выровненные по левому краю).

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

Вот снимок экрана:

Макет отправленного сообщения:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="#FFCCCCCC"
        android:padding="5dp" >

        <TextView
            android:id="@+id/ceo_timestamp"
            android:layout_width="60sp"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:background="#FFBBBBBB"
            android:gravity="center"
            android:textSize="10sp" />

        <TextView
            android:id="@+id/ceo_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/ceo_timestamp"
            android:background="#FFAAAAAA"
            android:gravity="right"
            android:textSize="16sp" />
    </RelativeLayout>

</RelativeLayout>

Макет полученного сообщения:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="left" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:background="#FF999999"
        android:padding="5dp" >

        <TextView
            android:id="@+id/cei_timestamp"
            android:layout_width="60sp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:background="#FF888888"
            android:gravity="center"
            android:textSize="10sp" />

        <TextView
            android:id="@+id/cei_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/cei_timestamp"
            android:background="#FF777777"
            android:gravity="right"
            android:textSize="16sp" />
    </RelativeLayout>

</RelativeLayout>

Теуродливые цвета фона добавляются только для того, чтобы увидеть пространство, занимаемое для каждого вида и макета.Как вы можете видеть на скриншоте, отправка сообщений (по правому краю) работает отлично.Полученные сообщения (выровненные по левому краю) плохо выравниваются, поскольку RelativeLayout занимает все доступное горизонтальное пространство, а не просто перенос содержимого.

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

Спасибо большое.

Answer 1

В макете отправленного сообщения замените параметр android: layout_alignParentRight = "true" на параметр android: layout_alignParentLeft = "true".

Answer 2

Я знаю, что уже поздно, но я публикую это для кого-то, кто ищет решение той же проблемы. Чтобы выровнять полученное сообщение по левому краю, просто удалите эту строку из второго TextView в xml для полученных сообщений.

 android:layout_toLeftOf="@+id/cei_timestamp"

Я попробовал это на простом примере, и это сработало. Вот код и снимок экрана

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.android.myapplication1.MainActivity">
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#FF4081">

    <TextView
        android:id="@+id/textView"
        android:layout_width="60sp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:gravity="center"
        android:text="Hello"
        android:textSize="23sp" />


    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/textView"
        android:gravity="right"
        android:text="New Text"
        android:textColor="#FFF"
        android:textSize="23sp" />
</RelativeLayout>

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout centerHorizontal="true"
    android:layout marginTop = "104dp"
    android:text="New Button" /></RelativeLayout>`

Answer 3

Когда дочерний элемент RelativeLayout равен alignParentRight, его ширина будет автоматически изменена на match_parent. TextView cei_timestamp android:layout_alignParentRight="true" позволяет молча изменить ширину родительского элемента с wrap_content на match_parent.
У вас есть два способа исправить:

1. не использовать RelativeLayout

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
   
       <LinearLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_alignParentLeft="true"
           android:background="#FF999999"
           android:padding="5dp" >
   
           <TextView
               android:id="@+id/cei_text"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:background="#FF777777"
               android:gravity="right"
               android:textSize="16sp" />
   
           <TextView
               android:id="@+id/cei_timestamp"
               android:layout_width="60sp"
               android:layout_height="wrap_content"
               android:background="#FF888888"
               android:gravity="center"
               android:textSize="10sp" />
   
       </LinearLayout>
   
   </RelativeLayout>
   

   
   

2. не используйте wrap_content, оба используют определенную ширину, как 60dp.