Android在ListView中实现聊天泡泡

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

这里的屏幕截图如下。

Image http://i40.tinypic.com/5fgen6.png

聊天消息文本被存储在数据库中，并通过光标适配器显示在ListView。聊天文本的排列在MessageAdapter的Java源代码中即时确定。这两个聊天泡泡都是使用Android的九个补丁图像完成的。

下面是我的聊天活动布局，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; 
    } 
}

来源

2012-01-02 user1125567

“聊天泡泡”是什么意思？ – ethan 2012-01-03 15:15:04

聊天泡泡是包含人物话语的漫画书中的泡泡。有人把它称为讲话泡泡。当你与你的朋友聊天时，eBuddy等Android应用会使用它。 – user1125567 2012-01-04 05:49:19

您是否找到了解决方案？ – juned 2012-05-14 13:36:19

使用的LinearLayout代替相对布局。它会解决你的问题。我有同样的问题。我使用LinearLayout解决了这个问题

来源

2012-07-31 05:16:55

Android在ListView中实现聊天泡泡

回答

相关问题