UITabBar iPhone Tutorial
This tutorial will show you the basics of using the UITabBar and UITabBarItem controls when programming for the iPhone.
I will be showing you step by step in the video how to create a project from a UITabBar template and add additional UITabBarItems as well as additonal views to be displayed with these items. Here is a brief explanation of each step:
1. Create a new project from a UITabBar template
This is pretty straight forward. We will be using Apple’s default UITabBar template to start our project. This is a fully functioning app. You can click Build and Go to see it run.
2. Open Interface Builder (click on mainWindow.xib) and Add addtional UITabBar items
To add additonal UITabBarItems, you simply drag them from the library on to the UITabBar. For each new item, you must specify the name of the view that will be shown when the item is clicked. This is done by clicking on the tab bar item and clicking Tools -> attributes inspector. There should be a box titled “Nib Name”. Whatever you enter here will be the name of the view that will be loaded when this tab is clicked.
So for this tutorial, we entered ThirdView. So, naturally when we created our view to be loaded here, we saved it as “ThirdView.xib”. This is one Gotcha when working with these components.
3. Changing the text of the UITabBarItems
This is took me a while to figure out. To change the text, image, or style of the UITabBarItem, double click on it. You should now be able to access these settings in the Attributes Inspector.
4. Set the Background Color For Views 1 and 2
This was pretty easy. For the first view, we simply clicked on it and clicked the box next to “Background” in the Attributes Inspector. Next, we did the same to the secondView by opening up SecondView.xib in Interface Builder.
5. Create ThirdView
We need to create the third view to be loaded when the user clicks on the UITabBarItem that we inserted. This was done inside of Interface Builder by clicking File -> new and selecting View. The next thing we did was drag a label from the library and add it to the view. Finally, we set the background color like we did in the other views.
Be sure when you save this view, you name it ThirdView.xib (this corrisponds the name that we put in the “Nib Name” box in step 2). Also, be sure to save this view in your projects folder (sometimes Interface Builder does not navigate here by default).
6. Connecting ThirdView to the ViewController
In this step we connect the ThirdView to our FirstViewController. Notice that all of the views get connected to this view controller. This will handle all of the UI components put on to each view. *Note: this step can’t be done until ThirdView is saved and added to the project.
So to connect this view to FirstViewController, simply click on the File’s Owner object and select FirstViewController from the drop-down in the Identity Inspector.
The last thing we need to do is connect the view. So control-click from File’s Owner and drag the line to the View object. The word “View” should pop up. Click on it and the views are now connected.
That should be it! Click Build and Go and you are done.
Well, I hope you guys have enjoyed the video tutorial. I know that the audio is kind of low. This is because I used my computer’s built in microphone and it’s not the greatest. I have since purchased a new microphone (thanks again to all who have donated thus far) and future tutorials will have much better audio quality. I would LOVE to hear your feedback on the videos. I’m a total noob when it comes to screencasts and would love your constructive criticism. Thank you all and Happy iCoding!
Download the source code for this tutorial here
- Posted on 28 Sep 2008 in Interface Builder, iPhone Programming Tutorials
- Digg |
- Del.icio.us |
- Stumble |
41 Responses
Screem Says:
September 28th, 2008 at 6:14 pm
Dude, that was an excellent tutorial and an awesome job on the video. I am glad that someone is doing this. I am having a hard time finding good tutorials on iphone programming. I cant wait to see your future tutorials.
George Says:
September 28th, 2008 at 8:34 pm
Very nice tutorial for XCode starters. It helped me a lot to learn the GUI. Can’t wait to see more.
Scott Says:
September 28th, 2008 at 9:14 pm
Thanks Brandon. Now I would like you to go ahead and make a tutorial for a nested table view. This will allow me to go ahead and write one too. Your readers will also be able to go ahead and learn. Then we will all go ahead and use our iphones to go ahead and have fun.
Brandon Says:
September 28th, 2008 at 9:30 pm
@Scott
LOL, did I say “go ahead” too much? Haha I’ll watch that in future videos. Thanks for pointing that out.
Urza5886 Says:
September 29th, 2008 at 2:31 am
good tutorial…any chance these could be uploaded to itunes so i could watch them on the go, if not could you make them downloadable so they could be used as reference material. its easy for me to learn if i keep repeating these over and over again.
Keep up the good work 
derda Says:
September 29th, 2008 at 4:24 am
very good job. thank you!
@Urza5886 just open up the rss-feed as xml (view feed xml) and click on itunes (right side, actions)
face Says:
September 29th, 2008 at 1:48 pm
GREAT, really STUNNING.
May you please add a tutorial on how to simply read a sqlite database
(with for example this schema)
A1 A2 A3
B1 B2 B3
and populate some multiline field text boxes (hope the term is correct)
field1 > A1
field2 > A2
field3 > A3
and move forward
field1 > B1
field2 > B2
field3 > B3
and backword
and learning us also how to create a preferences database where to save program’s preferences (for example at startup load data from last record seen)?
hoping not ask too much
anyway, again, great tutorials,
thank you very much for sharing …
Jordi Bares Says:
September 29th, 2008 at 2:25 pm
I would like to hear a bit more about multiple XIB files versus one file containing multiple views. Benefits to follow one of the other strategy and of course the implications on the coding side.
I understand a more modular approach would be desirable but does it bring far more work on the coding side|?
Thanks for your tutorials.
Filatier Says:
September 29th, 2008 at 2:50 pm
Just to say you’re doing a really great job here !
Please keep going on, it’s so interesting and easy to understand.
Thx.
MF
Brandon Says:
September 29th, 2008 at 3:07 pm
@face,
Have you checked out my sqlite tutorials. Also, an application preferences tutorial is on the way…
@Jordi
I’m not sure I really understand your question. Could you please rephrase it?
@Filatier
Thanks, I’m happy it helped.
Chet Says:
September 29th, 2008 at 6:04 pm
Your tutorials have really been great Brandon and are very much appreciated.
One thing I have been trying (and failing) to do so create an app that uses a single view list, based on your sqlite3 tutorial, that when an item is chosen, will transition to a tabbed view with different fields presented across each tabs view, all related to the primarykey chosen on the first view.
Any ideas how to make this happen or can it even happen?
Thanks.
Peter Kassenaar Says:
September 30th, 2008 at 4:30 am
Hi Brandon,
Great first vid. Keep it up!
A few suggestions to further improve the quality of future tutorials:
*) At the start of the video, show the viewers what the final application will look like (i.e., the end product). Doing so will enable the viewer to place your actions more in perspective with the ultimate goal. Also they can at any point in the video build a ‘mental map’ of what is needed to create the application *they have already seen* (and compare this to what is done so far).
*) Do a little less zooming and panning. It is very good to zoom in on code and UI-elements that have focus, but is gives the viewer a restless feeling if the ‘camera’ seems to swerve all over the screen. Try to bring some more rest in the video.
Otherwise - all compliments.
Looking forward.
Peter.
Lefty Says:
October 1st, 2008 at 8:40 pm
Amazing first video, thanks for such a site and resource. Happy iCoding!
Alex Says:
October 1st, 2008 at 10:10 pm
Really nice video tutorial. The video quality was good and you spoke clearly and went through the steps at a good pace.
One thing I’d like to be able to do is download the .mov file so I can refer back to it without having to reload the movie in my browser if possible
I’m looking forward to seeing some more tutorials
Tom Says:
October 2nd, 2008 at 2:41 am
Fabulous work! I’ve been trying to figure this out for a while, and it’s so hard to light up it’s simple logic behind the rather complicated Interface Builder. どうもありがとうございます。
Dan Says:
October 2nd, 2008 at 8:54 pm
Great Job,
I really appreciate you taking the time, This is so helpful for me as a beginner. I did have a problem though, When I do the final build and run the app I get an eror on the third tab: __Terninating_Due_To UnCaught_Exception__
Any Idea where I went wrong?
Dan Says:
October 2nd, 2008 at 9:55 pm
Hi Brandon,
My Bad, I guess I didn’t actually click on that “View” in that last pop up window.
Keep up the good work, I can’t wait to try your next one.
Forge Says:
October 5th, 2008 at 10:52 am
Thanks for the tutorial. I’ve followed a few tutorials and they all work fine, but I’m making my first tab-bar app, and got a bit stuck. Following your tutorial, that all works fine, but adding an outlet and connecting to the label (with plans to write code to alter the text later), its crashing.
Heres a video of me demonstrating:
http://www.vimeo.com/1889825
Clearly I’m doing something stupid, or not doing something, if anyone knows, let me know.
Cheers!
bearc0025 Says:
October 6th, 2008 at 8:28 am
Awesome! Thanks! I think the video format is more effective than the text.
BTW, if you make more video tutorials, can you create a category for them?
Again, great job!
Pad Says:
October 7th, 2008 at 12:26 am
Excellent work!
I didn’t understand where you told X-Code to show the third view when the user clicks on the third button in the UITabBar…
Brandon Says:
October 7th, 2008 at 8:36 am
@Pad,
This part was a little tricky. First I clicked on the “3rd View” tab. In the Attributes inspector, I typed in ThirdView in the nib name box. This means that it needs to load a view named “ThirdView”. All I did was create another view and named it “ThirdView” and it was automatically loaded by Xcode.
Does this help?
Marco from Ecuado Says:
October 7th, 2008 at 9:10 pm
great job here !
thenx for the tip..
i like to create a ibook program.. any other tip.
thenx agen
Dave Says:
October 8th, 2008 at 9:54 pm
Great tutorial! Quick question - does MainWindow.xib’s File Owner become the File Owner of SecondView.xib? I tried taking SecondView to the next level by setting it’s File Owner to a seperate .m ViewController file but it doesn’t work…is there a difference between a XIB that’s launched standalone versus launched from the Tab Bar?
Eric Says:
October 10th, 2008 at 1:07 pm
Excellent Tutorial! Now if only I could figure out how to make a table with navigation capabilities inside of each of the tabbed views (exactly how it is in the iPod.app application). I’ve been trying to do this for a few days now and I’m going crazy. Any thoughts?
Dave (a different Dave) Says:
October 12th, 2008 at 6:06 pm
Thanks for the great tutorial!
I am having a problem similar to the other Dave.
I think I am missing something fundamental about how IB ties different views and controllers together.
Can all three views share the same controller? Or do they each need their own? Could it work either way? I set mine up with all three views using the same controller.
I’ve set mine up with three different views each in their own xib. (it seems like the apple template doesn’t actually create a first view, just a label… that confuses me a bit… so I created a FirstView.xib and load it in the same way that the template loads SecondView.xib and your tutorial loads ThirdView.xib)
My first view loads some data from NSUserDefaults and puts it in some labels on the first view. That all works fine.
BUT… on my second tab, I have a button that is intended to do some work. When I try to wire it up to call the buttonPressed method in the FirstViewController, it doesn’t work. FirstViewController is the only view controller… all three views use it.
When I test things and press the button on tab two, the error I get is:
2008-10-12 20:40:07.195 ContactDeduper[1064:20b] *** -[UIViewController buttonPressed:]: unrecognized selector sent to instance 0×450b60
2008-10-12 20:40:07.196 ContactDeduper[1064:20b] *** Terminating app due to uncaught exception ‘NSInvalidArgumentException’, reason: ‘*** -[UIViewController buttonPressed:]: unrecognized selector sent to instance 0×450b60′
…and I can’t figure out what’s wrong.
I’d LOVE to see a “part two” of this tab tutorial that adds a control to each tab and shows how they get wired up!
Dave (a different Dave) Says:
October 12th, 2008 at 8:03 pm
Progress!
Buttons were working on the first view, but not the second or third, but I couldn’t find anything different between them.
I finally did…
When I opened MainWindow.xib, and selected Tab Bar Controller, I could see the 3 controllers for the 3 views. The first one had a type of FirstViewController, but the other two had a type of UIViewController.
This makes sense… the controllers for the 2nd and 3rd tabs were generic tab controllers… so couldn’t response to buttonPressed messages because that method is defined in FirstViewController.
And, I think it answers a questions that has been nagging at me… although I have created a single class called FirstViewController (which I should rename MultiViewController or something like that)… each view gets a different instance of that class… and that’s what is shown under the TabBarContoller. Right?
Brandon Says:
October 13th, 2008 at 6:11 am
@Dave (a different Dave)
That’s correct. The Views for each tab only need one view controller. You will connect all of the IBActions and IBoutlets to this controller.
You are right, I should have named it something like MulitviewController but I just kept it as FirstViewController as that was the default.
Thanks for watching…
Sean Says:
November 7th, 2008 at 11:15 am
I’m trying to use this as a starting point for building a 4 tabbed application that opens a different webpage in each view.
I can get it to display the webpage on the MainWindow and the tabs navigate to the other views but the other views contain only simple text labels from IB. How/where do i create the other 3 webviews and how/where would they be called??
BTW - like everyone else here… WOW.. these tutorials have helped me with learning to code for the iPhone even more than Mountain Dew+coffee…. thanks!!
frank Says:
November 9th, 2008 at 3:59 am
how do you change the color of the UITabBar ?
it appears like you can do it from interface builder.. but you cant, on launch the background is always black.
leo Says:
November 12th, 2008 at 7:22 am
Hey..great tutorials…
Is there any way to switch betweeen a NavigationController View to a TabBarController View?
I’m writing an app that has an initial login screen, then should switch to a screen with a tab bar, but am unsure about the right way going about doing that.
Gie Says:
November 19th, 2008 at 4:28 am
Hi! Nice tutorial. I have a question similar to Leo.
How can I switch to different tab views without clicking on the tab items below? Example I am in the first view (first tab), then when I click a button, I must change the next view (second tab). How?
Thanks in advance.
-angie
Gie Says:
November 19th, 2008 at 4:35 am
Have another question:
Is there any event handler to know if a tab is selected (clicked)?
Thanks! 
Vitalyp Says:
December 10th, 2008 at 4:23 pm
Sean - any luck making that 4 tab website browsing app?
I’m working on same thing, but not having any luck getting the website to show up.
André Says:
January 2nd, 2009 at 5:34 am
Hey there!
Just a quick question … should I have multiple ViewControllers (one for each tab, each view with his own view controller) or is it recommended to have just one view controller (like your firstviewcontroller in the sample app) for all the views in all the tabs
sandeep asrani Says:
January 6th, 2009 at 9:10 am
Hi i am new to apple iPhone development but is it possible to create a tab bar with an identifier set to favorite but change the text under it…. For example i want to use the Favorite identifier so the image is set to ’star’ and text to favorite can i keep the image as it is and only change the text… or do i need to then create another star to use it…..
Leave a Reply
Subscribe
