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

本文关键字：高度 项目 listview 同步 MvvmCross 何用 | 更新日期: 2023-09-27 18:10:53

我正在开发一个应用程序，需要显示带有文本的图像的两列，并同步其滚动(类似pinterest)。

//////////////////
/,,,,,,,,,,,,,,,,/
/,,, Image ,,/
/,,,,,,,,,,,,,,,,/
//////////////////
/,,,, Text ,,,,/
//////////////////
/,,,, Text ,,,/
//////////////////

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

<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的目的是使用一个查询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

我试图实现自定义ListView描述的答案，但我无法把两个ListView同步(不想重写)OnScrollChanged方法，因为我尝试了，其中两个之间有延迟)。我还需要控制每个项目的高度，所以没有办法让一个ListView与两个自定义项目在上面的图片。

是否有任何方法我可以实现与ListView与自定义适配器的线性布局?或者使用ScrollView，修改适配器?

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

您可以使用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; 
};
相关文章：