MVVMCross：創建消息傳遞泡泡列表視圖樣式

我想創建一個類似於listview的泡泡對話。MVVMCross：創建消息傳遞泡泡列表視圖樣式

例如，通過Facebook使用Messenger。

而我的問題是：如何爲每條消息（發送和接收）創建一個MvxItemTemplate？

當我發送消息時，我想用我的item_sendedmessage.xml 但是，當我收到一個消息，這是我item_receivedmessage.xml

我不知道如何使用轉換（比如Xamarin表格）。

我MessageEntity

public class MessageEntity 
{ 
    public string Message { get; set; } 
    public bool IsSended { get; set; } 
}

而我的列表（RecyclerView）

<MvvmCross.Droid.Support.V7.RecyclerView.MvxRecyclerView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:MvxBind="ItemsSource Messages" 
     android:layout_weight="1" />

當我messageEntity.IsSended =真實的，我想用我的ItemTemplate權用紅色，而當它是假的，藍色和左。

感謝

編輯：Found的ListView控件，但不是RecyclerView

編輯2：

item_sendedmessage.axml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       xmlns:app="http://schemas.android.com/apk/res-auto" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       //NOT WORKING -> 
       android:layout_gravity="right" 
       //NOT WORKING -> 
       android:background="@drawable/sended_message_style" 
       android:layout_margin="10dp" > 

    <TextView 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:textColor="@color/whiteColor" 
    app:MvxBind="Text Message"> 

    </TextView> 

</LinearLayout>

來源

2017-05-12 Naografix

您可以添加一個新類到您的Droid項目，實現了IMvxTemplateSelector接口。這是一個簡單的實現界面。在GetItemLayoutId您將返回Resource.Layout。取決於消息的發送者。這裏有一個例子：

public class MessageItemTemplate : IMvxTemplateSelector 
{ 
    protected const int FromDriver = 0; 
    protected const int FromOther = 1; 
    protected readonly string DriverEmployeeId; 

    public MessageItemTemplate(string driverEmployeeId) 
    { 
     DriverEmployeeId = driverEmployeeId; 
    } 

    public int GetItemViewType(object forItemObject) 
    { 
     var messageModel = forItemObject as MessageModel; 
     if (messageModel == null) return FromOther; 
     return messageModel.SenderId == DriverEmployeeId ? FromDriver : FromOther; 
    } 

    public int GetItemLayoutId(int fromViewType) 
    { 
     switch (fromViewType) 
     { 
      case FromDriver: 
       return Resource.Layout.listitem_message_from_driver; 
      default: 
       return Resource.Layout.listitem_message_from_peer; 
     } 
    } 
}

最後，你可以將此模板選擇與RecyclerView通過代碼相關聯：

var mvxRecyclerView = FindViewById<MvxRecyclerView>(Resource.Id.messages_recycler); 
if (_mvxRecyclerView != null) 
{ 
    _mvxTemplateSelector = new MessageItemTemplate("TEST"); 
    _mvxRecyclerView.ItemTemplateSelector = _mvxTemplateSelector; 
    var layoutManager = new LinearLayoutManager(this) 
    { 
     StackFromEnd = true 
    }; 
    _mvxRecyclerView.SetLayoutManager(layoutManager); 
}

您可以使用MvvmCross顏色插件控制顏色，或只使用兩個不同的模板就像我在上面的示例代碼中所做的一樣。

來源

2017-05-12 14:05:38

感謝您的回答，它的工作原理，但是我發送的消息在左引力中，而不在右邊。檢查我原來的帖子。 – Naografix

你可以通過改變LinearLayout到RelativeLayout來解決這個問題。然後你的'TextView'就可以在XML中改變'android：layout_alignParentRight =「true」'或代碼中'RelativeLayout.LayoutParams'。 –

MVVMCross：創建消息傳遞泡泡列表視圖樣式

回答

相關問題