Android MVVM Cross v3 - 如何创建具有交替行颜色的 ListView答案

【问题标题】：Android MVVM Cross v3 - How to Create a ListView with alternating row coloursAndroid MVVM Cross v3 - 如何创建具有交替行颜色的 ListView
【发布时间】：2013-07-30 15:05:50
【问题描述】：

我想为每行创建一个具有交替背景颜色的 ListView。

总的来说，我是 Android 开发的新手，更不用说 Xamarin 和 MVVMCross 了 :)

在 Android 世界和 Xamarin 世界中有一些这样做的示例，但我不知道如何以 MVVM 交叉方式进行设置。

我的理解是，我需要在 Android 特定的视图代码中实现这一点，为此我需要在 ListView 上设置一些适配器，以便在呈现每个 List 项时以编程方式设置它们的背景颜色。

我找到了这个例子：

https://github.com/slodge/MvvmCross-Tutorials/tree/master/Working%20With%20Collections/Collections.Droid

但是，一旦实现，我发现在显示视图时，我的CustomAdapter : MvxAdapter 上没有调用以下方法：

GetBindableView, GetSimpleView, GetBindableView, GetView

我也发现了这个未回答的问题

Issue with custom listview using mono droid and mvvmcross

其中使用了MvxBindableListAdapter，似乎已经不存在了。

谁能指出我正确的方向？

这里是涉及到的各种代码sn-ps：

TradeBookingResponseView.axml 拥有这个：

<Mvx.MvxListView
  android:id="@+id/TradeConfirmation"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  local:MvxBind="ItemsSource OpenTradeListItems"
  local:MvxItemTemplate="@layout/item_confirmation"
/>

在其LinearLayout内

item_confirmation.axml 是这样的：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/tradingStateIcon"
    xmlns:local="http://schemas.android.com/apk/res-auto">
    <TextView
      android:layout_weight="0.35"
      android:text="Field"
      android:textAppearance="?android:attr/textAppearanceMedium"
      android:layout_width="0dip"
      android:layout_height="wrap_content"
      android:layout_marginLeft="10dip"
      android:id="@+id/tradeConfirmationField"
      local:MvxBind="Text Field" />
    <TextView
      android:layout_weight="0.65"
      android:text="Value"
      android:textAppearance="?android:attr/textAppearanceMedium"
      android:layout_width="0dip"
      android:layout_height="wrap_content"
      android:id="@+id/tradeConfirmationValue"
      local:MvxBind="Text Value"/>
</LinearLayout>

TradeBookingResponseViewModel 公开了这一点

public ObservableCollection<ConfirmationItem> OpenTradeListItems
{
    get
    {
        return openTradeListItems;
    }
    set
    {
        if (!Equals(value, openTradeListItems))
        {
            openTradeListItems = value;
            RaisePropertyChanged(() => OpenTradeListItems);
        }
    }
}

而视图代码是

public class TradeBookingResponseView : ViewBase
{
    public TradeBookingResponseView() : base(Resource.Layout.TradeBookingResponseView)
    {

    }

    protected override void OnViewModelSet()
    {
        SetContentView(Resource.Layout.TradeBookingResponseView);
        var list = FindViewById<ListView>(Resource.Id.TradeConfirmation);
        list.Adapter = new CustomAdapter(this, (IMvxAndroidBindingContext) BindingContext);
    }
}

public class CustomAdapter : MvxAdapter
{
    public CustomAdapter(Context context) : base(context)
    {
    }

    public CustomAdapter(Context context, IMvxAndroidBindingContext bindingContext) : base(context, bindingContext)
    {
    }

    protected override View GetBindableView(View convertView, object dataContext)
    {
        convertView.SetBackgroundColor(Color.Red);
        return base.GetBindableView(convertView, dataContext);
    }
}

ViewBase 扩展 MvxActivity 的地方

我设置红色只是为了看看它是否被调用（它没有）。根据更多 Android-y 示例，我想使用 View GetView(int position, View convertView, ViewGroup parent) 来查看项目的位置，所以我可以对其执行 % 2 （这也没有调用）。

【问题讨论】：

标签： android mvvm xamarin mvvmcross

【解决方案1】：

尝试在基本方法之后设置颜色 - 例如

public override GetView(int position, View convertView, ViewGroup parent) 
{
      var v = base.GetView(position, convertView, parent);
      v.SetBackgroundColor( I %2 == 0 ? Color.Red : Color.Blue);
      return v;
}

如果您愿意，也可以对背景颜色进行数据绑定

【讨论】：

【解决方案2】：

以下是如何使用背景进行数据绑定，在您的自定义表格模板 (item_confirmation) 中，将我的 RowItem.RowId 替换为您的 OpenTradeListItems 列表的 id：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    ...
    local:MvxBind="BackgroundColor BackgroundColor(RowItem.RowId)">

这是 BackgroundColor 转换器：

public class BackgroundColorValueConverter : MvxColorValueConverter
{
    protected override MvxColor Convert(object value, object parameter, System.Globalization.CultureInfo culture)
    {
        return (int)value % 2 != 0 ? BusinessConstants.ThirdAlternateBGColor : null;
    }
}

【讨论】：