让Xamarin.Forms中ListView支持上滑加载更多


让Xamarin.Forms中ListView支持上滑加载更多

Xamarin.Forms


Xamarin.Forms 是Xamarin平台下的新框架,可以用一套UI代码,做多个平台的App,得到C#程序员们的喜爱,毕竟这代表着生产力大幅度提升。但是正如不完美的人类永远也做不成完美的事物来,xamarin.forms也有一些局限性(当然最新版已经支持在Forms中混合原生控件,解决了不少UI甚至UE上的问题)。例如,一个数据列表页面中,我们ListView很容易通过数据绑定手段实现列表,但是当数据足够多时就有问题了——通过webapi一次加载大量数据,既浪费流量也浪费时间,用户体验也很差(需要等待很久)。所以通常我们会让页面加载前面的一些数据,当用户将列表滑动到底部的时候再加载新的数据,这样循环往复可以不停的拉取新数据加载到列表中。很不幸,Xamarin.Forms的ListView控件默认并不直接支持这个功能。

控件的好处是复用,所以我们可以通过继承ListView,并稍微做一些改动调整来支持上滑到底部加载更多。代码如下:

  1. public class InfiniteListView : ListView
  2. {
  3. public static readonly BindableProperty LoadMoreCommandProperty = BindableProperty.Create(nameof(LoadMoreCommand), typeof(ICommand), typeof(InfiniteListView));
  4. public ICommand LoadMoreCommand
  5. {
  6. get { return (ICommand)GetValue(LoadMoreCommandProperty); }
  7. set { SetValue(LoadMoreCommandProperty, value); }
  8. }
  9. public InfiniteListView()
  10. {
  11. ItemAppearing += InfiniteListView_ItemAppearing;
  12. }
  13. private void InfiniteListView_ItemAppearing(object sender, ItemVisibilityEventArgs e)
  14. {
  15. var items = ItemsSource as IList;
  16. if (items != null && e.Item == items[items.Count - 1])
  17. {
  18. if (LoadMoreCommand != null && LoadMoreCommand.CanExecute(null))
  19. LoadMoreCommand.Execute(null);
  20. }
  21. }
  22. }

在XAML中调用这个控件的方式如下:

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. xmlns:Controls="clr-namespace:Codenutz.XF.Controls;assembly=Codenutz.XF.Controls.InfiniteListView"
  5. x:Class="Codenutz.XF.InfiniteListView.Shared.View.InfiniteListViewSampleView"
  6. Title="{Binding Title}">
  7. <Controls:InfiniteListView
  8. ItemsSource="{Binding MarvelCharacters}"
  9. SelectedItem="{Binding SelectedCharacter}"
  10. LoadMoreCommand="{Binding LoadCharactersCommand}">
  11. </Controls:InfiniteListView>
  12. </ContentPage>

原理很简单,就是当ListView的最后一个Item显示在屏幕上时,执行加载更多命令(LoadMoreCommand)。而我们在这个命令中获取下一页数据并填充到ListView的绑定中即可,尤其当你用MVVM模式开发App时,这会让你很爽。你试试看就知道了。

ListView控件在Xamarin.Forms的App中,还有不少局限,尤其是面对国内的复杂UI设计需求时,经常显得有点乏力,如何应对这些问题,我将在后续的文章中跟大家一起探讨。

特别声明:本文中的控件代码并非老衣原创,而是出自 http://www.codenutz.com/lac09-xamarin-forms-infinite-scrolling-listview/

原文作者:衣明志
原文地址:http://yimingzhi.net/2017/02/xamarin-forms-infinite-list-view

分享到