Android layout chat like listview

Question

我正在尝试使用左右显示消息的 ListView 来制作类似聊天的 View 。左侧消息的标记是

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

但是缺少第二个 TextView (时间戳)。

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

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

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

谢谢，米海

Answer 1

我最近遇到了完全相同的问题。虽然您刚才寻找答案，但它可能对其他人有用。这是我处理它的方式:

这是我的 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;
    }

希望这对您有所帮助。干杯