In this installment we will be creating the “framework” for our application, first up we will be creating our UITabBarController and then we will add some ViewControllers to represent our different views.
1. Create a “Window-Based” application template
I had originally intended to create the application based on a “Navigation-Based” application template but now I have decided to create everything from scratch and not use Interface Builder. So if you have already completed part 2 then I suggest you go back there and follow the instructions to create the new “Window-Based” application template.
2. Setting up the UITabBarController and its delegate
Open up RSSReaderAppDelegate.h and edit the code to look like below
#import <UIKit/UIKit.h>
@interface RSSReaderAppDelegate : NSObject <UIApplicationDelegate, UITabBarControllerDelegate> {
UIWindow *window;
UITabBarController *tabBarController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) UITabBarController *tabBarController;
@end
What we have done here is added the UITabBarControllerDelegate and created a UITabBarController instance called tabBarController.
Now you will need to open up RSSReaderAppDelegate.m and synthesize the tabBarController instance and alter the applicationDidFinishLaunching function to look like this
- (void)applicationDidFinishLaunching:(UIApplication *)application {
tabBarController = [[UITabBarController alloc] initWithNibName:nil bundle:nil];
// Add the tab bar controller's current view as a subview of the window
[window addSubview:tabBarController.view];
// Override point for customization after application launch
[window makeKeyAndVisible];
}
This will allocate and init the UITabBarController and then add it to the window (we haven’t added any buttons yet, but we will do this shortly).
If you run your application now you should see the UITabBar at the bottom of the window like so:
3. Creating our UINavigationController
Right Click on the Classes folder in the left hand column and click Add > New File… , the following window will appear
Now choose UIViewController subclass and click next, now name the class MainViewController.m and click Finish.
You should now have a MainViewController.h and a MainViewController.m file in your Classes folder. Open up MainViewController.h and edit its contents to below:
#import <UIKit/UIKit.h>
@interface MainViewController : UINavigationController {
UINavigationController *navigationController;
}
@property (nonatomic, retain) UINavigationController *navigationController;
@end
Notice we have changed the subclass from UIViewController to UINavigationController and we have added a UINavigationController instance.
Now open up MainViewController.m and edit its contents to below:
#import "MainViewController.h"
@implementation MainViewController
@synthesize navigationController;
- (void)viewDidLoad {
[super viewDidLoad];
NSLog(@"Main View Did Load: %@", self.tabBarItem.title);
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning]; // Releases the view if it doesn't have a superview
// Release anything that's not essential, such as cached data
}
- (void)dealloc {
[super dealloc];
}
@end
All we have done here is synthesized the navigationController instance and put a NSLog call to display when the controller is created and what its TabBar item title was when it was created.
If you run the application now you wont see anything different, this is because we haven't added anything to the UITabBarController yet. To add the buttons you will need to open up the RSSReaderAppDelegate.m file and edit the applicationDidFinishLaunching function to look like below:
- (void)applicationDidFinishLaunching:(UIApplication *)application {
tabBarController = [[UITabBarController alloc] initWithNibName:nil bundle:nil];
// Create instances of the MainViewController for the 4 TabBar buttons
MainViewController *viewController1 = [[[MainViewController alloc] initWithNibName:nil bundle:nil] autorelease];
viewController1.tabBarItem.title = @"Browse All";
MainViewController *viewController2 = [[[MainViewController alloc] initWithNibName:nil bundle:nil] autorelease];
viewController2.tabBarItem.title = @"Most Recent";
MainViewController *viewController3 = [[[MainViewController alloc] initWithNibName:nil bundle:nil] autorelease];
viewController3.tabBarItem.title = @"Favourites";
MainViewController *viewController4 = [[[MainViewController alloc] initWithNibName:nil bundle:nil] autorelease];
viewController4.tabBarItem.title = @"Settings";
tabBarController.viewControllers = [NSArray arrayWithObjects:viewController1, viewController2, viewController3, viewController4, nil];
// Add the tab bar controller's current view as a subview of the window
[window addSubview:tabBarController.view];
// Override point for customization after application launch
[window makeKeyAndVisible];
}
What we are doing here is creating 4 instances of the MainViewController and setting the tabBarItem title (this displays below TabBar icon). Once we have created all four of the View Controllers we add them to the tabBarController by setting its viewControllers property to an array containing the pointers for our 4 View Controllers. Remember that you need to have a nil value at the end of the array to indicate the last element.
If you run your application now you should see 4 TabBar items with the titles we have assigned them above. You will also notice that we have a Navigation bar at the top of our window, as we don't have a UITableView setup yet the Navigation bar will just be blank.
4. Setting up our UITableViews
Now for starters we are going to need 4 UITableViewControllers for our Browse, Recent, Favourites and Settings Tabs. We will start with the stock standard ones and customize them as we go along.
Right Click the Classes folder in the left hand column and click Add > New File...
Select UITableViewController subclass and click Next
Call the first one BrowseViewController.m and then click Finish
Repeat these steps and create a RecentViewController, FavouritesViewController and SettingsViewController
Now that we have all our stock standard UITableViewControllers created we have to connect them up, we will be doing this in the MainViewController.m file, so open it up and edit its viewDidLoad function to below:
- (void)viewDidLoad {
[super viewDidLoad];
NSLog(@"Main View Did Load: %@", self.tabBarItem.title);
if(self.tabBarItem.title == @"Browse All") {
BrowseViewController *browseViewController = [[BrowseViewController alloc] init];
[self pushViewController:browseViewController animated:YES];
[browseViewController release];
} else if (self.tabBarItem.title == @"Most Recent") {
RecentViewController *recentViewController = [[RecentViewController alloc] init];
[self pushViewController:recentViewController animated:YES];
[recentViewController release];
} else if (self.tabBarItem.title == @"Favourites") {
FavouritesViewController *favouritesViewController = [[FavouritesViewController alloc] init];
[self pushViewController:favouritesViewController animated:YES];
[favouritesViewController release];
} else if (self.tabBarItem.title == @"Settings") {
SettingsViewController *settingsViewController = [[SettingsViewController alloc] init];
[self pushViewController:settingsViewController animated:YES];
[settingsViewController release];
}
}
Now this may not be the most traditional method and isn't very good for massive applications that use heaps of view controllers, etc but it worked fine for my needs and meant I only needed one UINavigationController (MainViewController). What it does is it checks the title of the TabBar item that it is linked to, it then decides which UITableViewController to push into view.
Also don't forget to #import the four new header files
#import "BrowseViewController.h"
#import "RecentViewController.h"
#import "FavouritesViewController.h"
#import "SettingsViewController.h"
If you run your application now you will wee that we have a UITableView visible on each of the TabBar items, but we currently cant tell which one is which as they all look the same.
5. Identifying and Customising our UITableViews
Starting with our BrowseViewController we want to open up the BrowseViewController.m file and alter it's viewDidLoad function to below:
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"Browse All";
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:nil];
}
We have set the title to "Browse All" and we have added a button to the right hand side of the navigation bar, this button is an add button (as indicated by UIBarButtonSystemItemAdd) and currently its action is set to nil, in the future we will connect this up to an UIActionSheet.
Now go through the other three controllers (RecentViewController, FavouritesViewController and SettingsController) and just set the title, not the rightBarButtonItem!
If you run your application now you should be able to navigate through it and see the title change and on the Browse All tab you should see an add button at the top right, although it wont do anything when you press it.
6. Download the Project Files
Click Here to download my version of the Project files, you can use these to work your way through any problems or even to work backwards to see how I do things.
7. Whats Next?
In the next installment we will be creating our SQLite database and adding some feeds and groups, we will also be setting up the BrowseViewController to handle multiple levels of groups with only one view (Drilldown) and we will also be looking at storing images in a SQLite database with a BLOB field.
PLEASE CLICK HERE TO RE-TWEET THIS TUTORIAL
Please do anything you can to spread these tutorials around as the more people that read the faster I will write tutorials!
Popularity: 15% [?]
Its good article and tutorial. As mentioned by some one previousl...
Hi,
Just replying to my own mail about not seeing the data change...
Hi,
Really great tutorial. But I’ve got one problem i.e. i...
jgraham,
I am facing same issue, opening itunes URL from within w...
awesome job! Out of curiosity, I am a new “app developer” if you will, and am having a rough time learning how to write programmes. Do you have any tips that could help me get started? (other than following your great tutorial of course)any help is much appreciated! Can’t wait for the next one!
Cheers,
Jack
Hi Jack,
The best way to learn is to just have a play around. Get an idea (preferably simple) and just run with it, try the different methods, read as many tutorials and books as you can.
Hopefully the next few installments will help you alot.
Cheers,
Dean
Dean,
I am curious why you do not create instance variable of the classes you are using for UITabBarController, but rather use temporary variables and assigning them into the array. Doesn’t such practice create memory leak?
I am still quite confused on the autorelease and memory assignment, not sure which is the correct practice to avoid headaches down the road.
Great tutorial so far. Would you generally say its better to not use interface builder and construct your UI via code? I’ve been wondering this myself lately as interface builder has been pretty buggy. Thanks again for the great tutorial.
I downloaded the code and it compiles and runs fine but I am only getting the original screen with no tab titles etc.
http://dblog.com.au/wp-content/uploads/2009/04/picture-36.png
These are very helpful and just what I am looking to learn. Are you doing more or can we dl the code to the finished project?
Great tutorial, so far.
When is the release date for the next installment?
Thanks.
Hi All!
@Joe: In this case there is no real need to release them as when the TabBarController is destroyed (when the application is closed) they will be destroyed. This is not the case in the UINavigationController as we are creating/removing views everytime we will be drilling down. You could easily make them into instance variables and release them in the dealloc but it would make no difference.
@greg: I am doing more parts all the way through to App Store Publication, I was hoping to get one out last weekend but I ended up having a break for Easter. This weekend should see another release.
@Janise: Thanks for the kind words! As above I will be releasing another installment this weekend hopefully (time permitting).
Cheers,
Dean
Hi Dean,
Any idea on this one below, could it be an SDK version issue, I use 2.0 and 2.1 and haven’t had any issues before.
WallStreetVH Says:
April 14th, 2009 at 10:15 pm
I downloaded the code and it compiles and runs fine but I am only getting the original screen with no tab titles etc.
http://dblog.com.au/wp-content/uploads/2009/04/picture-36.png
Thanks,
John
Hello Dean:
Thanks for this article
I am new to iphone application development.
I have a navigation based application in which I want to add tab bar.
So I followed your code but I am facing issues.
In your code, you started from window application while I started from Navigation based template. When I am building the code tab bar is coming but navigation bar is not coming. And in my first view I have drill down table which is also not drilling . Please help in this
Thanks is advance
I found the problem, anyways thanks for this code
Was wondering what the benefit of using code to setup the TabBar and NavBar is?
I am looking forward to your next tutorial on saving the XML feed to SQLite, as I need this for an idea I have in mind. I’d like to know whether the database will be updated automatically when the feed is updated, or how will it work?
Hiya,
Fantastic tutorial, thanks! Really looking forward to the next part… learning more lpaying with this than the rest of the tutorials put together.
Roll on the next installment!
Cheers,
Dan
Hey,
This tutorial really looks like it will be great. Many other tutorials build only simplistic applications, good for learning basics, but not great for seeing how to put together a realistically sized application. Finally a feature rich tutorial. Keep up the good work, can’t wait for more!
Ryan
Any idea when you will be able to post the next installment?
Thanks.
Hi!
Great, very great tutorial, clarified a lot my thoughts.
Please, post the part 5, can’t wait for it!
It’s been a month, any idea when the next tutorial will be up? I’m waiting anxiously!
Nice work! Looking forward to the next installment.
Another example along these lines: https://devforums.apple.com/message/14050#14050
(you must be a paid iPhone developer to access the link)
Nice tutorial, thanks for the effort.
Could you explain a few things further?
a) Why not use Interface builder?
I had problems with it (drag & drop), but have overcome them and have a full Tab/Nav/Table hierarchical app all structured and configured by IB. My problems were trying to force IB to build the hierarchy a certain way that it wouldn’t allow. I learned how to do it the “IB” way, and it works perfectly.
b) Why sub-class UINavigationController?
You have a nested UINavigationController property that doesn’t get used, and the code you use to load the root view controllers could/should be done in the Application delegate where it can simply be done with something like:
BrowseViewController *browseViewController = [[BrowseViewController alloc] init];
UINavigationController *viewController1 = [[UINavigationController alloc] initWithRootViewController:browseViewController];
[browserViewController release];
In future steps you might be using the nested UINavigationController property, and I’m missing the point.. but its not clear in these steps as to why the property is used. If the property is not used, and the initialisation code is bumped up to the app delegate, there is no need to sub-class the UINavigationController!
Cheers,
Rob
NSString *viewControllerName = [NSString stringWithFormat:@"%@ViewController", self.tabBarItem.title];
UIViewController *viewController = [[NSClassFromString(viewControllerName) alloc] init];
viewController.navigationItem.title = self.tabBarItem.title;
[self pushViewController:viewController animated:YES];
[viewController release];
Hehe!
Excellent tutorial… waiting for the next set.. mainly on the drill down part.. when are u planing to post it?
This is a great series of tutorial, I can’t wait to read on the SQLite part next which I am having trouble with right now.
Nice tutorial…i m thankful to you
I am waiting eagerly for the next tutorial. Please post it soon!
Hi Dean,
This was brilliant, got me right on track.
Any chance you are going to post your tutorial for the next step of adding a Drilldown and SQlite database?
Many thanks,
Web
Where the URL provided for this. I meant , it will show you the feeds of some company web site. Where did u provided that information?
Where is feed? This is just a exampto view the various UI controls etc. I guess we talk about the feed
program? where is that , in the next tutorial?
BUMP
Would love to see the next installment on this series.
It has been great so far!! Keep up the great work.
Hello
I downloaded the code and it compiles and runs fine but I am only getting the original screen with no tab titles etc.
Please help me to understand this problem
http://dblog.com.au/wp-content/uploads/2009/04/picture-36.png
Thank you very much!!
The best tutorial on Iphone development on the web…
When the next lesson is coming?
~Vish
Brilliant, it’s solves my problem mostly, but when I added extra tabs I can’t access any of them from the “more” tab. Still when I move them onto the tab bar they load fine.
Any ideas on how I could get them to load from “more”?
Thanks
Oliver
Great tutorial
Any idea when the next part will be ready and how many parts overall?
Thanks
James
Great tutorial, compliments.
Can you helpme to create sqllite and confogure it in application?
Thanks
“In the next installment we will be creating our SQLite database and adding some feeds and groups, we will also be setting up the BrowseViewController to handle multiple levels of groups with only one view (Drilldown) and we will also be looking at storing images in a SQLite database with a BLOB field.”
Please, how to make it?
Thanks.
Oliver, same problem for me. I also figured out that when you move an item from the “more” table to the tab bar, open it and then move it back to the “more” table, you can also open it from there. Weird… Any solution?