MonoTouch Custom ViewController, Adding Stepwise Subviews

This is a MonoTouch port of Recipe 2-1 (“Adding Stepwise Subviews”) from Erica Sadun’s (excellent) iPhone Developer’s Cookbook

The MonoDevelop project and all source code is here.

Tutorial level: Beginner

Create a new solution in MonoDevelop

media-12560758336091.png

In MonoDevelop, choose File/New Solution…

This will lead you to a simple solution containing a Main.cs and a MainWindow.xib, as shown above.

Subclass UIViewController

media-12560792077761.png

The creation of a custom view is naturally done by subclassing UIViewController and subclassing UIView (in the unusual case of this tutorial, we will not subclass UIView since we are just creating trivial views that draw rectangles) . You can actually specify these classes after working in Interface Builder, but for learning, let’s do it now. Right-click on your project to bring up the context menu, select “Add…/New File… -> Empty Class” and create a new file called StepwiseSubviewController

1. Bring in the required namespaces

2. The MonoTouch.Foundation.RegisterAttribute is required to wire up your custom code with Interface Builder. If you neglect to add this attribute, you will receive the error “Unknown class StepwiseSubviewController in Interface Builder file.” when your application tries to instantiate it from the XIB file

3. Because of the behind-the-scenes wiring of your class, declare it as a partial class

4. This constructor (and the chained call to the base-class constructor) is required

Override StepwiseSubviewController.LoadView()

media-12560771991101.png

This is a straight port of Sadun’s code for Recipe 2-1. The only thing worth pointing out is that instead of CGRect, this code uses RectangleF and instead of CGRectInset(), it uses the function RectangleF.Inflate();

Open MainWindow.xib in Interface Builder

media-12560774709901.png

In MonoDevelop, click the MainWindow.xib file to open Interface Builder.

Open the Library, and from the Objects/Library/Cocoa Touch/Controllers panel, drag a View Controller into your MainWindow.xib

Change the class of your just-added View Controller to the attributed name of your UIViewController subclass

media-12560777592981.png

Open the Inspector for the View Controller object you just created (1). Choose the Identity tab (2)and change the Class Identity / Class value to name you specified in the RegisterAttribute previously (in this case “StepwiseSubviewController”)

Create an outlet in your App Delegate to hold a reference to an instance of your custom UIViewController

media-12560783435501.png

In the Library / Classes list (1), select your AppDelegate (2), and select the Outlets pane below. Click the “+” (3) button to create a new outlet, which by default will be called myOutlet1 and given type id

Change the name to a meaningful variable (myViewController). Optionally, specify that the type of this outlet must be that of your UIViewController subclass. (In my opinion, this is a good habit which might occasionally save a stupid mistake in which you wire up the wrong type.)

Connect the just-created Outlet reference to the instance of your custom UIViewController

media-12560788151361.png

Control-drag from “App Delegate” to “Stepwise Subviewcontroller” (left-to-right in this image). A popup will appear allowing you to select the just-created Outlet and associate it with this connection.

Save your Interface Builder file (and exit Interface Builder, if you care to).

Modify AppDelegate.FinishedLaunching() so that the view of the main window is that of the custom controller

media-12560793442161.png

Back in MonoDevelop, switch to your Main.cs and navigate to the FinishedLaunching() method of your AppDelegate class.

Mono generated this code for you:
// If you have defined a view, add it here:
// window.AddSubview (navigationController.View);

Well, you did define a view, so replace this code with code that passes the View property of the Outlet you just wired up (in other words, the reference to the instance of your UIViewController subclass) to the function window.AddSubview()

Bob’s Your Uncle

media-12560796867141.png

Run your application.

MonoDevelop project & source code

Please let me know if you found this tutorial helpful.

div>