在ListView的机器人实现聊天泡泡 [英] Android Implementing Chat Bubble in ListView

查看：139
本文介绍了在ListView的机器人实现聊天泡泡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在写作上Android的聊天客户端的过程，但我有把聊天泡在我的客户端的一些问题。我的聊天屏幕由一个的ListView 有一个文本框，并在底部的发送按钮。对于传出消息，该文被留在了的ListView 排列成行。对于传入的消息，该文本就在的ListView 排列成行。然而，聊天气泡不会调整到输入消息文本的长度。此问题不会发生在左对齐传出消息。

下面的屏幕截图如下。

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

下面是我的聊天活动布局，的ListView 与问题是 messageHistoryList ：

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT; LinearLayout中的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
  机器人：方向=垂直
  机器人：填充=10dip
  机器人：layout_width =FILL_PARENT
  机器人：layout_height =FILL_PARENT＆GT;

    ＆LT;的ListView
      机器人：ID =@ + ID / messageHistoryList
      机器人：layout_width =WRAP_CONTENT
      机器人：layout_height =0px
      机器人：layout_weight =1/＆GT;

    ＆LT;的LinearLayout
      机器人：layout_width =FILL_PARENT
      机器人：layout_height =WRAP_CONTENT＆GT;

      ＆LT;的EditText
        机器人：ID =@ + ID /消息
        机器人：layout_width =FILL_PARENT
        机器人：layout_height =WRAP_CONTENT
        机器人：重力=顶
        机器人：layout_weight =1/＆GT;

      ＆LT;按钮
          机器人：ID =@ + ID / sendMessageButton
          机器人：layout_width =FILL_PARENT
          机器人：layout_height =WRAP_CONTENT
          机器人：layout_weight =4
          机器人：文=发送/＆GT;

    ＆LT; / LinearLayout中＆GT;

＆LT; / LinearLayout中＆GT;

ListView中排布置：

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT; RelativeLayout的
  的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
  机器人：方向=垂直
  机器人：layout_width =WRAP_CONTENT
  机器人：layout_height =WRAP_CONTENT＆GT;

    ＆LT; RelativeLayout的
        机器人：layout_width =WRAP_CONTENT
        机器人：layout_height =WRAP_CONTENT
        机器人：ID =@ + ID / userAndMessage＆GT;

        ＆LT;的TextView
            机器人：layout_width =WRAP_CONTENT
            机器人：layout_height =WRAP_CONTENT
            机器人：ID =@ + ID / textUser
            机器人：TEXTSTYLE =黑体
            机器人：文字颜色=@色/蓝色/＆GT;

        ＆LT;的TextView
            机器人：layout_width =WRAP_CONTENT
            机器人：layout_height =WRAP_CONTENT
            机器人：ID =@ + ID /文字信息
            机器人：文字颜色=@色/蓝色
            机器人：TEXTSTYLE =黑体/＆GT;

    ＆LT; / RelativeLayout的＆GT;

    ＆LT;的TextView
        机器人：layout_width =WRAP_CONTENT
        机器人：layout_height =WRAP_CONTENT
        机器人：ID =@ + ID / textTime
        机器人：文字颜色=@色/蓝色/＆GT;

＆LT; / RelativeLayout的＆GT;

