Poprawne wyrównanie TextViews w RelativeLayout

Question

Pracuję nad aplikacją do przesyłania wiadomości błyskawicznych na kurs uniwersytecki, podobnie jak w Whatsapp, jak można się domyślić, widząc ikonę na załączonym zrzucie ekranu :).

Mam ListFragment zapełniony niestandardowy CursorAdapter. Daje dwa typy widoków, wysłane wiadomości (wyrównane do prawej) i odebrane wiadomości (wyrównane do lewej).

Układ wysyłanych wiadomości działa dobrze, ale nie mogę powiedzieć tego samego dla otrzymanych wiadomości.

Oto zrzut ekranu:

Wysłane układ wiadomość:

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

odebrane układ wiadomość:

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

te brzydkie kolory tła są dodawane tylko aby zobaczyć przestrzeń dla każdego widoku i układu. Jak widać na zrzucie ekranu, wysyłanie wiadomości (wyrównane do prawej) działa świetnie. Odebrane wiadomości (wyrównane do lewej) nie są dobrze wyrównane, ponieważ RelativeLayout pobiera całą dostępną przestrzeń poziomą, po prostu do zawijania treści.

Ktoś wie, jak to naprawić, a może lepiej zaprojektować układ, aby osiągnąć to, czego potrzebuję?

Wielkie dzięki.

Answer 1

W układzie wiadomości wysłanych zastąp android: layout_alignParentRight = "true" parametr android: layout_alignParentLeft = "true".

Answer 2

Gdy dziecko jest alignParentRight, jego szerokość zostanie automatycznie zmieniona na match_parent. TextView cei_timestamp 's android:layout_alignParentRight="true" sprawiają, że jest to zmiana szerokości rodzica z wrap_content na match_parent w trybie cichym.
U posiada dwa sposoby poprawne:

1. nie używać 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. nie używać wrap_content zarówno użytkowania określonej szerokości jak 60dp.

Answer 3

Wiem, że jest późno, ale publikuję go dla kogoś, kto szuka rozwiązania tego samego problemu. Aby wyrównać otrzymaną wiadomość w lewo, po prostu usuń ten wiersz z drugiego TextView w xml dla otrzymanych wiadomości.

android:layout_toLeftOf="@+id/cei_timestamp" 

Próbowałem go z prostym przykładem i zadziałało. Oto kod i zrzut ekranu

<?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>`