如何使用 MvvmCross 制作具有不同高度项目的同步 ListView？

Question

我正在开发一个应用程序，它需要显示两列带有文本的图像并同步它们的滚动（类似于 Pinterest）。

//////////////////
/ /
/ 图片 /
/ /
//////////////////
/ 文本 /
//////////////////
/ 文本 /
//////////////////

到目前为止，我使用以下布局来实现。

<ScrollViewEx
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="30"
    android:scrollbars="none"
    android:overScrollMode="never">
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:gravity="center_horizontal"
        android:shrinkColumns="0,1"
        android:stretchColumns="0,1">
        <TableRow
            android:id="@+id/tableRow"
            android:layout_width="fill_parent">
            <MvxLinearLayoutCustomAdapter
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:id="@+id/left_layout"
                android:padding="10dp"
                local:MvxBind="ItemsSource items1"
                local:MvxItemTemplate="@layout/custom_item" />
            <MvxLinearLayoutCustomAdapter
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:id="@+id/right_layout"
                android:padding="10dp"
                local:MvxBind="ItemsSource items2"
                local:MvxItemTemplate="@layout/custom_item" />
        </TableRow>
    </TableLayout>
</ScrollViewEx>

请注意，我为该 LinearLayout 使用了自定义适配器，目的是使用 AQuery C# 绑定将图像加载到自定义项目布局中的 ImageView 中，并为图像设置各种高度（以制作瀑布 UI）。我的适配器代码是：

public class MvxClickableLinearLayoutAdapter : MvxAdapterWithChangedEvent
{
    IEnumerable<ItemViewModel> src;
    Bitmap imgLoading;
    Context _context;
    public MvxClickableLinearLayoutAdapter(Context context)
        : base(context)
    {
    }

    protected override View GetView(int position, View convertView, ViewGroup parent, int templateId)
    {
        AQuery aq = null;
        var view = convertView;
        if (view == null)
            view = base.GetView(position, convertView, parent, templateId);
        aq = new AQuery(view);
        if (imgLoading == null)
            imgLoading = aq.GetCachedImage(Resource.Drawable.load);
        if (src == null)
            src = (parent as MvxLinearLayout).ItemsSource.Cast<ItemViewModel>();
        var item = src.ElementAt(position);
        var imageUrl = item.ImageUrl;

        var img = (AQuery)aq.Id(Resource.Id.news_img); 

        img.Image(imageUrl, false, false, 0, 0, imgLoading, 0);
        img.Height(item.Height, true);
        return view;
    }

我的问题是性能。适配器加载所有元素，这使我无法使用 ViewHolder 模式。即使我加载了大量项目，适配器也不会尝试重用以前加载的视图并使我的滚动不那么流畅。我假设发生这种情况是因为我使用了 ScrollView。所以我认为我的答案是 ListView。

我尝试按照 answer 中的描述实现自定义 ListView，但我无法将两个 ListView 同步（不想覆盖 OnScrollChanged 方法，因为我试过了，其中两个之间有延迟）。我还需要控制每个项目的高度，所以无法像上图那样用两个自定义项目制作一个 ListView。

有什么方法可以通过带有自定义适配器的 LinearLayouts 的 ListView 实现吗？或者使用 ScrollView，也许通过修改适配器？提前致谢。

Answer 1

您可以使用 MvxRecyclerView。那个应该更适合性能，并且有一些滚动事件的挂钩。

您可以像这样使用适配器：

var recyclerView = view.FindViewById<MvxRecyclerView>(Resource.Id.my_recycler_view); 
if (recyclerView != null) { 
    recyclerView.Adapter = new MyRecyclerViewAdapter((IMvxAndroidBindingContext)BindingContext); 
}

然后将滚动添加到第二个列表：

recyclerView1.ScrollChange += (object sender, View.ScrollChangeEventArgs e) => { 
    recyclerView2.ScrollY = e.ScrollY; 
};

如何使用 MvvmCross 制作具有不同高度项目的同步 ListView？

How to make synchronized ListViews with items of different height with MvvmCross?

c#

xamarin.android

android-listview

mvvmcross

xamarin