像列表視圖Android佈局聊天

我試圖做一個類似聊天的視圖使用列表視圖，其中的消息顯示左側和右側。用於左消息標記是像列表視圖Android佈局聊天

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="5dp" 
    android:gravity="left"> 

    <TextView 
     android:id="@+id/MessageListItemText" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textColor="#000000" 
     android:background="@drawable/RoundedCornersBlue" 
     android:padding="8dp" 
     android:text="realy long realy long realy long realy long realy long realy long realy long realy long " 
     android:layout_marginRight="5dp" /> 
    <TextView 
     android:id="@+id/MessageListItemDate" 
     android:layout_width="wrap_content" 
     android:layout_height="fill_parent" 
     android:textColor="#cbc4b1" 
     android:text="23:11" 
     android:gravity="center_horizontal|center_vertical" /> 
</LinearLayout>

但第二TextView的（時間戳）丟失。

http://i.stack.imgur.com/JxDXQ.jpg

正確的信息有以下標記

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="5dp" 
    android:gravity="right"> 
    <TextView 
     android:id="@+id/MessageListItemDate" 
     android:layout_width="wrap_content" 
     android:layout_height="fill_parent" 
     android:textColor="#cbc4b1" 
     android:text="12:34" 
     android:gravity="center_horizontal|center_vertical" /> 
    <TextView 
     android:id="@+id/MessageListItemText" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textColor="#000000" 
     android:text="realy long realy long realy long realy long realy long realy long realy long realy long " 
     android:background="@drawable/RoundedCornersBlue" 
     android:padding="8dp" 
     android:layout_marginLeft="5dp" /> 
</LinearLayout>

http://i.stack.imgur.com/1MnyW.jpg

這一個看起來像我想這一點。左側和右側之間的唯一區別是LinearLayout的android：重力和LinearLayout中的文本視圖的順序。

任何想法我做錯了什麼？或者我如何能實現這種類型的設計

的謝謝，米哈伊

來源

2012-10-31 Mihai

（與問題無關，但仍然）您的線性佈局的重力會被忽略，因爲佈局是水平的。只能使用垂直相關的重力。（反之亦然，垂直方向的水平重力） – njzk2

你並不需要創建聊天兩個不同的XML。你可以單獨做到這一點。

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" > 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" > 

     <TextView 
      android:id="@+id/txtsenderdt" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="left|center" 
      android:text="07:03" 
      android:textColor="@android:color/darker_gray" 
      android:textSize="18dp" 
      android:textStyle="bold" /> 

     <TextView 
      android:id="@+id/txtsender" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="left" 
      android:background="@drawable/chat1" 
      android:text="realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long" 
      android:textSize="18dp" /> 
    </LinearLayout> 

</LinearLayout>

來源

2012-10-31 10:11:13 juned

謝謝，但這並沒有真正回答我的問題。我想在郵件旁邊添加一個時間戳：對於左側郵件，時間戳需要在郵件正確的位置，對於正確的郵件，這是另一種方式 – Mihai

我已更新我的answer.check此並讓我知道，如果有問題 – juned

沒有幫助。如果你添加一個非常長的文本會發生什麼？另外，我的設計完成使用不同的消息 – Mihai

因爲你是在消息使用左側LinearLayout與orientation="horizontal"第一TextView填補所有可用空間。所以你必須改變LinearLayout到RelativeLayout這樣

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="5dp" 
    android:gravity="left"> 

    <TextView 
     android:id="@+id/MessageListItemDate" 
     android:layout_width="wrap_content" 
     android:layout_alignParentRight="true" 
     android:layout_height="fill_parent" 
     android:textColor="#cbc4b1" 
     android:text="23:11" 
     android:gravity="center_horizontal|center_vertical" /> 

    <TextView 
     android:id="@+id/MessageListItemText" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textColor="#000000" 
     android:layout_toLeftOf="@id/MessageListItemDate" 
     android:background="@drawable/RoundedCornersBlue" 
     android:padding="8dp" 
     android:text="realy long realy long realy long realy long realy long realy long realy long realy long " 
     android:layout_marginRight="5dp" /> 
</RelativeLayout>

來源

2012-10-31 10:14:47 vasart

謝謝，但它只適用於長文本。嘗試添加一個簡短的文字。它將對齊到右邊而不是左邊 – Mihai

