This post was originally published in March 2011
In the last part of this tutorial we had added a segmented controller to our first tab view and used it to hide or show elements on the view. If you are just picking up from here you can get the code from part 3 of the tutorial here.
This time we are going to add a navigation controller and navigation bar to the second view of our tab bar. This typically how an app digs down for more detailed information on something.
1.) Open up our project in Xcode. We are going to be adding a view controller for SecondView, two new views and view controllers for them.
So right click on Classes and select Add > New File… then pick UIViewController subclass and name it SecondViewController.
Repeat that two more times naming the files GreenViewController and BlueViewController.
2.) Next we are going to create our two new views. Right click on Resources, select Add > New File… and create two new nib files named GreenView and BlueView.
Here’s what our Groups & Files pane looks like at this point.
3.) We are now going to switch over to Interface Builder to set up the views and make a few changes. Double click MainWindow.xib to open it up in Interface Builder.
In the document window select Tab Bar Controller, then go to Attributes Inspector and under View Controllers click the little arrows next to Second and change it to Navigation Controller.
In the view window select the second tab.
Then click in the big grey middle area titled view. This deselects the actual Second tab but keeps that view as our current one. Go to Identify Inspector and set the class to SecondViewController.
The go to Attributes Inspector and set the nib to SecondView.
4.) Let’s change the name of our Second tab to RGB.
Select Second in the Tab Bar, make sure just the text is selected and not the entire tab.
Then change the title in the Attributes Inspector.
Save your changes for MainWindow.xib.
5.) We’re now going to set up our three views for the newly renamed RGB tab. Open up our SecondView, you can do this with the Open command within Interface Builder, or you can go back in Xcode and double click the SecondView.xib.
Delete the existing labels. We’re going to add one label of our own and change the background color.
Add a UILabel to the View window somewhere towards the top. Expand the label by dragging the edges and center the text. Then change the title to Red View.
Deselect the label, choose Background in the Attributes Inspector and change the background to Red. You can choose whatever shade of Red you like. You may have to choose “Other …” from the bottom of the Background popup.
This will open the Colors Window
pick a red color and make sure the background in the view changes.
Repeat this process two more times making Green View and BlueView look similar to this.
7.) Now let’s connect our new views with their view controllers.
Open up GreenView if it isn’t already. Make sure File’s Owner is selected in the document window.
Go to Identity Inspector and set the Class to Green View Controller.
Then go to Connections Inspector and connect the view to the View in the document window. If you are unfamiliar with this you can review the Interface Builder tutorial.
Repeat this same process with the BlueView and BlueViewController.
8.) We are done with Interface Builder now, you can make sure everything is saved and close it.
In Xcode open up SecondViewController.h, we need to import GreenViewController, then declare a variable of it’s type and finally declare a method named goToGreenView. Add this code and save the file.
9.) Open up the implementation file SecondViewController.m.
We need to synthesize our greenViewController var.
Then we are going to create a next button and add it to the navigation bar. We do this in the viewDidLoad method and we link up the button to our goToGreenViewMethod. Let’s go ahead and set the title of our view to Red while we’re at it.
Next we need to hash out the goToGreenView method and push our greenViewController onto the navigationController.
10.) Now we want to do basically that same thing to the GreenViewController.
Add the import, var and method to the header file.
synthesize the var, add the next button and title and hash out the method in the implementation file.
11.) Finally open up BlueViewController.m file and just add the title to it.
12.) After looking at it one thing I don’t like is the next button title let’s change it to reflect the views we’re going to next.
In SecondViewController.m change the title of the button to Green.
And in GreenViewController.m name the button Blue.
That’s it save everything click Build and Run and see what we have.
Whoops, but wait a minute look at how our second tab now has changed to be named Red! When you first start the app it is named RGB.
But after you click on the tab it changed the tabs name to Red. It took this from the title that we set in the implementation file. We’d like to keep the tab name and set the view name separately.
13.) Open up SecondViewController.m and get rid of the title we set earlier. Here I just commented it out.
In Xcode you can select a line of code and then use the key stroke “command /” to comment out that line. This works well when wanting to comment out multiple lines at one time.
14.) Now we need to go back in to Interface Builder and edit the MainWindow.xib. You can just double click that file in Xcode to open it up.
In the document window. expand Tab Bar Controller, then expand the second Navigation Controller (RGB), then expand Second View Controller and select Navigation Item.
Go to Attributes Inspector and change the Title to Red.
Save your work in Interface Builder and close it if you want. Go back to Xcode and run the app again.
Look this time the Tab title stays RGB and the view is titled Red.
That’s it for Part 4 of this tutorial. In part 5 we will be adding a TableView to the third tab and doing some fun things with it.