MVVMCross: créer un style de liste de bulles de messagerie

Question

Je veux créer une conversation bulle comme avec une liste. Par exemple, prenez Messenger par Facebook. Par exemple, prenez Messenger par Facebook.

Et mes problèmes sont: comment créer un MvxItemTemplate pour chaque message (envoyé et reçu)?

Lorsque j'envoie un message, je veux utiliser mon item_sendedmessage.xml Mais quand je reçois un message, il est mon item_receivedmessage.xml

Je ne sais pas comment utiliser converti (comme Xamarin Forms).

Mon MessageEntity

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

Et ma liste (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" /> 

Quand mes messageEntity.IsSended = true, je veux utiliser mon droit ItemTemplate avec la couleur rouge, et quand il est faux, bleu et à gauche.

Merci

EDIT: Found pour ListView mais pas pour 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

Vous pouvez ajouter une nouvelle classe à votre projet Droid qui implémente l'interface IMvxTemplateSelector. C'est une interface simple à implémenter. Dans GetItemLayoutId vous retournerez le Resource.Layout. en fonction de l'expéditeur du message. Voici un exemple:

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

Enfin, vous pouvez associer ce sélecteur de modèle avec le RecyclerView via le code:

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

Vous pouvez contrôler la couleur en utilisant le plugin couleur MvvmCross, ou tout simplement utiliser deux modèles différents comme je l'ai fait dans l'exemple de code ci-dessus.