Introduction to MonoTouch Storyboard Tab Bar Controller with Navigation Controller Part 1 of 2

Today I wanted to explain how I setup a Storyboad app up and running with MonoTouch.  These directions are long, so grab a soda and lunch first before you dive into reading these.  I assume you have a clue on how to use MonoDevelop and XCode's Interface Builder.

For those that link to watch Screen Casts - I've uploaded a view that explains this blog posting here.

If you don't know anything about Storyboards go read this blog - while all the code examples are in Object-C it does an excellent job to explain Storyboard's and the advantages of them:

http://www.raywenderlich.com/5138/beginning-storyboards-in-ios-5-part-1

My goal was to have an App that had both Tab Controls on the bottom AND Navigation bar at the top.  Prior to Storyboards it took some code to push and pop views from your Navigation Controller.  On top of this you would have a project full of XIB files.  With Story Boards, all that code is gone along with the XIB files.  Pretty much all your GUI stuff lives in the Storyboard file.  I HIGHLY recommend looking into Storyboard - it has the ability to save you A LOT of time.  Here is my sudo explanation of what I did:

Started a new MonoTouch Solution.  From there I selected C# -> MonoTouch -> iPhone Storyboard -> Tabbed Application.  Gave it some kind of test name.

Figure 1:  Start a new Storyboard project

What you just bought was a new fancy project with two View Controllers (FirstViewController and SecondViewController).  Along with this you get a MainStoryboard.storyboard file.  This is a replacement for all your XIB files.  If you compile and run you have a new fancy app with two tab options at the bottom that are hooked to your two View Controllers (FirstViewController and SecondViewController).  Slick - no code so far...  

If you double click the MainStoryboard file you will launch XCode and your new Storyboard will display your current two views hooked into a Tab View Controller.

Figure 2:   Tab Bar Controller with two View Controllers

Note at the bottom left hand corner if your "UI" controls grid to the right if the object selector is three buttons used to Zoom in and Out. If you have a smaller screen, these buttons are going to be critical to zoom in and out to find the various views you have in your Storyboard.   In another application I'm working on I have 10 views and with a 27" Thunderbolt display I still find myself zooming in and out a lot.  

So to start out I would like to add another View to my tab view.  Several ways to accomplish this.  You can drag a View Controller from the object selector toolbox - that's the way I like to do it.  Another way is to copy one of the existing views and paste it in.  I'm going to drag a new View Controller out from the toolbox.  You should have something similar to what shown in Figure 3.

Figure 3:  New View Controller added to Storyboard

To connect thew new view to your existing Tab Bar Controller select the Tab Bar Controller and Control-Drag over to the new View Controller.  Let go of the mouse and select view controllers under Relationship Seque.  

Figure 4:  Connecting new view to Tab Bar Controller

Let's save this and go back to MonoDevleop as we need add a new ViewController .cs file we can link to our new View Controller.   I'm sure there is an easier way to do this, but I don't know of one yet - so in my example I'm going to handle it the only way I know how.   In MonoDevelop we need to add a new ViewController so select File -> New -> File from the toolbar.  From the New File window select MonoTouch and iPhone View Controller from the options listed.  I'm going to name my ThirdViewController to keep up with the theme in my current project.

Figure 5:  Adding a new iPhone View Controller to the project

You will end up with a new ThirdViewController.cs and ThirdViewController.xib file.  Wait - I said you didn't need those anymore.  Yep, that's true so we are going to delete that XIB file.  You can right click on the XIB file and select Remove.  It will ask if you want to delete it, select Delete button.  Right now our new ThirdViewController.cs file is linked to the XIB file we just deleted.  We need to fix that. Open the ThirdViewController.cs file and locate the method signature for the Constructor method.  This is the Method name that is the same as the Class name.  You will notice that currently it calls it's base class passing in the signature line a string class name and null.  Storyboard doesn't use strings to find the view - it uses a integer pointer to find the view in the Storyboard file.  So to fix this we are going to change the signature of the base call to:

public ThirdViewController (IntPtr handle) : base (handle)

If you are confused look at the way the FirstController.cs and SecondController.cs classes constructor signatures look.  You need to match that.

Figure 6:  Changing the method signature in the new ThirdViewController class

Save your code changes and double click on the Storyboard file to call it up in Xcode's Interface Builder.  Select your new View Controller that you dragged out a few steps ago.   You will know when you have it selected as the entire view will have blue line around it.  Use the Inspector area to the top right of the designer view and select the third little icon call the identity inspector.  You will see there is a listing of the class and it's currently set to UIViewController in grey text.  We are going to select the pull down list and select our new ThirdViewController from the list.  See Figure 7 if you are lost.

Figure 7:  Changing the class that the selected View Controller inherits from

That's it, the selected ViewController will now use the ThirdViewController class code file.  You can test this by dragging a Label onto the View.  Now switch to the assistant editor view using the little tuxedo icon under the editor heading on the Toolbar.  This opens your code file and the Interface Builder next to each other.  Control drag over from your label to your code file before the @end and let go to create a new Outlet.  A window will pop up asking you to name your Outlet.  I'm going to name mine labelTest. Yep I know lack of originality.  Save all this and go back to MonoDevelop.  In your ThirdViewController.cs file locate the ViewDidLoad() method.  After the base.ViewDidLoad(); call add some code to change the text of your label you just added.  I'm going to just change mine to be "Hello World".

Figure 8:  Changing the label text to "Hello World"

 


Test all your changes by start debugging.  The iPhone Emulator should come up.  You should have three tabs you can select between.  When clicking on your new third one labeled Item with no icon you should have your label set to Hello World.

Figure 9:  iPhone Emulator with new View

Click here for Part 2 that explains how to add a Navigation Controller to this project.