在 RelativeLayout 中正确对齐 TextView答案

【问题标题】：Properly aligning TextViews in RelativeLayout在 RelativeLayout 中正确对齐 TextView
【发布时间】：2016-08-05 04:24:52
【问题描述】：

我正在为大学课程开发一个即时消息应用程序，类似于 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 占用了所有可用的水平空间，而不是仅仅包装内容。

任何人都知道如何解决它，或者更好的布局设计来完成我的需要？

非常感谢。

【问题讨论】：

+1 获取讲述所有故事的屏幕截图... :)
那些愚蠢的事情和咖啡在有工作要做和没有时间的时候继续喝很不错:)
+1 为您的屏幕截图。

标签： android android-layout android-relativelayout

【解决方案1】：

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

【讨论】：

感谢您的快速回答！我试过了，对齐效果很好，但与预期相反。我想在右边接收消息，在左边接收消息。
所以你可以随意改变左右对齐方式。 :)

【解决方案2】：

当RelativeLayout 的孩子是alignParentRight 时，它的宽度将自动更改为match_parent。 TextView cei_timestamp 的 android:layout_alignParentRight="true" 使其父级的宽度从 wrap_content 无声地更改为 match_parent。
你有两种方法可以纠正：

不要使用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>

不要使用wrap_content，两者都使用特定宽度，如60dp。

【讨论】：

【解决方案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>`

【讨论】：