[Tutorial] Getting to know Xcode/Interface Buider: PARTS I & II: UITabBar projects

[SkylarEC]

Alright, it seems that a lot of youse are missing a few steps when it comes to connecting together Xcode and Interface Builder. Hopefully, this will help you see things, and 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.


Download Link: http://www.touchrepo.com/SampleCode/CountAppula.zip



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.

[SkylarEC]

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!

[SkylarEC]

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.

Save this file and reopen MainWindow.xib.

[SkylarEC]

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 on to PART III: http://www.ipodtouchfans.com/forums/...d.php?t=137473

[bddckr]

There's a spelling error in the thread's title:
[Tutorial] Getting to know Xcode/Interface Builder: UITabBar projects. PARTS I & II

[Steaps]

What ChriB is trying to say is, nice tutorial .
.

[iPodTouchDev]

Nice Guide! This is off topic, but where'd you get your wallpaper?

[cocotutch]

Yup, I want that wallpaper too please please, looks really gr8.

[TheKKKiller]

Any chance this can be done in Windows?
Great and well detailed tut btw

[iPodTouchDev]

Originally Posted by TheKKKiller

Any chance this can be done in Windows?
Great and well detailed tut btw

It can be accomplished, but you won't be able to use the iPhone SDK.