SkylarEC
01-30-2009, 12:32 AM
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.
http://www.ipodtouchfans.com/forums/imgcache/23617.png
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.
http://www.ipodtouchfans.com/forums/imgcache/23618.png
http://www.ipodtouchfans.com/forums/imgcache/23619.png
http://www.ipodtouchfans.com/forums/imgcache/23620.png
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"
http://www.ipodtouchfans.com/forums/imgcache/23621.png
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?
http://www.ipodtouchfans.com/forums/imgcache/23622.png
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.
http://www.ipodtouchfans.com/forums/imgcache/23623.png
http://www.ipodtouchfans.com/forums/imgcache/23624.png
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.
http://www.ipodtouchfans.com/forums/imgcache/23625.png
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.
http://www.ipodtouchfans.com/forums/imgcache/23626.png
SkylarEC
01-30-2009, 12:33 AM
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.
http://www.ipodtouchfans.com/forums/imgcache/23627.png
http://www.ipodtouchfans.com/forums/imgcache/23628.png
http://www.ipodtouchfans.com/forums/imgcache/23629.png
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.
http://www.ipodtouchfans.com/forums/imgcache/23632.png
http://www.ipodtouchfans.com/forums/imgcache/23630.png
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!
http://www.ipodtouchfans.com/forums/imgcache/23631.png
SkylarEC
01-30-2009, 01:23 AM
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."
http://www.ipodtouchfans.com/forums/imgcache/23637.png
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.
http://www.ipodtouchfans.com/forums/imgcache/23638.png
http://www.ipodtouchfans.com/forums/imgcache/23639.png
http://www.ipodtouchfans.com/forums/imgcache/23640.png
http://www.ipodtouchfans.com/forums/imgcache/23641.png
Save this file and reopen MainWindow.xib.
SkylarEC
01-30-2009, 01:23 AM
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."
http://www.ipodtouchfans.com/forums/imgcache/23642.png
http://www.ipodtouchfans.com/forums/imgcache/23643.png
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
http://www.ipodtouchfans.com/forums/imgcache/23644.png
http://www.ipodtouchfans.com/forums/imgcache/23645.png
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.
http://www.ipodtouchfans.com/forums/imgcache/23646.png
Continue on to PART III: http://www.ipodtouchfans.com/forums/showthread.php?t=137473
ChriB
01-30-2009, 09:05 AM
There's a spelling error in the thread's title:
[Tutorial] Getting to know Xcode/Interface Builder: UITabBar projects. PARTS I & II
Steaps
01-30-2009, 10:59 AM
What ChriB is trying to say is, nice tutorial :).
;).
iPodTouchDev
01-30-2009, 01:17 PM
Nice Guide! This is off topic, but where'd you get your wallpaper?
cocotutch
01-30-2009, 07:33 PM
Yup, I want that wallpaper too :D:D:D please please, looks really gr8.
TheKKKiller
01-30-2009, 07:42 PM
Any chance this can be done in Windows?
Great and well detailed tut btw
iPodTouchDev
01-30-2009, 08:14 PM
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.
swim23
01-30-2009, 11:34 PM
I have no knowledge of programming but would like to try making iPhone apps. Would it be possible or is it just not worth trying? I know a little Javascript because I do a lot of editing on my blog template. Please tell me what you think. Would it be possible to make an app by just following this guide?
Steaps
01-30-2009, 11:45 PM
I have no knowledge of programming but would like to try making iPhone apps. Would it be possible or is it just not worth trying? I know a little Javascript because I do a lot of editing on my blog template. Please tell me what you think. Would it be possible to make an app by just following this guide?
Every thing is possible, and this is a very good guide. I don't see why you shouldn't give it a shot :).
ChriB
01-31-2009, 12:58 AM
What ChriB is trying to say is, nice tutorial :).
;).
I didn't even read it all but now I have.
It's a good tutorial, I'm sure there are a lot people who have problems with TabBars but those have found their guide now.
Edit: I would love to get that wallpaper, too. :)
swim23
01-31-2009, 05:40 AM
Every thing is possible, and this is a very good guide. I don't see why you shouldn't give it a shot :).
Thanks for the quick response! :) I will try right now. If I create anything interesting, I will be sure to let everyone know. :D
**begins working on app**
EDIT
There is nothing in the "identity" section of Inspector. I am stuck here: "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? "
.PhP-Alex
02-13-2009, 08:28 AM
Thanks for this tutorial
pfitzpat
03-24-2009, 08:25 PM
excellant tutorial! :)
In your example that populates cells in a tableview within a tabbarcontroller, could you explain/show how i would implement a detail view when the user clicks on a cell. I'm slowing going insane trying to figure it out!
Thanks in advance.
Keeheon
03-29-2009, 07:11 AM
I couldnt get the "cell number 0" thing in my cells, what did I do wrong?
SkylarEC
03-30-2009, 05:25 AM
excellant tutorial! :)
In your example that populates cells in a tableview within a tabbarcontroller, could you explain/show how i would implement a detail view when the user clicks on a cell. I'm slowing going insane trying to figure it out!
Thanks in advance.
Create a new UITableView subclass. Call it whatever you want.
In the table controller we've already built, remember to import the header for your new UITableView subclass.
In the table controller we've already built, set up a switch in its didSelect... method.
Within said switch, in the appropriate case for the row, create an instance of your new UITableView subclass that you just created.
If you have to feed that table any data, now would be the appropriate time to feed it in.
Finally, call self.navigaitonController to push your UITableView.
Note, I didn't give IB instructions on this. There is no reason to get IB involved with creating/presenting UITableViews in situations like this. Of course, you can use IB if you'd like (it can be handy for designing UITableCells), but I never do.
I couldnt get the "cell number 0" thing in my cells, what did I do wrong?
You are missing a connection somewhere in IB. Go back and make sure you have the all. If that isn't the case, then you haven't set the UITableViewController's Calss Identity to "Steve," also in IB.
centroid
04-13-2009, 04:38 PM
For some reason or another... lol at app name
Thanks for posting this. I am a visual learner so this helps a lot.
Is there a duck in the center of the "starburst" vector? <-- off topic sorry. lol
Vaelek
04-22-2009, 06:48 AM
It can be accomplished, but you won't be able to use the iPhone SDK.
This can be accomplished under Windows, AND using the iPhone SDK. After fighting with it forever, I've managed to get the SDK installed under OSX in VMWare. I have to install anything I compile manually, but it does work. Note that I believe you must have an Intel processor.
Chicken
05-17-2009, 05:38 AM
Sorry for the bump I just thought this might help some people, as I was recently using it.
If you are using the navigation controller as Skylar describes in the second post. To add a badge to that tab bar item use this code.
self.navigationController.tabBarItem.badgeValue = @"1";
If you wanted to you could also use something like
self.navigationController.tabBarItem.badgeValue = [NSString stringWithFormat:@"%i", [someObject count];
Lastly you could also do
self.navigationController.tabBarItem.badgeValue = @"%i", [someObject count];
I just posted this because I just used it in a project and I thought it may help some other people when working with tab bars.
MacPwn
06-13-2009, 02:01 AM
This is an amazing tutorial, thanks Skylar
Newbie2009
06-17-2009, 09:42 PM
Excellent tutorial. Thank you very much for this tutorial. I was able to execute this tutorial and it worked fine. I wanted to load the TableView with data from SQLite DB and it fails. I get the following error message.
/Users/Username/iPhoneApps/TabBarTest/MainWindow.xib:132: warning: The 'view' outlet of 'Selected Navigation Controller (Test)' is connected to 'Table View', but this view controller is not intended to have its view set in this manner.
I think I'm missing some connection in IB, but not sure what it is. Could you help me with this one?
Thanks
arcticfire
08-04-2009, 07:27 PM
i am on a windows computer and i was wondering if there is any way i can create ipod touch applications?????
is something that i can use or something???
please help me
wyndwarrior
08-04-2009, 07:29 PM
i am on a windows computer and i was wondering if there is any way i can create ipod touch applications?????
is something that i can use or something???
please help me
Nice Bump. Get a mac and then get iPhone SDK.
ariarch
08-10-2009, 03:59 AM
i done what you said for the first part but when i press build and go it just loads up a white page and nothing else, what did i do wrong o.o