正确对齐TextViews中的RelativeLayout [英] Properly aligning TextViews in RelativeLayout

问题描述

I'm开发的是一个大学课程的即时消息应用程序，类似于WhatsApp的，你能猜出看到在随附的屏幕截图图标。）

I´m developing an instant message application for an university course, similar to Whatsapp as you could guess seeing the icon in the attached screenshot :).

我有一个ListFragment被填充了一个自定义的CursorAdapter。它给出了两个类型的观点，发邮件（对齐到右）和接收的邮件（对齐到左）。

I have a ListFragment being populated with a custom CursorAdapter. It gives two type of views, sent messages (aligned to right) and received messages (aligned to left).

所发送消息的布局工作得很好，但我不能说同为收到的邮​​件。

The layout for sent messages works nicely, but I cannot say the same for received messages.

下面是截图：

发送消息的布局：

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

收到的报文布局：

Received message layout:

<?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的采取所有可用的横向空间，insted的只是包装的内容。

Those ugly background colors are added just to see the space taken for each view and layout. As you can see in the screenshot, send messages (right-aligned) work great. Received messages (left-aligned) aren't aligning well, because RelativeLayout takes all horizontal space available, insted of just wrapping content.

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

Anyone knows how to fix it, or maybe a better layout design to accomplish what I need?

非常感谢。

推荐答案

在的孩子是 alignParentRight RelativeLayout的 ，它的宽度将自动更改为 match_parent 。 的TextView cei_timestamp的的android：layout_alignParentRight =真正的使得它从 WRAP_CONTENT父母的宽度变化到 match_parent 默默的。结果
u有两种方法要正确：

When RelativeLayout's child is alignParentRight, it's width will be auto changed to match_parent. TextView cei_timestamp 's android:layout_alignParentRight="true" make it's parent's width change from wrap_content to match_parent silently.
U have two ways to correct:

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>

这篇关于正确对齐TextViews中的RelativeLayout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！