Marc Bruins

Hi i'm @MarcBruins. A Xamarin & Microsoft MVP & work as a cloud architect, i also speak at conferences, and contribute to opensource

© 2019. All rights reserved.

Binding lists with iOS and MvvmCross

29 Jan 2017

In this part we will bind the list of monkeys created in my previous blogpost to a tableview for iOS. If you want to skip Android and want to use it only for iOS be sure to have the same core code that we wrote in the previous post. The source code is available here: https://github.com/MarcBruins/MonkeyList

Adding monkeys to iOS

To show a list of monkeys for iOS we need todo the following:

  1. Create a custom cell to display our monkeys
  2. Create a new View and a NIB called “MonkeysView”
  3. Add a UITableView to the view and expose the property
  4. Wire it all up

In iOS we need to have a way of downloading the image. For Android we used the DowloadCache and the File plugin from MvvmCross. This plugin is also available for iOS and will help us out. Go ahead and add the following nuget packages to your iOS project:

Creating a custom cell

The first we thing we will do is add a new folder to the root of the project called “Views”. So go ahead and do that. After that right click the views folder and click “Add new file”. Click “iOS” and select a “Table View Cell”, name it “MonkeyCell”.

MonkeysViewCell design

Open the “MonkeyCell.xib” and design the cell however you want. You are free to do as you please as long as you expose the properties that you use so we can bind to them. My cell looks like this:

My cell height is 130, we should remember this because we need it later.

MonkeysViewCell class

Now that we made the design and exposed our properties it’s time to bind them. Bind your items in the cell and make sure that you extend from MvxTableViewCell. We also want to download the image and display it. For this we will use the the DownloadCache and File plugin. The binding is as usual only we will bind our item inside the Action of the “DelayBind” which knows when to bind the items.

using System;
using Foundation;
using MvvmCross.Binding.BindingContext;
using MvvmCross.Binding.iOS.Views;
using UIKit;
namespace MonkeyList.Core.iOS
{
public partial class MonkeyCell : MvxTableViewCell
{
public static readonly NSString Key = new NSString("MonkeyCell");
public static readonly UINib Nib;
static MonkeyCell()
{
Nib = UINib.FromName("MonkeyCell", NSBundle.MainBundle);
}
protected MonkeyCell(IntPtr handle) : base(handle)
{
var imageViewLoader = new MvxImageViewLoader(() => monkeyImage);
// Note: this .ctor should not contain any initialization logic.
this.DelayBind(() =>
{
var set = this.CreateBindingSet<MonkeyCell, Monkey>();
set.Bind(imageViewLoader).To(m => m.Image);
set.Bind(nameLabel).To(m => m.Name);
set.Bind(originLabel).To(m => m.Location);
set.Bind(descriptionLabel).To(m => m.Details);
set.Apply();
});
}
}
}
view raw MonkeyCell.cs hosted with ❤ by GitHub

That’s it for our MonkeyCell!

Creating the MonkeysView

The first we thing we will do is add a new folder to the root of the project called “Views”. So go ahead and do that. After that right click the views folder and click “Add new file”. Click “iOS” and select a ViewController, name it “MonkeysView”.

MonkeysView design

We now should have a “MonkeysView.cs” with a “MonkeysView.designer.cs” and a “MonkeysView.xib”. Open the MonkeysView.xib and add a UITableView with the left/top/right/bottom constraints set to 0 so that it fills the whole parent view.

After that expose the property UITableView so that we can acces it in our “MonkeysView”.

MonkeysView class

Now that we can access the UITableView we can bind our list of monkeys to the tableview source. In this post we will only use 1 type of cell, therefore we can use the MvxSimpleTableViewSource. If you have multiple types of cells you can extend the “MvxTableViewSource” and make your own implementation. We will create a bindingset that binds our “MvxTableViewSource” to the “MvxObseravableCollection” in our ViewModel and set that as the source of our own “MonkeyTableView”. We should also set the 130 height of our cell here.

using System;
using MonkeyList.Core.ViewModels;
using MvvmCross.Binding.BindingContext;
using MvvmCross.Binding.iOS.Views;
using MvvmCross.iOS.Views;
using UIKit;
namespace MonkeyList.Core.iOS
{
public partial class MonkeysView : MvxViewController<MonkeysViewModel>
{
public MonkeysView() : base("MonkeysView", null)
{
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
// Perform any additional setup after loading the view, typically from a nib.
NavigationItem.Title = "Monkeys";
var source = new MvxSimpleTableViewSource(MonkeyTableView, "MonkeyCell", MonkeyCell.Key);
MonkeyTableView.RowHeight = 130;
var set = this.CreateBindingSet<MonkeysView, MonkeysViewModel>();
set.Bind(source).To(vm => vm.Monkeys);
set.Apply();
MonkeyTableView.Source = source;
MonkeyTableView.ReloadData();
}
}
}
view raw MonkeysView.cs hosted with ❤ by GitHub

That’s it, were done! If you run the application you should have a list of monkeys! If you have questions or you see a mistake that must be fixed, feel free to add a comment.

Related Posts