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
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.
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
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
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
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
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
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
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
Run your application.
Please let me know if you found this tutorial helpful.