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 listReviewPageWithBorder 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.

sourceless segue

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.

Properties Window

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

todoentry

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.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Essentials, XAML. Bookmark the permalink.

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

  1. Saverio says:

    呵呵 理想+感性 ya.ninja, i like this movie. in the beginning of this movie, i was puzezld what kind of movie will it be. Eventually, i found it is well produced although the movie lasts 2 hours. I like the superman girlfriend in this movie. She has her way, in giving hope and bright way to Orlado. :)Hehe 曾经是愛哭鬼 现在比较少哭 但是还有有 呵呵

Leave a Reply

Your email address will not be published.