MVVMCross :创建消息气泡列表视图样式

Question

我想创建一个像列表视图一样的气泡对话。

例如，以Facebook的Messenger为例。

我的问题是：如何为每条消息(发送和接收(创建一个 MvxItemTemplate？

当我发送消息时，我想使用我的item_sendedmessage.xml但是当我收到一条消息时，这是我的item_receivedmessage.xml

我不知道如何使用转换(如Xamarin Forms(。

我的消息实体

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

和我的清单(回收者视图(

 <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=true时，我想使用红色的右itemTemplate，当它是假的，蓝色和左边。

谢谢

编辑：为列表视图找到，但为回收器视图找不到

编辑 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接口的 Droid 项目添加一个新类。这是一个要实现的简单接口。在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;
        }
    }
}

最后，您可以通过代码将此模板选择器与回收器视图相关联：

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 Color 插件控制颜色，或者只使用两个不同的模板，就像我在上面的示例代码中所做的那样。