MVVMCross：メッセージングバブルリストビュースタイルを作成する

Question

リストビューのようにバブル会話を作成したい。

たとえば、Facebookでメッセンジャーを利用します。

私の問題は次のとおりです。どのように（送信され、受信された）各メッセージに対してMvxItemTemplateを作成するのですか？

私がメッセージを送信すると、私は私のitem_sendedmessage.xml を使用したいが、私はメッセージを受信したとき、それは私が（Xamarinフォームなど）、変換を使用する方法がわからない私のitem_receivedmessage.xml

です。

マイ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にを使用したい場合は、それは偽だとき、青と左。

おかげ

EDIT：ListViewのためのFoundなくRecyclerView

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

Answer 1

ました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色のプラグインを使用して色を制御、またはちょうど2つの異なるテンプレートを使用することができます上記の例のコードのように。