消息适配器：

 公共类MessageAdapter扩展SimpleCursorAdapter {

    静态最终的String [] FROM = {ChatHistoryManager.C_TIME};
    静态最终诠释[] TO = {R.id.textTime};

    静态最终诠释MESSAGE_INCOMING_DIR = 1;

    私人字符串incomingMessageUserName;
    私人字符串selfUserName;

    公共MessageAdapter（上下文的背景下，光标光标）{
        超（背景下，R.layout.message_list_item，光标，发件人，收件人）;
    }

    @覆盖
    公共无效bindView（查看行，上下文的背景下，光标光标）{
        super.bindView（行，上下文，光标）;

        INT messageDir = cursor.getInt（cursor.getColumnIndex（ChatHistoryManager.C_DIR））;
        如果（messageDir == MESSAGE_INCOMING_DIR）{

            RelativeLayout.LayoutParams userNameAndChatMessageParams =新RelativeLayout.LayoutParams（RelativeLayout.LayoutParams.WRAP_CONTENT，RelativeLayout.LayoutParams.WRAP_CONTENT）;
            userNameAndChatMessageParams.addRule（RelativeLayout.ALIGN_PARENT_RIGHT，RelativeLayout.TRUE）;

            RelativeLayout.LayoutParams userNameParams =新RelativeLayout.LayoutParams（RelativeLayout.LayoutParams.WRAP_CONTENT，RelativeLayout.LayoutParams.WRAP_CONTENT）;
            userNameParams.addRule（RelativeLayout.LEFT_OF，R.id.textMessage）;

            RelativeLayout.LayoutParams chatMessageParams =新RelativeLayout.LayoutParams（RelativeLayout.LayoutParams.WRAP_CONTENT，RelativeLayout.LayoutParams.WRAP_CONTENT）;
            chatMessageParams.addRule（RelativeLayout.ALIGN_PARENT_RIGHT，R.id.textUser）;

            RelativeLayout.LayoutParams timeParams =新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）;

            //设置聊天消息
            串chatMessage = cursor.getString（cursor.getColumnIndex（ChatHistoryManager.C_TEXT））;
            TextView的文字信息=（TextView中）row.findViewById（R.id.textMessage）;
            textMessage.setText（chatMessage.trim（））;
            textMessage.setLayoutParams（chatMessageParams）;

            //格式化消息的时间戳
            长时间戳= cursor.getLong（cursor.getColumnIndex（ChatHistoryManager.C_TIME））;
            TextView的textTime =（TextView中）row.findViewById（R.id.textTime）;
            字符串readableTimeStamp =（字符串）DateUtils.getRelativeTimeSpanString（时间戳）;
            textTime.setText（readableTimeStamp.trim（））;
            textTime.setLayoutParams（timeParams）;

            //格式化消息所有者和消息
            TextView的textUser =（TextView中）row.findViewById（R.id.textUser）;
            textUser.setText（incomingMessageUserName +：）;
            textUser.setLayoutParams（userNameParams）;
            row.setBackgroundResource（R.drawable.incoming_chat_bubble）;
        }
        其他 {
            RelativeLayout.LayoutParams userNameAndChatMessageParams =新RelativeLayout.LayoutParams（RelativeLayout.LayoutParams.WRAP_CONTENT，RelativeLayout.LayoutParams.WRAP_CONTENT）;
            userNameAndChatMessageParams.addRule（RelativeLayout.RIGHT_OF，R.id.userImage）;

            RelativeLayout.LayoutParams userImageParams =新RelativeLayout.LayoutParams（RelativeLayout.LayoutParams.WRAP_CONTENT，RelativeLayout.LayoutParams.WRAP_CONTENT）;
            userImageParams.addRule（RelativeLayout.ALIGN_PARENT_LEFT，RelativeLayout.TRUE）;

            RelativeLayout.LayoutParams userNameParams =新RelativeLayout.LayoutParams（RelativeLayout.LayoutParams.WRAP_CONTENT，RelativeLayout.LayoutParams.WRAP_CONTENT）;
            userNameParams.addRule（RelativeLayout.ALIGN_LEFT，R.id.userAndMessage）;

            RelativeLayout.LayoutParams chatMessageParams =新RelativeLayout.LayoutParams（RelativeLayout.LayoutParams.WRAP_CONTENT，RelativeLayout.LayoutParams.WRAP_CONTENT）;
            chatMessageParams.addRule（RelativeLayout.RIGHT_OF，R.id.textUser）;

            RelativeLayout.LayoutParams timeParams =新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）;

            //设置聊天消息
            串chatMessage = cursor.getString（cursor.getColumnIndex（ChatHistoryManager.C_TEXT））;
            TextView的文字信息=（TextView中）row.findViewById（R.id.textMessage）;
            textMessage.setText（chatMessage）;
            textMessage.setLayoutParams（chatMessageParams）;

            //格式化消息的时间戳
            长时间戳= cursor.getLong（cursor.getColumnIndex（ChatHistoryManager.C_TIME））;
            TextView的textTime =（TextView中）row.findViewById（R.id.textTime）;
            textTime.setText（DateUtils.getRelativeTimeSpanString（时间戳））;
            textTime.setLayoutParams（timeParams）;

            //格式化消息所有者和消息
            TextView的textUser =（TextView中）row.findViewById（R.id.textUser）;
            textUser.setText（selfUserName +：）;
            textUser.setLayoutParams（userNameParams）;
            row.setBackgroundResource（R.drawable.outgoing_chat_bubble）;
        }
    }

    公共无效setIncomingMessageUserName（字符串inputUserName）{
        this.incomingMessageUserName = inputUserName;
    }

    公共无效setSelfUserName（字符串inputUserName）{
        this.selfUserName = inputUserName;
    }
}

解决方案

使用，而不是相对布局的LinearLayout。这将解决您的问题。我有同样的问题。我解决了它使用的LinearLayout

I am in the process of writing a chat client on Android but I am having some issues with putting a chat bubble in my client. My chat screen consists of a ListView with a textbox and a Send button at bottom. For an outgoing message, the texts are left aligned in the ListView row. For an incoming message, the texts are right aligned in the ListView row. However, the chat bubble does not resize to the length of the incoming message texts. This issue does not happen for the left aligned outgoing message.

Here the screen shot is below.

The chat message texts are stored in a database and are displayed in the ListView via a cursor adapter. The alignment of the chat texts are determined on-the-fly in the Java source code in MessageAdapter. Both chat bubbles are done using nine patch image of Android.

Below is my chat activity layout, the ListView with issue is 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 row layout:

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

Message adapter:

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

解决方案

use LinearLayout instead of Relative layout. It will solve your problem. I had same issue. I solved it using LinearLayout

这篇关于在ListView的机器人实现聊天泡泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