RecyclerView 中的 OxyPlot -MVVMCross Xamarin.Android

Posted 2023-04-01

【中文标题】RecyclerView 中的 OxyPlot -MVVMCross Xamarin.Android

【英文标题】：OxyPlot in RecyclerView -MVVMCross Xamarin.Android

【发布时间】：2016-11-14 22:19:44

【问题描述】：

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

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

MainView.xml

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

mycardview.xml

<RelativeLayout
    android:layout_
    android:layout_>
    <oxyplot.xamarin.android.PlotView
       android:id="@+id/Plot"
       android:layout_
       android:layout_ /> 
</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); 
    

【问题讨论】：

您的“sAll”列表在您的 ViewModel 中是什么样子的？您应该能够使用类似于***.com/questions/38316666/… 的 XML 绑定，但基于您列表中的模型。

我已经用工作示例更新了我的问题，但现在我遇到了性能问题。当我将每个情节放在每张卡片上并滚动它们时，速度很慢。我想知道我哪里做错了？

【参考方案1】：

我无法从问题中得到你的例子。但是，您可以尝试将数据（绘图点）绑定到您的布局，而不是将您的 ViewModel 重新构建为 Adapter 中的标准类对象。

---

实现示例：

视图模型

为简单起见，我刚刚创建了一个简单的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_
    android:layout_
    local:MvxBind="ItemsSource GraphPlots"
    local:MvxItemTemplate="@layout/mycardview" />

mycardview 布局模板。请注意，该点用于告诉 Mvx 绑定到整个模型（在本例中为 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_
    android:layout_>
  <oxyplot.xamarin.android.PlotView
     android:id="@+id/Plot"
     android:layout_
     android:layout_
     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;

---

更新 - 包括屏幕截图

【讨论】：

非常感谢您的所有努力以及清晰的解释。

没问题，很高兴它有帮助。

@Placeholder，我刚刚有机会测试您的解决方案，但由于某种原因没有任何显示。你测试了吗？

在我看来local:MvxBind="Model ." 不起作用。你加了Custom Bindings 吗？如果是，请您也包括它吗？

@hotspring，你可以查看GitHub sample，OxyPlot 的东西可以在 HelpAndFeedback 部分找到。希望对您有所帮助。