2012-01-02 16 views
12

私はAndroid上にチャットクライアントを作成中ですが、クライアントにチャットバブルを設定する際に問題があります。私のチャット画面は、ListViewのテキストボックスと、下の[送信]ボタンで構成されています。送信メッセージの場合、テキストはListView行に一列に並んでいます。受信メッセージの場合、テキストはListView行に右揃えされます。ただし、チャットバブルは受信メッセージテキストの長さに合わせてサイズ変更されません。この問題は、左揃えの送信メッセージでは発生しません。AndroidはListViewでチャットバブルを実装しています

ここでのスクリーンショットは以下のとおりです。

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

チャットメッセージテキストは、データベースに格納され、カーソルアダプタを介してListViewで表示されます。チャットテキストの配置は、JavaソースコードMessageAdapterでオンザフライで決定されます。両方のチャットバブルは、Androidの9つのパッチイメージを使用して行われます。以下は

が私のチャットアクティビティのレイアウトで、問題とListViewmessageHistoryListです:

<?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; 
    } 
} 
+0

「チャットバブル」とはどういう意味ですか? – ethan

+0

チャットバブルは、キャラクターの言葉を含む漫画本のバブルです。何人かの人々はそれをスピーチバブルと呼びます。 eBuddyのようなAndroidアプリは、あなたの友人とチャットしているときにそれを使用します。 – user1125567

+0

あなたはこれの解決策を見つけましたか? – juned

答えて

5

利用のLinearLayoutの代わりに、相対レイアウト。あなたの問題を解決します。私は同じ問題を抱えていた。 LinearLayoutを使用して解決しました

関連する問題