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