我希望時間戳總是在消息旁邊，無論它是短消息還是長消息 – Mihai

好吧，用android：layout_width替換'android：layout_width =「wrap_content」'' ='MessageListItemText'中的「fill_parent」' – vasart

我最近遇到了相同問題。儘管你前一段時間尋找答案，但對其他人來說，它可能會派上用場。下面是我如何處理它：

這是我的conversation_item XML代碼，默認情況下都站在左邊：

<?xml version="1.0" encoding="utf-8"?> 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:id="@+id/conversationItemRelativeLayout" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:paddingTop="5dp" 
       android:paddingBottom="5dp" 
       android:paddingLeft="11dp" 
       android:paddingRight="11dp" 
       > 

    <ImageView 
      android:id="@+id/conversationUserImage" 
      android:layout_width="60dp" 
      android:layout_height="60dp" 
      android:background="@drawable/my_ears_placeholder_grey_background" 
      android:layout_alignBottom="@+id/conversationBubble" 
      /> 

    <TextView 
      android:id="@+id/conversationDate" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Time Ago" 
      android:layout_below="@id/conversationUserImage" 
      android:layout_marginTop="5dp" 

      /> 

    <TextView 
      android:id="@+id/conversationBubble" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_toRightOf="@id/conversationUserImage" 
      android:text="Exemple Text" 
      android:background="@drawable/bubbleleft" 
      android:gravity="center" 
      /> 

    <ImageView 
      android:id="@+id/messagePicture" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_toRightOf="@id/conversationUserImage" 
      android:gravity="center" 
      /> 

</RelativeLayout>

然後，而不是重複個XML的，我在代碼中設置的佈局變化，一種方法稱爲我的自定義適配器：

private View getConversationItem(Message message) { 

     View view = LayoutInflater.from(ConversationActivity.this).inflate(R.layout.conversation_item, null); 
     ... 

     if (message.iAmOwner()) {   
       conversationBubble.setBackground(getResources().getDrawable(R.drawable.bubbleleft)); 
       messagePicture.setBackground(getResources().getDrawable(R.drawable.bubbleleft));        
       ImageLoader.getInstance().displayImage(myPictureURL, conversationUserImage, options); 
       ... 
     } 
     else {  
       ImageLoader.getInstance().displayImage(senderPictureURL, conversationUserImage, options); 
       conversationBubble.setBackground(getResources().getDrawable(R.drawable.bubbleright)); 
       messagePicture.setBackground(getResources().getDrawable(R.drawable.bubbleright)); 


      RelativeLayout.LayoutParams conversationUserImageParams = (RelativeLayout.LayoutParams)  conversationUserImage.getLayoutParams(); 
      conversationUserImageParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT); 
      conversationUserImage.setLayoutParams(conversationUserImageParams); 

      RelativeLayout.LayoutParams conversationDateParams = (RelativeLayout.LayoutParams)conversationDate.getLayoutParams(); 
      conversationDateParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT); 
      conversationDate.setLayoutParams(conversationDateParams); 

      RelativeLayout.LayoutParams conversationBubbleParams = (RelativeLayout.LayoutParams) conversationBubble.getLayoutParams(); 
      conversationBubbleParams.addRule(RelativeLayout.LEFT_OF,R.id.conversationUserImage); 


      RelativeLayout.LayoutParams messagePictureParams = (RelativeLayout.LayoutParams) messagePicture.getLayoutParams(); 
      messagePictureParams.addRule(RelativeLayout.LEFT_OF,R.id.conversationUserImage); 

      messagePictureParams.removeRule(RelativeLayout.RIGHT_OF); 
      conversationBubbleParams.removeRule(RelativeLayout.RIGHT_OF); 

      conversationBubble.setLayoutParams(conversationBubbleParams); 
      messagePicture.setLayoutParams(messagePictureParams); 

     } 

     return view; 
    }

希望這會有所幫助。乾杯

來源

2013-07-31 16:04:57 Stanislasdrg

我現在正在切換到兩個xml方法，因爲xml中的任何修改都需要修改代碼。它開始很麻煩，因爲我向xml添加了更多的細節。我很不確定它可能引起的性能問題，但將來管理起來會容易得多。 – Stanislasdrg

像列表視圖Android佈局聊天

回答

相關問題