Corrado's Blog 2.0

Online thoughts of a technology funatic

Xamarin: Infinite scrolling list in iOS app

I’ve spend the last few weeks studying Xamarin, not because I’m considering abandoning the Windows platform but because I think it’s clear that, as developer, we need to take note that there are other big platforms with which it is right to live with.

While not yet mature and in some cases quite cumbersome, my experience with it was highly positive and I absolutely recommend it in case you need to create Android and/or iOS applications.

This post comes from a need I had during development of a iOS application: Create an infinite scrolling list of data starting from paged data coming from a REST service.

Note: I’m a Xamarin beginner so this might not be the perfect solution, but it worked fine in my case.

To get infinite scrolling I created a custom UITableSource

public class BookedCarsTableViewSource : UITableViewSource
    {
        private readonly DataService dataService;
        private readonly PagedResult<BookedCarResponse> firstPage;
        private readonly List<BookedCarResponse> bookedCars;
        private int pageIndex;
        private bool isFetching;

        private const string cellId = "bookedCarCell";

        public BookedCarsTableViewSource(DataService dataService, PagedResult<BookedCarResponse> firstPage)
        {
            this.dataService = dataService;
            this.firstPage = firstPage;
            this.bookedCars = firstPage.Result.ToList();
            this.pageIndex = 0;
        }

        public override int RowsInSection(UITableView tableview, int section)
        {
            return (int)Math.Max(this.bookedCars.Count, this.firstPage.TotalCount);
        }

        public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
        {
            int index = indexPath.Row;
            UITableViewCell cell = tableView.DequeueReusableCell(cellId) ?? new UITableViewCell(UITableViewCellStyle.Subtitle, cellId);
            BookedCarResponse bookedCar = this.bookedCars[index];
            cell.TextLabel.Text = bookedCar.CarPlate;
            cell.DetailTextLabel.Text = bookedCar.CompanyName;            
            if (!this.isFetching && this.pageIndex < this.firstPage.TotalPages && index > this.bookedCars.Count * 0.8)
            {
                this.isFetching = true;
                Task.Factory.StartNew(this.LoadMore);
            }

            return cell;
        }

        private async void LoadMore()
        {
            this.pageIndex++;
            var nextPage = await this.dataService.GetBookedCars(this.pageIndex, this.firstPage.PageSize);
            this.bookedCars.AddRange(nextPage.Result);
            this.isFetching = false;
        }
    }

As you see the trick is inside GetCell, when requested index is near the end of currently available items I spin a new request and add results to bookedCars collection.

In order to get initial block of items I used this code inside related controller:

public class BookedCarsScreenController : UITableViewController
    {
        private PagedResult<BookedCarResponse> firstPage;

        public override async void ViewDidLoad()
        {
            base.ViewDidLoad();
            this.firstPage = await DataManager.Current.GetBookedCars(0, 30);
            this.TableView.Source = new BookedCarsTableViewSource(DataManager.Current, firstPage);
            this.TableView.ReloadData();
        }
    }

I had to invoke TableView’s ReloadData otherwise list was appearing initially empty.

Note that since I’m using Subtitle layout I didn’t find the way to use  iOS 6 automatic cell reuse mode.

Hope it helps! Smile