在RelativeLayout中正确对齐TextViews

Question

我正在开发一款即时通讯应用程序，与Whatsapp类似，您可以通过附加的屏幕截图中的图标猜测出来。我使用自定义的CursorAdapter填充ListFragment，它提供两种类型的视图：已发送消息（靠右对齐）和接收到的消息（靠左对齐）。已发送消息的布局效果良好，但接收到的消息则不尽如人意。以下是屏幕截图： 已发送消息的布局：

<?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占据了所有可用的水平空间，而不是只包装内容。 有人知道如何修复它，或者有更好的布局设计来完成我需要的功能吗？非常感谢。

- mavnaranjo

---

+1 为一个截图讲述所有的故事... :) - Farhan

那些愚蠢的事情和咖啡在工作繁忙、时间不足时是很好的保持方式 :) - mavnaranjo

+1 对于你的截图。 - PhatHV

Answer 1

在发送消息的布局中，将 android:layout_alignParentRight="true" 参数替换为 android:layout_alignParentLeft="true"。

- Om Narain Shukla

---

谢谢您的快速回复！我尝试了那个，对齐效果很好，但与预期相反。我想把发送的消息放到右边，接收的消息放到左边。 - mavnaranjo

所以你可以随时将两者的对齐方式改为左对齐或右对齐。 :) - Om Narain Shukla

Answer 2

当 RelativeLayout 的子项设置了 alignParentRight 属性时，它的宽度会自动改为 match_parent。而 TextView 的 android:layout_alignParentRight="true" 则会默默地将其父容器的宽度从 wrap_content 改为 match_parent。
您有两种方式可以进行更正：

1. 不要使用 RelativeLayout

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
   
       <LinearLayout
           android:layout_width="60dp"
           android:layout_height="wrap_content"
           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="60dp"
               android:layout_height="wrap_content"
               android:background="#FF888888"
               android:gravity="center"
               android:textSize="10sp" />
   
       </LinearLayout>
   
   </LinearLayout>
   

   
   

2. 不要使用wrap_content，两个控件都使用明确的宽度，比如60dp。

- Longwayto

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

- farheen