在RelativeLayout中正確對齊TextViews

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_alignParentLeft =「true」替換android：layout_alignParentRight =「true」參數。

Answer 2

當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。

Answer 3

我知道這是晚了，但我張貼它尋找解決相同問題的人。 要將接收到的消息與左側對齊，只需從xml中的第二個TextView中爲接收到的消息刪除此行。

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