Cross Platform
Android
iOS

Storyboard a TableView

This recipe shows how to use the new iOS5 Storyboard to build a user interface with a UITableView using Interface Builder in Xcode.

This Recipe is currently being updated for use with the Xamarin Designer for iOS, please bear with us while we make these changes. You can also refer to the Working with Tables in the iOS Designer guide.

Recipe

To create a Storyboard-based application using a TableView:

  • Create a new iPhone Storyboard Master-Detail Application with Xamarin Studio:

  • Double-click on the .storyboard file to see the default user interface consisting of a UINavigationController that contains a UITableViewController and a UIViewController. It is possible to skip the next few steps add code to these existing screens, however to gain an understanding of how Storyboards work you should select and delete the Master and Detail screens from the Storyboard.

  • Drag a new Table View Controller onto the design surface. 

  • Drag a new UIViewController onto the design surface

  • The Storyboard should now look like this (you can delete the Prototype Cell from the Table View, it will not be used):

  • Hold down the Control key and click then drag from the Navigation Controller into the Table View Controller. When you ‘mouse up’ the following options appear – choose Relationship – Root View Controller.

  • Now repeat by Control-dragging from the Table View’s Cell to the View Controller. Choose a Push segue from the list.

  • Drag a Web View control onto the View Controller – this will be the ‘detail’ part of the user interface. Double-click on the Navigation Bar and type a Title for the View Controller – the example uses Vege.

  • Click on the Table View then select the Identity Inspector.  Type a Class for the Table View – the example uses myTableViewCtrl (you can also double-click and set the navigation bar title to Vegetables).

  • Repeat to set a Class for the UIViewController – the example uses myVegeViewCtrl.

  • With the View Controller still selected, switch to the Attributes Inspector and enter an Identifier for it – the example uses vegeIdentifier.

  • Save and close the Storyboard within Xcode and switch to Xamarin Studio. You should see new c# files created for the elements created above. Now double-click to re-open the .storyboard file. Open the Assistant Editor and Control-drag from the UIWebView into myVegeViewCtrl.h to create an outlet – the example calls the outlet webview.

  • The Xcode design surface should now look like this. Close Xcode and return to Xamarin Studio to populate the Table View in code. 

  • Open the myVegeViewCtrl.cs file and implement these methods to allow a URL to be loaded into the UIWebView control:
public void LoadUrl (string address) {
    this.address = address;
}

public override void ViewWillAppear (bool animated)
{
    base.ViewWillAppear (animated);
    UIApplication.SharedApplication.NetworkActivityIndicatorVisible = true;
    var url = new NSUrl(address);
    var req = new NSUrlRequest(url);
    webview.LoadRequest (req);
    webview.LoadFinished += (sender, e) => {
        UIApplication.SharedApplication.NetworkActivityIndicatorVisible = false;
    };
}
  • The example code includes a TableSource and TableItem class in the Code folder, plus some images. Add these to your project:

  • Open the myTableViewCtrl.cs file and add code to populate the table with data:
tableItems.Add (new TableItem("Vegetables") { SubHeading="65 items", ImageName="Vegetables.jpg", Url="http://en.wikipedia.org/wiki/List_of_leaf_vegetables"});
tableItems.Add (new TableItem("Fruits") { SubHeading="17 items", ImageName="Fruits.jpg", Url="http://en.wikipedia.org/wiki/List_of_gourds_and_squashes"});
tableItems.Add (new TableItem("Flower Buds") { SubHeading="5 items", ImageName="Flower Buds.jpg", Url="http://en.wikipedia.org/wiki/Edible_flowers"});
tableItems.Add (new TableItem("Legumes") { SubHeading="33 items", ImageName="Legumes.jpg", Url="http://en.wikipedia.org/wiki/Bean#Types"});
tableItems.Add (new TableItem("Bulbs") { SubHeading="18 items", ImageName="Bulbs.jpg", Url="http://en.wikipedia.org/wiki/Garlic"});
tableItems.Add (new TableItem("Tubers") { SubHeading="43 items", ImageName="Tubers.jpg", Url="http://en.wikipedia.org/wiki/List_of_root_vegetables"});
TableView.Source = new TableSource(this, tableItems);
  • Open the Code/TableSource.cs file and review the RowSelected method.  This is where we reference the identifier set in the previous step.
var detail = viewController.Storyboard.InstantiateViewController("vegeIdentifier") as myVegeViewCtrl;
detail.Title = tableItems[indexPath.Row].Heading;
detail.LoadUrl (tableItems[indexPath.Row].Url);
viewController.NavigationController.PushViewController (detail, true);

If you run the sample, it should look like this: