iPad App - Tab buttons at bottom or Toolbar buttons at the top

[kamy]

Hi Experts,

I'm working on the iPad section of my universal App.
In the iPhone the design for a simple nav based app will include 3 to 4 Tab Bar items inside a tab bar, which resides at the bottom of the screen.

When user taps on a tab, we show a view.
On clicking the first tab, we show a view (say a list of products, which leads to a product detail view.)

When it comes to iPad, i'm wondering at the design options available.
I know that for the - product and product detail screens, we could go for a SplitViewController and i got it working.

Now for the app options, shall i include 3 to 4 Tab Bar items inside a tab bar, which resides at the bottom of the screen or a 3 to 4 Tool Bar Items inside a toolbar, which resides at the top of the screen?

So i click on the first toolbar or tab bar button, it shows me the split view controller, if i click on the 'About' toolbar or tab bar button, it should show the About view.

Which is a better design strategy for an iPAD app - Tab Bar items at the bottom or ToolBar Items at the top?

[mashercakes]

I don't like the idea of BarButtonItems being used to switch views as they don't show the status. You could put a SegmentedControl inside the titleView and use that to switch views. Alternatively, the TabBarController is a simple and functional solution.

[kamy]

Originally Posted by mashercakes

I don't like the idea of BarButtonItems being used to switch views as they don't show the status. You could put a SegmentedControl inside the titleView and use that to switch views. Alternatively, the TabBarController is a simple and functional solution.

mashercakes - Thanx for the reply. Are there any screenshots/examples of iPad apps with TabBarController or the SegmentedControl inside the titleView?

[mashercakes]

The App Store app uses a tab bar at the bottom and a segmented control at the top (on the Featured and Purchased tabs). I also use it in my apps TalkBoard and PicBoard. I can provide a code example if needed.

[kamy]

Originally Posted by mashercakes

The App Store app uses a tab bar at the bottom and a segmented control at the top (on the Featured and Purchased tabs). I also use it in my apps TalkBoard and PicBoard. I can provide a code example if needed.

Thanks You in advance. Id really appreciate code examples for setting up
the tab bar at the bottom or a segmented control at the top.

I'm building my SplitView dynamically and i have got that to work.
This is the code...

//create the master view
MyRequestsController *masterView = [[MyRequestsController alloc] initWithNibName:@"IncidentListView"
bundle:[NSBundle mainBundle]];

//create the details view
IncidentUpdateController *detailsView = [[IncidentUpdateController alloc] initWithNibName:@"IncidentUpdateController" bundle:[NSBundle mainBundle]];

UINavigationController *mainNavigationController = [[UINavigationController alloc] initWithRootViewController:masterView];

//create the split view
UISplitViewController *splitController = [[UISplitViewController alloc] init];
//create and set the split view delegate
SplitViewDelegate* splitViewDelegate = [[SplitViewDelegate alloc] init];
splitViewDelegate.detailController = detailsView;
splitController.delegate = splitViewDelegate;

masterView.updateController = detailsView;
//set the view controllers array
splitController.viewControllers = [NSArray arrayWithObjects:mainNavigationController, detailsView, nil];

//show split view as the main view
[self.view addSubview:splitController.view];

I would appreciate help code examples for setting up
the tab bar at the bottom or a segmented control at the top. Which would u recommend?

Thanx in advance.

[kamy]

Originally Posted by mashercakes

The App Store app uses a tab bar at the bottom and a segmented control at the top (on the Featured and Purchased tabs). I also use it in my apps TalkBoard and PicBoard. I can provide a code example if needed.

Checked out Talkboard...wow a great app. Congratulations...have an eval version?

[mashercakes]

Tab bar is probably easier as it manages the view controllers for you. Using a segmented control you have to manually add/remove viewcontroller views, or manually manage a navigation stack.

I'm not using a tab bar any more in my app, but I find setting them up in IB very, very complicated. I think it's much easier to do it all in code.

Here is a link to an excellent tutorial which taught me how to do it:

UITabBarController Programmatically | iPhone Life

Once you get your head around creating the view controllers, adding them to an array, then using that array to set the view controllers to be managed by the tab bar controller, it's quite simple.

Have a read of that and let us know how you get on

[mashercakes]

Originally Posted by kamy

Checked out Talkboard...wow a great app. Congratulations...have an eval version?

Thanks! No eval version as yet, but I have been thinking about it. I can't work out how to limit it enough to encourage people still to buy without making it useless :/

[kamy]

Hi mashercakes,
Thanks for the tutorial of dynamically adding tabs. I got the tabs to appear in both iPhone and iPad. Appreciate your help. If anyone wants to look at the code let me know.

But i have an issue, where there is a 20px gap at the top of the toolbar in both the iPad and iPhone. (Look at attachment)
Why is that? As a result the tabs are not displayed properly


I solved that in the iPad by
CGRect tzvFrame = CGRectMake(0.0, 0.0, 768 ,1004);
tabBarController.view.frame = tzvFrame;

before showing the tabBarController, but then this causes issues in Landscape mode.....
a) Why do we have the 20px gap at the top and how do we solve it?

[mashercakes]

That's strange. I used the tutorial to write my tab bar controller and didn't have that problem. What type of controller are you displaying? How is the navigation bar created?

Perhaps if you post your code I'll be able to see what's wrong.

[kamy]

Originally Posted by mashercakes

That's strange. I used the tutorial to write my tab bar controller and didn't have that problem. What type of controller are you displaying? How is the navigation bar created?

Perhaps if you post your code I'll be able to see what's wrong.

Hey mashercakes, thanx for your reply.
I have posted the code below, here am dynamically creating everything and i can see the tabs and as the screenshot pointed out, all works except the weird whitespace issue.

//create the master view
MyRequestsController_iPad *masterView = [[MyRequestsController_iPad alloc]														initWithNibName:@"IncidentListView_iPad"													bundle:[NSBundle mainBundle]];
					
//create the details view
IncidentUpdateController_iPad *detailsView = [[IncidentUpdateController_iPad alloc]														  initWithNibName:@"IncidentUpdateController_iPad								  bundle:[NSBundle mainBundle]];
					
UINavigationController *mainNavigationController = [[UINavigationController alloc] 															initWithRootViewController:masterView];				
					
//create the split view
UISplitViewController *splitController = [[UISplitViewController alloc] init];
					
					
//create and set the split view delegate 
//(SplitViewDelegate - custom class inherited from 
//NSObject <UISplitViewControllerDelegate> acts as delegate
SplitViewDelegate* splitViewDelegate = [[SplitViewDelegate alloc] init];
splitViewDelegate.detailController = detailsView;
splitController.delegate = splitViewDelegate;
					
masterView.updateController = detailsView;
					
//set the view controllers array
splitController.viewControllers = [NSArray													   arrayWithObjects:mainNavigationController, detailsView, nil];
		
//Create the tab bar controller			
UITabBarController *tabBarController = [[UITabBarController alloc] init];
NSMutableArray *localControllersArray = [[NSMutableArray alloc] initWithCapacity:3];
//Set the tab image and text for our split view					
splitController.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"My Incidents" image:[UIImage imageNamed:@"icon-my-requests.png"] tag:0];
					
//Add two more views and we will add 2 more tabs					
UINavigationController *niNavController = [[UINavigationController alloc] init];
UINavigationController *aiNavController = [[UINavigationController alloc] init];
					
					
AddIncidentController *niController = [[AddIncidentController alloc] 														   initWithNibName:@"AddIncidentView"														  bundle:nil];

niController.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"New Incident" image:[UIImage imageNamed:@"icon-new-request.png"] tag:1];
					
AboutController *aiController = [[AboutController alloc] 													 initWithNibName:@"AboutView"													 bundle:nil];

aiController.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"App Info" image:[UIImage imageNamed:@"icon_about.png"] tag:2];
					
[niNavController pushViewController:niController animated:NO];
[aiNavController pushViewController:aiController animated:NO];
					
[niController release];
[aiController release];
					
					
[localControllersArray addObject:splitController];
[localControllersArray addObject:niController];
[localControllersArray addObject:aiController];
					
[niNavController release];
[aiNavController release];	
					
// load up our tab bar controller with the view controllers
tabBarController.viewControllers = localControllersArray;
					
// release the array because the tab bar controller now has it
[localControllersArray release];
					

//This code solves the WHITESPACE issue, but its not the solution, is it?					
CGRect tzvFrame = CGRectMake(0.0, 0.0, 768 ,1004);
tabBarController.view.frame = tzvFrame;  //Solves whitespace issue	
					
//show tabs with split view as the main view
[self.view addSubview:tabBarController.view];
[self.view.window makeKeyAndVisible];
					
//release stuff
[splitController release];
[masterView release];
[detailsView release];

[mashercakes]

I think this is the problem:

[self.view addSubview:tabBarController.view];
[self.view.window makeKeyAndVisible];

The tabbarcontroller should really be presented modally, or as the app's main viewcontroller, or pushed by a navigation controller. I had the same problem with a 20px gap when adding the view of an ImagePicker as a subview similar to how you added your tabbarcontroller.

[kamy]

Originally Posted by mashercakes

I think this is the problem:

[self.view addSubview:tabBarController.view];
[self.view.window makeKeyAndVisible];

The tabbarcontroller should really be presented modally, or as the app's main viewcontroller, or pushed by a navigation controller. I had the same problem with a 20px gap when adding the view of an ImagePicker as a subview similar to how you added your tabbarcontroller.

Thanks mashercakes....i will get look at alternate ways of pushing the tabviewcontroller....

Can you take a look at another crazy issue, of not able to see the popover button...
Described in this thread...
http://www.iphonedevsdk.com/forum/ip...tml#post350583

[kamy]

Mashercakes - ignore my previous post....i got it solved

[kamy]

Originally Posted by mashercakes

I think this is the problem:

[self.view addSubview:tabBarController.view];
[self.view.window makeKeyAndVisible];

The tabbarcontroller should really be presented modally, or as the app's main viewcontroller, or pushed by a navigation controller. I had the same problem with a 20px gap when adding the view of an ImagePicker as a subview similar to how you added your tabbarcontroller.

MasherCaskes - u r bang on target!
i replaced this code

[self.view addSubview:tabBarController.view];
[self.view.window makeKeyAndVisible];

with

[myAppDelegate.window addSubview:tabBarController.view];
[myAppDelegate.window makeKeyAndVisible];

and its beautiful now!
U rock dude! Thank You!

[mashercakes]

Originally Posted by kamy

Mashercakes - ignore my previous post....i got it solved

Just as well, I don't know anything about split view controllers

[mashercakes]

Originally Posted by kamy

MasherCaskes - u r bang on target!
i replaced this code

[self.view addSubview:tabBarController.view];
[self.view.window makeKeyAndVisible];

with

[myAppDelegate.window addSubview:tabBarController.view];
[myAppDelegate.window makeKeyAndVisible];

and its beautiful now!
U rock dude! Thank You!

Great, glad you got it working