c# - RecyclerView 中的 OxyPlot -MVVMCross Xamarin.Android

Question

我有以下实现，其中有回收器 View ，在每个 View 中我都尝试使用 OxyPlot 显示数据。

我可以在每张卡片上看到硬编码的 Plotvalues，但是当我滚动时，它的响应有点慢，应用程序会卡住一段时间。我想知道我做错了什么或如何改善这个性能问题？

主视图.xml

<MvxRecyclerView
  android:id="@+id/myRecyclerView"
  android:layout_marginTop="10dp"
  android:scrollbars="vertical"
  android:divider="@null"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  local:MvxItemTemplate="@layout/mycardview" />

mycardview.xml

<RelativeLayout
    android:layout_width="200dp"
    android:layout_height="match_parent">
    <oxyplot.xamarin.android.PlotView
       android:id="@+id/Plot"
       android:layout_width="match_parent"
       android:layout_height="match_parent" /> 
</RelativeLayout>

MainView.cs

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{ 
   var ignored = base.OnCreateView(inflater, container, savedInstanceState);
   var view = this.BindingInflate(Resource.Layout.MainView, null);
   HasOptionsMenu = true;
   var cardRecyclerView = view.FindViewById<MvxRecyclerView>(Resource.Id.myRecyclerView);
   if (cardRecyclerView != null)
   {
       cardRecyclerView.HasFixedSize = false;
       cardRecyclerView .Adapter = new MainViewRecyclerAdapter((IMvxAndroidBindingContext)BindingContext, Activity);
       var layoutManager = new LinearLayoutManager(Activity);
       cardRecyclerView.SetLayoutManager(layoutManager);
    }

  return view;
}

MainViewRecyclerAdapter.cs

public class MainViewRecyclerAdapter : MvxRecyclerAdapter
{

  private readonly FragmentActivity _activity;
  public MainViewRecyclerAdapter(IMvxAndroidBindingContext bindingContext, FragmentActivity activity)
        : base(bindingContext)
  {
      _activity = activity;
  }

  public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)
  {
      base.OnBindViewHolder(holder, position);

      var view = holder.ItemView;
      var cardOptionsButton = view.FindViewById<PlotView>(Resource.Id.Plot);
      MainViewModel MyMainViewModel = new MainViewModel();
      cardOptionsButton.Model = MyMainViewModel.MyModel;
   }
}

MyMainViewModel.cs

public class MyViewModel : MvxViewModel
{
    public MyViewModel()
    {
        GeneratePlotPoints();
    }

    void GeneratePlotPoints()
    {
        var mo = new PlotModel();
        var s1 = new LineSeries()
        {
            Color = OxyColors.SkyBlue,
            MarkerType = MarkerType.Circle,
            MarkerSize = 6,
            MarkerStroke = OxyColors.White,
            MarkerFill = OxyColors.SkyBlue,
            MarkerStrokeThickness = 1.5
        };
        s1.Points.Add(new DataPoint(0, 10));
        s1.Points.Add(new DataPoint(10, 40));
        s1.Points.Add(new DataPoint(40, 20));
        s1.Points.Add(new DataPoint(60, 30));
        mo.Series.Add(s1);
        MyModel = mo;
    }

    PlotModel _myModel;
    public PlotModel MyModel
    {
        get { return _myModel; }
        set { SetProperty(ref _myModel, value); }
    }
}

Answer 1

我没能从问题中得到你的例子。但是，您可以尝试将数据(绘图点)绑定(bind)到布局，而不是将 ViewModel 重新构造为 Adapter 中的标准类对象.

---

实现示例:

View 模型

为简单起见，我刚刚创建了一个简单的 ObservableCollection，其中包含重复几次的相同绘图点组(图形形状)。 更新: 作为 PlotModel can only be used once in an PlotView您必须确保 PlotModel 始终是一个新实例。

public class MyViewModel : BaseViewModel
{
    PlotModel GeneratePlotPoints()
    {
        var mo = new PlotModel();
        var s1 = new LineSeries()
        {
            Color = OxyColors.SkyBlue,
            MarkerType = MarkerType.Circle,
            MarkerSize = 6,
            MarkerStroke = OxyColors.White,
            MarkerFill = OxyColors.SkyBlue,
            MarkerStrokeThickness = 1.5
        };

        s1.Points.Add(new DataPoint(0, 10));
        s1.Points.Add(new DataPoint(10, 40));
        s1.Points.Add(new DataPoint(40, 20));
        s1.Points.Add(new DataPoint(60, 30));
        mo.Series.Add(s1);

        return mo;
    }

    List<PlotModel> GenerateGraph()
    {
        var graphPlots = new List<PlotModel>();
        int counter = 0;

        while (counter < 10)
        {
            graphPlots.Add(GeneratePlotPoints());
            counter++;
        }

        return graphPlots;
    }

    public List<PlotModel> GraphPlots => GenerateGraph();
}

布局

RecyclerView 的主布局。

<MvxRecyclerView
    android:id="@+id/myRecyclerView"
    android:layout_marginTop="10dp"
    android:scrollbars="vertical"
    android:divider="@null"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    local:MvxBind="ItemsSource GraphPlots"
    local:MvxItemTemplate="@layout/mycardview" />

mycardview 布局模板。请注意，点的使用用于告诉 Mvx 绑定(bind)到整个模型(在本例中为 PlotModel)，但它也可以留空(Mvx doc link)。

<?xml version="1.0" encoding="utf-8" ?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <oxyplot.xamarin.android.PlotView
     android:id="@+id/Plot"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     local:MvxBind="Model ."/>
</RelativeLayout>

查看

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{ 
   var ignored = base.OnCreateView(inflater, container, savedInstanceState);
   var view = this.BindingInflate(Resource.Layout.MainView, null);
   HasOptionsMenu = true;
   var cardRecyclerView = view.FindViewById<MvxRecyclerView>(Resource.Id.myRecyclerView);
   if (cardRecyclerView != null)
   {
       cardRecyclerView.HasFixedSize = false;
       var layoutManager = new LinearLayoutManager(Activity);
       cardRecyclerView.SetLayoutManager(layoutManager);
    }

    return view;
}

---

更新 - 包括屏幕截图