在RelativeLayout中正确对齐TextViews

时间:2012-03-06 06:01:32

标签: android android-layout relativelayout

我正在开发一个大学课程的即时消息应用程序,类似于Whatsapp,你可以猜到看到附加屏幕截图中的图标:)。

我有一个使用自定义CursorAdapter填充的ListFragment。它提供两种类型的视图,发送消息(右对齐)和接收消息(左对齐)。

发送消息的布局很好用,但我不能对收到的消息说同样的内容。

以下是截图:

enter image description here

已发送邮件布局:

<?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占用了所有可用的水平空间,只是包装内容。

任何人都知道如何修复它,或者更好的布局设计来完成我需要的工作?

非常感谢。

3 个答案:

答案 0 :(得分:1)

在已发送的邮件布局中替换android:layout_alignParentRight =&#34; true&#34; android的参数:layout_alignParentLeft =&#34; true&#34;。

答案 1 :(得分:0)

RelativeLayout的孩子为alignParentRight时,其宽度将自动更改为match_parentTextView 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等特定宽度。

答案 2 :(得分:0)

我知道现在已经很晚了,但是我正在为寻找相同问题解决方案的人发帖。 要将收到的消息对齐到左侧,只需从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>`

button is irrelevant but please tolerate it anyways :)