Binding lists with iOS and MvvmCross29 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:
- Create a custom cell to display our monkeys
- Create a new View and a NIB called “MonkeysView”
- Add a UITableView to the view and expose the property
- 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:
- MvvmCross.Plugin.DownloadCache (we will use this to download an image and display it)
- MvvmCross.Plugin.File (the downloadcache caches on the file system with the help of this package)
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”.
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.
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.
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”.
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”.
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.
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.