iPhone View Switching Tutorial

The world of iPhone development can be a bit of a daunting task and irritating at times. I’m the kind of person that likes to do things from scratch as much as I can. So when I headed down this path, I decided to start with the simplest template and create a very, very easy app: creating 2 views and switching between them. After the great lengths (thank you @stevefink) of putting the pieces together and learning, I have decided to write a nice article/tutorial, explaining what I have done to hopefully enlighten or help out anyone going down the same path.

So without further rambling, let’s write some code! (The download is included for your reference, but I recommend following the tutorial first before looking at the provided zip – ed.)

First off lets launch Xcode and get a new project going. We are going to select File > New Project and select “Window-Based Application,” which is one of the most basic app templates you will ever use.

Once you have selected it, click “Choose…” and you will be prompted to enter a name and save it.

Here I have entered the name “NavApp” as my project name, then click “Save.” You will then be presented with your newly created project in the XCode editor/IDE.

Next we are going to setup and add some files that we are going to use. First right click on “Classes” and select “Add Files”.

Then make sure “Cocoa Touch Classes” is selected in the left column, click on “UIViewController subclass” and click “Next”.

Type in the name “RootViewController” (it will append .m) and make sure that “Also create ‘RootViewController.h’” and “Targets: NavApp” is checked.

We are going to do that same process again but we are going to add “ViewTwoController.m” making sure we also create “ViewTwoController.h” and target is selected. Once you are done adding those, your Classes group (the little folder) should look like this:

Now we are going to add to files to Resources (two XIB/Nib files to be exact). Using the same actions mentioned above, create two views, RootViewController.xib and View2.xib.

Then in the left column make sure you select “User Interfaces” and click on “View XIB” after which you will click on “Next” and name it RootViewController.

Repeat the process and add “View2.xib.” Once you do that your project will then look like:

Now we have all the files we are going to need to get rolling. So now let’s setup all of our code in the class files. So click on the “Classes” group/folder and select “NavAppAppDelegate.h.” When you first open the file your code will look like this:

We are going to change that to look like:

Now we are going to open up NavAppAppDelegate.m, which looks like:

And now we are going to change it to look like:

All we have done here is told our applications delegate to setup an instance of a NavigationController and add it to the subview (the short version).

Next we are going to setup our RootViewController, think of this as a kindergarden teacher, that tells which student can move to the front of the line. Now we are going to setup our RootViewController and make it aware of our ViewTwoController and give it an action to handle the switch to that view.

As of right now, our RootViewController.h file looks like this:

We are going to change it to look like this:

As you can see we created an instance variable of ViewTwoController, gave it a property, and also added an IBAction method called ‘switchPage’.

Now that our declarations are in place in our header file (RootViewController.h) let’s open up and add the following code to our RootViewController.m:

Basically what we have done here is created a method in our root controller that will allow for us to switch to our View2(.xib) when a button (tied to switchPage) is clicked. We first check to see if our viewTwoController instances variable has already been created, if not we create a new one and tie it to our View2.xib (we don’t have to add ‘.xib’ to the end because our program is smart enough to already know that) then we set our ‘global’ viewTwoController variable to the newly created instance of ViewTwoController and release it. Once out of our ‘if’ statement we tell our navigation controller to push our new view up to the front; lets animate it so it’s all pretty.

The next to class files in the bunch are “ViewTwoController.h” and “ViewTwoController.m” for this tutorial, these guys need no code.

Now we will move on to setting up our actual interface. We have 3 files here: MainWindow.xib, RootViewController.xib and View2.xib. We want to have our RootViewController.xib to load up first with a button on it that, when clicked, will move us to our second view, or View2.

So double click on MainWindow.xib, this will launch Interface Builder. When that loads we will see:

From here we will want to drag a “Navigation Controller” from our library

and drop it in right under “Window UIWindow”:

Once you have that in place, click the arrow to the left of the Navigation Controller and select “View Controller UIViewController. Once you have done that open up your Identity Inspector (or command+4) and change the class name to RootViewController (which should be listed in your dropdown). Also make sure you make a new reference outlet for your Navigation Controller to your App Delegate.

Once you have done that, then in the Inspector window select “Attributes” or command+1 and set the nib name to: “RootViewController”

Once you do that, your View Layout should change to look like:

Now save and close out of Interface Builder, switch back to XCode and double click RootViewController.xib to relaunch Interface Builder with that file being the focus. (You don’t have to close it out completely, I just do it to give me a clean slate).

On this view, let’s go ahead and drag a button on to the screen, and title it “PRESS ME” or anything to your liking. I also went a head and changed the background color to black:

Now click on “File’s Owner” and then Command+4 (identity) and change it’s class to “RootViewController”

Then control+click drag from File’s Owner, straight down, to View. When the little black box pops up, select “view”.

Now we are going to open up the Connection Inspector for File’s Owner and drag from ‘switchPage’ to our new button right on the view and select Touch Up Inside.

Now click on the View inside your list and look at your connections inspector, if needed (double check, this goofed with me for a minute) drag from “New Reference Outlet” to your “File’s Owner” to insure the connection has been made.

Now save that all up, quit and double click to open View2.xib. Once here we will make a few connections save and run this bad boy!

And there you have it. You can even click the Navigation Item to return to the first screen. This can be expanded any way you want.

Thanks for tuning in and make sure you download the zip in case you have any trouble or questions!

-Take Care,
Wess “Wattz”