Android在ListView中实现聊天气泡

Question

我正在 Android 上编写聊天客户端，但在我的客户端中放置聊天气泡时遇到了一些问题。我的聊天屏幕由一个 ListView 组成，底部有一个文本框和一个发送按钮。对于传出消息，文本在 ListView 行中左对齐。对于传入消息，文本在 ListView 行中右对齐。但是，聊天气泡不会调整为传入消息文本的长度。对于左对齐的传出消息，不会发生此问题。

下面是屏幕截图。

聊天消息文本存储在数据库中，并通过光标适配器显示在 ListView 中。聊天文本的对齐方式在 MessageAdapter 中的 Java 源代码中即时确定。两个聊天气泡都是使用 Android 的 9-patch 图像完成的。

下面是我的聊天 Activity 布局，有问题的 ListView 是 messageHistoryList:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:orientation="vertical"
  android:padding="10dip" 
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

    <ListView
      android:id="@+id/messageHistoryList"
      android:layout_width="wrap_content" 
      android:layout_height="0px" 
      android:layout_weight="1"/>

    <LinearLayout 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" >

      <EditText
        android:id="@+id/message"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="top"
        android:layout_weight="1"/>

      <Button 
          android:id="@+id/sendMessageButton"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_weight="4"
          android:text="Send"/>

    </LinearLayout>

</LinearLayout>

ListView 行布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/userAndMessage">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textUser"
            android:textStyle="bold"
            android:textColor="@color/blue"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textMessage"
            android:textColor="@color/blue"
            android:textStyle="bold"/>

    </RelativeLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textTime"
        android:textColor="@color/blue"/>

</RelativeLayout>

消息适配器:

public class MessageAdapter extends SimpleCursorAdapter {

    static final String[] FROM = { ChatHistoryManager.C_TIME };
    static final int[] TO = { R.id.textTime };

    static final int MESSAGE_INCOMING_DIR = 1;

    private String incomingMessageUserName;
    private String selfUserName;

    public MessageAdapter(Context context, Cursor cursor) {
        super(context, R.layout.message_list_item, cursor, FROM, TO);
    }

    @Override
    public void bindView(View row, Context context, Cursor cursor) {
        super.bindView(row, context, cursor);

        int messageDir = cursor.getInt(cursor.getColumnIndex(ChatHistoryManager.C_DIR));
        if(messageDir == MESSAGE_INCOMING_DIR) {

            RelativeLayout.LayoutParams userNameAndChatMessageParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            userNameAndChatMessageParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);

            RelativeLayout.LayoutParams userNameParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            userNameParams.addRule(RelativeLayout.LEFT_OF, R.id.textMessage);

            RelativeLayout.LayoutParams chatMessageParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            chatMessageParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, R.id.textUser);

            RelativeLayout.LayoutParams timeParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            timeParams.addRule(RelativeLayout.ALIGN_RIGHT, R.id.userAndMessage);
            timeParams.addRule(RelativeLayout.BELOW, R.id.userAndMessage);

            row.setBackgroundResource(R.color.grey);

            // Set the chat message
            String chatMessage = cursor.getString(cursor.getColumnIndex(ChatHistoryManager.C_TEXT));
            TextView textMessage = (TextView) row.findViewById(R.id.textMessage);
            textMessage.setText(chatMessage.trim());
            textMessage.setLayoutParams(chatMessageParams);

            // Format the time stamp of the message
            long timestamp = cursor.getLong(cursor.getColumnIndex(ChatHistoryManager.C_TIME));
            TextView textTime = (TextView) row.findViewById(R.id.textTime);
            String readableTimeStamp = (String) DateUtils.getRelativeTimeSpanString(timestamp);
            textTime.setText(readableTimeStamp.trim());
            textTime.setLayoutParams(timeParams);

            // Format the message owner and the message
            TextView textUser = (TextView) row.findViewById(R.id.textUser);
            textUser.setText(incomingMessageUserName + ": ");
            textUser.setLayoutParams(userNameParams);
            row.setBackgroundResource(R.drawable.incoming_chat_bubble);
        }
        else {
            RelativeLayout.LayoutParams userNameAndChatMessageParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            userNameAndChatMessageParams.addRule(RelativeLayout.RIGHT_OF, R.id.userImage);

            RelativeLayout.LayoutParams userImageParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            userImageParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);

            RelativeLayout.LayoutParams userNameParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            userNameParams.addRule(RelativeLayout.ALIGN_LEFT, R.id.userAndMessage);

            RelativeLayout.LayoutParams chatMessageParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            chatMessageParams.addRule(RelativeLayout.RIGHT_OF, R.id.textUser);

            RelativeLayout.LayoutParams timeParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            timeParams.addRule(RelativeLayout.ALIGN_LEFT, R.id.userAndMessage);
            timeParams.addRule(RelativeLayout.BELOW, R.id.userAndMessage);

            // Set the chat message
            String chatMessage = cursor.getString(cursor.getColumnIndex(ChatHistoryManager.C_TEXT));
            TextView textMessage = (TextView) row.findViewById(R.id.textMessage);
            textMessage.setText(chatMessage);
            textMessage.setLayoutParams(chatMessageParams);

            // Format the time stamp of the message
            long timestamp = cursor.getLong(cursor.getColumnIndex(ChatHistoryManager.C_TIME));
            TextView textTime = (TextView) row.findViewById(R.id.textTime);
            textTime.setText(DateUtils.getRelativeTimeSpanString(timestamp));
            textTime.setLayoutParams(timeParams);

            // Format the message owner and the message
            TextView textUser = (TextView) row.findViewById(R.id.textUser);
            textUser.setText(selfUserName + ": ");
            textUser.setLayoutParams(userNameParams);
            row.setBackgroundResource(R.drawable.outgoing_chat_bubble);
        }
    }

    public void setIncomingMessageUserName(String inputUserName) {
        this.incomingMessageUserName = inputUserName;
    }

    public void setSelfUserName(String inputUserName) {
        this.selfUserName = inputUserName;
    }
}

Answer 1

使用 LinearLayout 而不是 Relative 布局。它会解决你的问题。我有同样的问题。我使用 LinearLayout 解决了它