2

我正在尝试使用列表视图制作类似聊天的视图，其中消息显示在左右两侧。左消息的标记是

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:gravity="left">

    <TextView
        android:id="@+id/MessageListItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:background="@drawable/RoundedCornersBlue"
        android:padding="8dp"
        android:text="realy long realy long realy long realy long realy long realy long realy long realy long "
        android:layout_marginRight="5dp" />
    <TextView
        android:id="@+id/MessageListItemDate"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:textColor="#cbc4b1"
        android:text="23:11"
        android:gravity="center_horizontal|center_vertical" />
 </LinearLayout>

但缺少第二个文本视图（时间戳）。

http://i.stack.imgur.com/JxDXQ.jpg

正确的消息具有以下标记

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:gravity="right">
    <TextView
        android:id="@+id/MessageListItemDate"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:textColor="#cbc4b1"
        android:text="12:34"
        android:gravity="center_horizontal|center_vertical" />
    <TextView
        android:id="@+id/MessageListItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:text="realy long realy long realy long realy long realy long realy long realy long realy long "
        android:background="@drawable/RoundedCornersBlue"
        android:padding="8dp"
        android:layout_marginLeft="5dp" />
</LinearLayout>

http://i.stack.imgur.com/1MnyW.jpg

这个看起来也是我想要的。left 和 right 的唯一区别是 LinearLayout 的 android:gravity 和 LinearLayout 中 textview 的顺序。

知道我做错了什么吗？或者我怎样才能实现这种类型的设计

谢谢你，米海

4

3 回答 3

2

我最近遇到了完全相同的问题。尽管您前一阵子寻找了答案，但它可能对其他人有用。这是我的处理方式：

这是我的 conversation_item 的 xml 代码，默认情况下，所有内容都位于左侧：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/conversationItemRelativeLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:paddingLeft="11dp"
                android:paddingRight="11dp"
                >

    <ImageView
            android:id="@+id/conversationUserImage"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="@drawable/my_ears_placeholder_grey_background"
            android:layout_alignBottom="@+id/conversationBubble"
            />

    <TextView
            android:id="@+id/conversationDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Time Ago"
            android:layout_below="@id/conversationUserImage"
            android:layout_marginTop="5dp"

            />

    <TextView
            android:id="@+id/conversationBubble"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/conversationUserImage"
            android:text="Exemple Text"
            android:background="@drawable/bubbleleft"
            android:gravity="center"
            />

    <ImageView
            android:id="@+id/messagePicture"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/conversationUserImage"
            android:gravity="center"
            />

</RelativeLayout>

然后，我没有复制 xml，而是使用自定义适配器调用的方法在代码中设置布局更改：

private View getConversationItem(Message message) {

        View view = LayoutInflater.from(ConversationActivity.this).inflate(R.layout.conversation_item, null);
        ...

        if (message.iAmOwner()) {          
                conversationBubble.setBackground(getResources().getDrawable(R.drawable.bubbleleft));
                messagePicture.setBackground(getResources().getDrawable(R.drawable.bubbleleft));                               
                ImageLoader.getInstance().displayImage(myPictureURL, conversationUserImage, options);
                ...
        }
        else {    
                ImageLoader.getInstance().displayImage(senderPictureURL, conversationUserImage, options);
                conversationBubble.setBackground(getResources().getDrawable(R.drawable.bubbleright));
                messagePicture.setBackground(getResources().getDrawable(R.drawable.bubbleright));


            RelativeLayout.LayoutParams conversationUserImageParams = (RelativeLayout.LayoutParams)       conversationUserImage.getLayoutParams();
            conversationUserImageParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
            conversationUserImage.setLayoutParams(conversationUserImageParams);

            RelativeLayout.LayoutParams conversationDateParams = (RelativeLayout.LayoutParams)conversationDate.getLayoutParams();
            conversationDateParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
            conversationDate.setLayoutParams(conversationDateParams);

            RelativeLayout.LayoutParams conversationBubbleParams = (RelativeLayout.LayoutParams) conversationBubble.getLayoutParams();
            conversationBubbleParams.addRule(RelativeLayout.LEFT_OF,R.id.conversationUserImage);


            RelativeLayout.LayoutParams messagePictureParams = (RelativeLayout.LayoutParams) messagePicture.getLayoutParams();
            messagePictureParams.addRule(RelativeLayout.LEFT_OF,R.id.conversationUserImage);

            messagePictureParams.removeRule(RelativeLayout.RIGHT_OF);
            conversationBubbleParams.removeRule(RelativeLayout.RIGHT_OF);

            conversationBubble.setLayoutParams(conversationBubbleParams);
            messagePicture.setLayoutParams(messagePictureParams);

        }

        return view;
    }

希望这可以帮助。干杯

于 2013-07-31T16:04:57.777 回答
1

您无需为聊天创建两个不同的 xml。您可以单独实现这一目标。

<?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="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/txtsenderdt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left|center"
            android:text="07:03"
            android:textColor="@android:color/darker_gray"
            android:textSize="18dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/txtsender"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:background="@drawable/chat1"
            android:text="realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long"
            android:textSize="18dp" />
    </LinearLayout>

</LinearLayout>
于 2012-10-31T10:11:13.897 回答
0

因为您使用LinearLayoutwith orientation="horizontal"first TextViewin message left 填充所有可用空间。所以你必须改变LinearLayout成RelativeLayout这样

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:gravity="left">

    <TextView
        android:id="@+id/MessageListItemDate"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_height="fill_parent"
        android:textColor="#cbc4b1"
        android:text="23:11"
        android:gravity="center_horizontal|center_vertical" />

    <TextView
        android:id="@+id/MessageListItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:layout_toLeftOf="@id/MessageListItemDate"
        android:background="@drawable/RoundedCornersBlue"
        android:padding="8dp"
        android:text="realy long realy long realy long realy long realy long realy long realy long realy long "
        android:layout_marginRight="5dp" />
</RelativeLayout>
于 2012-10-31T10:14:47.733 回答