Getting to know Xcode/Interface Buider: PARTS I & II: UITabBar projects
Alright, it seems that a lot of you are missing a few steps when it comes to connecting together Xcode and Interface Builder. Hopefully, this will help you see things a little clearer, and see how things work a little better. This tutorial will show you how to create a simple UITabBar based application whose tabs are loaded from separate nib files.
The first thing you’re going to want to do is open a new project. Select a “Tab Based Application” and call it “CountAppula.” Be forewarned, when you submit an application to the AppStore, you can’t have any spaces in the name. You can change the display name in the Info plist to display “Count Appula” if you feel so inclined.
Now, go in Xcode, click on the resources and delete the SecondView.xib. Double click on MainWindow.xib to open it in Interface Builder. Double click the UITabBarController so it appears on the screen. Click on each of its tabs and delete them. Save the xib and close it. This way, we are starting with a clean slate.
Now that we’re fresh and clean, go back into Xcode and create two new xibs from the file menu. Let them be empty xibs. Call them “FirstView” and “SecondView”
Double click on “FirstView” to open it up in Interface Builder. In the Inspector, in the “Class Identity” section, set the class as FirstViewController. I should note here that this file was created for us when we created out template. Feel free to override anything you want via code in FirstViewController.h/m. If you want to subclass any view controller for your tab bar app (and it is highly recommended that you do), this is how you would do it. Easy, huh?
Still in the inspector, click on Connections. You’ll notice that there is a spot for view. Not everything needs to be connected. View is one of those things that must (or should, to tell you the truth, I’ve never not connected it) be connected. To set this up, drag a view out of the Library window into the xib’s main window. In the inspector, click on the circle next to “view” and drag your mouse over to the view you just created. Once over the view, let go of your mouse button. Congrats, you’ve just given your view controller a view to control.
Let’s give this view a little color. Double click on the view to open it up. In Inspector’s “Attributes” section, change the color. Chose Midnight. Now, Let’s save this and close.
Repeat this process for SecondView. Notice that we didn’t set up a subclass for this view. That’s okay, we can always go back and take care of that. In the interim, when setting a Class Identity, select UIViewController. Also, set this view’s color to EggPlant.
Now, you’ve set up each view controller in a xib. Let’s get those view controllers into your tab bar! Reopen MainWindow.xib and double tap the UITabBarController so it opens up in its own window. Once open, drag two UIViewControllers from the Library window directly onto the tab bar. Click the tab bar for each view controller (as it you were selecting it with your finger) to reveal its attributes in the Inspector. You may need to click it twice. Set the Bar Item Title to “First” and “Second” appropriately.
Click on each tab again to select the view controller. In the Inspector’s Attributes tab, select “FirstView” and “SecondView” appropriately from the “Nib Name” drop down box.
Now, save MainWindow and close out of Interface Builder. Back in Xcode, click on Build and Go, and wait for the app to compile/load/launch. Congrats, you have a working tab bar controlled application that loads each tab from a separate nib, and you didn’t have to lay down one single line of code!
Now, I’ll bet that you would like to expand and see how to add a UINavigationController to your UITabBar. That is actually simpler than it might seem.
The first thing we’re going to want to do is create a UITableViewController. This is going to be the root view controller for our UINavigationController. In Xcode, click on File and add a new file to your app. Select UITableViewController subclass and name it “Steve.”
In Steve.m, scroll down and find the numberOfRowsInSection and cellForRowAtIndexPath methods. In numberOfRows, change the return value to any other positive integer. We’ll use 5. In the cellForRow… method, is where we will define the actual cell. Leave this method mostly the same, but add in a switch based on the indexPath.section variable. In its 0 case, we will set the cell’s text to a string displaying which numbered cell it is. Case 0 for indexPath.section refers to the first section in your table. [Any additional sections will require more cases, ie case 1: case 2: case 768:, etc. If you want to set up the cell individually, then within an indexPath.section case, add in another switch based upon indexPath.row. Each case refers to each row , exactly the same way the section switch works.
// Customize the appearance of table view cells. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease]; } switch (indexPath.section) { case 0: cell.text = [NSString stringWithFormat:@"Cell Number %d", indexPath.row]; break; default: break; } return cell; }
Save this file and reopen MainWindow.xib.
In MainWindow.xib, double click on UITabBarController so it displays in its own window. We need to add one more tab. From the Library window, drag a UINavigationController directly onto the tab bar. We will name this tab Steve. Now, click on the navigation bar so that you can edit the Navigation Item attributes. Set the title to “Steve.”
We’re nearly done. We need to add a root view controller for our navigation controller. This will be Steve. From the Library window, drag a UITableViewController directly into your UINavigationController. Back in Inspector, set the table view controller’s Class Identity as Steve
Now, you are done! You have a tabbed app with view controllers, a nav controller, and a table view controller. Congrats! Where you go form here is entirely up to you. Hopefully I was able to get you started on the right foot.
Continue to Part III
Download link: CountAppula.zip
More comments: ipodtouchfans.com
Comments
One Comment on Getting to know Xcode/Interface Buider: PARTS I & II: UITabBar projects
-
spoolup on
Mon, 24th May 2010 3:33 pm
great tutorial man!
i do have a question though.
i’m new to this and want to have uiwebview with a url load every time a push a cell (with the navbar on top to go back)
i’ve been through a lot of tutorials, but it seems like every person has their own way of setting one or the other and can’t seem to wrap my head around combining two of them.
could you give a hand?
thanks
P
Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!