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.

New Project XCode

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

save_window_2

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.

new_project_view_3

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”.

add_new_file_4

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

class_type_select_5

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

save_root_controller_6

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:

all_view_controllers_added_7

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.

add_view_xib_8

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.

select_view_file_9

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

project_views_and_controllers_10

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:

files_1

We are going to change that to look like:

files_2

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

files_3

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

files_4

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:

files_5

We are going to change it to look like this:

files_6

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:

files_7

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:

view_1

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

view_2

and drop it in right under “Window UIWindow”:

view_3

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.

view_4

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

view_5

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

view_6

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:

view_7

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

view_8

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

view_9

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.

view_10

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!

view_11view_12

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”

Since the days of the Commodore 128, Wess has become an expert in C, C++, Java, Javascript, Python, and PHP and he also has extensive knowledge of Objective-C/Cocoa, Ruby, and Erlang. His blog can be found at www.wattz.net.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote