Question

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

<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（TimeStamp）。

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中textview的顺序。

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

谢谢你，米哈伊

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>

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

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

希望这会有所帮助。干杯

Answer 2

您无需为聊天创建两个不同的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>

Answer 3

由于您在留言中使用LinearLayout orientation="horizontal"首先TextView，因此会填充所有可用空间。所以你必须像这样将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>

像listview一样的Android布局聊天

3 个答案: