Android Implementando Chat Bubble en ListView

Question

Jan 02, 2012, 08:11 PM

Android Implementando Chat Bubble en ListView

Estoy en el proceso de escribir un cliente de chat en Android, pero tengo algunos problemas para poner una burbuja de chat en mi cliente. Mi pantalla de chat consta de unaListView con un cuadro de texto y un botón Enviar en la parte inferior. Para un mensaje saliente, los textos se dejan alineados en laListView fila. Para un mensaje entrante, los textos están alineados a la derecha en laListView fila. Sin embargo, la burbuja de chat no cambia el tamaño de la longitud de los mensajes de texto entrantes. Este problema no ocurre para el mensaje saliente alineado a la izquierda.

Aquí la captura de pantalla está abajo.

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

os textos de los mensajes de chat se almacenan en una base de datos y se muestran en laListView a través de un adaptador de cursor. La alineación de los textos de chat se determina sobre la marcha en el código fuente de Java enMessageAdapter. Ambas burbujas de chat se realizan con nueve imágenes de parche de Android.

Abajo está mi diseño de actividad de chat, elListView con el problema esmessageHistoryList:

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

iseño de fila @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>

daptador @Message:

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.findV,iewById(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;
    }
}