52 Weeks of Xamarin: Week 15 – Creating an iOS Application Part 1

In the previous two posts in this series, I demonstrated how to create a simple to-do list using Xamarin.Forms.  In this and the next post, I’ll show how to create pretty much the same program for iOS using Xamarin native code.

To begin, open Xamarin Studio and create a new solution, choosing iOS/App -> Single View App and name it ToDoiOS.  We’ll begin by roughing out the UI.  Open the file Main.storyboard.  You’ll find a View Controller.  Go to the toolbox and drag a Navigation Controller onto the storyboard — notice that it brings its own ViewController.

Grab the sourceless segue (the arrow) and move it to point to the Navigation Controller.

Great.   Now you can delete the original View Controller.

What you’ve done, effectively, is replaced the default ViewController with a Navigation Controller.  The Navigation controller has no UI, but as you might imagine it assists with navigating from one page to another. It is “born” with its own ViewPage which will be the first page in our interface.

Next, drag a Label from the toolbox onto the storyboard and use the Properties window to set its text to “Task” and its font to 17 points.

Next, drag a Text Field onto the storyboard, and using the properties window, set the following values:

• Name:  ToDoEntry
• Text:     Leave this empty
• Font:    14 point
• Placeholder:  Task Name

Finally, drag two buttons onto the storyboard and set the text for the first to Save and  the second to Review

Not attractive by any measure, but enough to get us started.

Because we want the review page to hold a list of To Do tasks, we’ll drag a TableViewController onto the storyboard.  There are other ways to get a table, but if you want a full page table, this is the easiest approach.  Once you drag the TableView into place,  control-click on the Review button and drag to the TableViewController.  When you let go, you’ll see a segue from the Root View Controller to your Table View Controller.

Click on the black bar at the bottom of the TableViewController and in the properties window set the class to ToDoReviewController.  Notice that Xamarin Studio will instantly and automatically add a new file, ToDoReviewController.cs to your project.

You now have two controllers: ViewController (for the Root View) and ToDoReviewController (for the Table View).

View Controller

View controller’s job is to get the to do items saved over to the review page where they will be listed.  To do so, we’ll create a toDoItem as a string, and a collection, ToDoItems, as a list of strings, which will be initialized in the constructor,

string toDoItem = string.Empty;
 
 public List<string> ToDoItems { get; set; }
 
 public ViewController(IntPtr handle)
     : base(handle) {
     ToDoItems = new List<string>();
 }
 

We will override ViewDidLoad and PrepareForSegue. In the former, we’ll handle the click of the save button,

 public override void ViewDidLoad() {
     base.ViewDidLoad();
     SaveButton.TouchUpInside += (sender, e) => {
         ToDoItems.Add(ToDoEntry.Text);
         ToDoEntry.ResignFirstResponder();
     };
 }
 

In PrepareForSqegue, we are going to get an instance of ToDoReviewController and then set the ToDoItems in that controller to the ToDoItems in the root view; effectively passin in the ToDoItems.

 public override void PrepareForSegue(
             UIStoryboardSegue segue, 
             Foundation.NSObject sender) {
     base.PrepareForSegue(segue, sender);
     var ToDoReviewController = 
         segue.DestinationViewController as ToDoReviewController;
     if (ToDoReviewController != null) {
         ToDoReviewController.ToDoItems = ToDoItems;
     }
 }
 

ToDoReviewController

By the time we get to this controller, its ToDoItems property has already been populated as shown above.

We declare the collection (for convenience, also naming it ToDoItems) and we declare a static member string object toDoReviewCellId

In the constructor, we call TableViews’ RegisterClassForCellReuse which is critical for efficient use of memory.  We also set the Source for the TableView to an instance of ToDoReviewDataSource, which is a class we’ve not yet defined, but which is instantiated with the ToDoReviewController itself.  Finally, we instantiate the ToDoItems collection of strings,

 partial class ToDoReviewController : UITableViewController {
     public List<string> ToDoItems { get; set; }
 
     static NSString toDoReviewCellId = new NSString("ToDoReviewCell");
 
 
     public ToDoReviewController(IntPtr handle)
         : base(handle) {
         TableView.RegisterClassForCellReuse(
             typeof(UITableViewCell), toDoReviewCellId);
         TableView.Source = new ToDoReviewDataSource(this);
         ToDoItems = new List<string>();
     }
 

We now create an inner class, ToDoReviewDataSource which takes the controller and copies it into its member variable controller

 class ToDoReviewDataSource : UITableViewSource {
     ToDoReviewController controller;
 
     public ToDoReviewDataSource(ToDoReviewController controller) {
         this.controller = controller;
     }
 

The table needs to know how many rows to create, and we tell it by overriding RowsInSection, returning the number of strings in the ToDoItems collection in the controller.

 public override nint RowsInSection(UITableView tableview, 
                                    nint section) {
     return controller.ToDoItems.Count;
 }
 

Finally, we override GetCell which allows us to reuse cells that are not displayed and to set the text of the displayed cell to the appropriate ToDoItem,

 public override UITableViewCell GetCell(UITableView tableView, 
                                         NSIndexPath indexPath) {
     var cell = tableView.DequeueReusableCell(
                    ToDoReviewController.toDoReviewCellId);
     int row = indexPath.Row;
     cell.TextLabel.Text = controller.ToDoItems[row];
     return cell;
 }
 

There is more to do, especially including persisting the ToDo items, and we’ll take this up next week.