- Developing with Navigation Controllers and Split Views
- Recipe: Building a Simple Two-Item Menu
- Recipe: Adding a Segmented Control
- Recipe: Navigating Between View Controllers
- Recipe: Presenting a Custom Modal Information View
- Recipe: Page View Controllers
- Recipe: Scrubbing Pages in a Page View Controller
- Recipe: Tab Bars
- Recipe: Remembering Tab State
- Recipe: Building Split View Controllers
- Recipe: Creating Universal Split View - Navigation Apps
- Recipe: Custom Containers and Segues
- One More Thing: Interface Builder and Tab Bar Controllers
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Recipe: Tab Bars
On the iPhone and iPod touch, the UITabBarController class allows users to move between multiple view controllers and to customize the bar at the bottom of the screen. This is best seen in the YouTube and iPod applications. Both offer one-tap access to different views, and both offer a More button leading to user selection and editing of the bottom bar. Tab bars are not recommended for use as a primary design pattern on the iPad although Apple supports their use in both split views and popovers when needed.
With tab bars, you don’t push views the way you do with navigation bars. Instead, you assemble a collection of controllers (they can individually be UIViewControllers, UINavigationControllers, or any other kind of view controllers) and add them into a tab bar by setting the bar’s viewControllers property. It really is that simple. Cocoa Touch does all the rest of the work for you. Set allowsCustomizing to YES to enable user reordering of the bar.
Recipe 5-7 creates 11 simple view controllers of the BrightnessController class. This class sets its background to a specified gray level, in this case from 0% to 100% in steps of 10%. Figure 5-5 (left) shows the interface in its default mode, with the first four items and a More button displayed.
){kind=link}
Users may reorder tabs by selecting the More option and then tapping Edit. This opens the configuration panel shown in Figure 5-5 (right). These 11 view controllers offer the options a user can navigate through and select from. Readers of earlier editions of this book might note that the Configure title bar's tint finally matches the rest of the interface. Apple introduced the UIAppearance protocol, which allows you to customize all instances of a given class. Recipe 5-7 uses this functionality to tint its navigation bars black.
[[UINavigationBar appearance] setTintColor:[UIColor blackColor]];
)
Figure 6 (Click to Enlarge) Tab bar controllers allow users to pick view controllers from a bar at the bottom of the screen (left side of the figure) and to customize the bar from a list of available view controllers (right side of the figure).
This recipe adds its 11 controllers twice. The first time assigns them to the list of view controllers available to the user:
tbarController.viewControllers = controllers;
The second time specifies that the user can select from the entire list when interactively customizing the bottom tab bar:
tbarController.customizableViewControllers = controllers;
The second line is optional, the first mandatory. After setting up the view controllers, you can add all or some to the customizable list. If you don’t, you still can see the extra view controllers using the More button, but users won’t be able to include them in the main tab bar on demand.
Tab art appears inverted in color on the More screen. According to Apple, this is the expected and proper behavior. They have no plans to change this. It does provide an interesting view contrast when your 100% white swatch appears as pure black on that screen.
Recipe 5-7 Creating a Tab View Controller
@interface BrightnessController : UIViewController
{
int brightness;
}
@end
@implementation BrightnessController
// Create a swatch for the tab icon using standard Quartz
// and UIKit image calls
- (UIImage*) buildSwatch: (int) aBrightness
{
CGRect rect = CGRectMake(0.0f, 0.0f, 30.0f, 30.0f);
UIGraphicsBeginImageContext(rect.size);
UIBezierPath *path = [UIBezierPath
bezierPathWithRoundedRect:rect cornerRadius:4.0f];
[[[UIColor blackColor]
colorWithAlphaComponent:(float) aBrightness / 10.0f] set];
[path fill];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
// The view controller consists of a background color
// and a tab bar item icon
-(BrightnessController *) initWithBrightness: (int) aBrightness
{
self = [super init];
brightness = aBrightness;
self.title = [NSString stringWithFormat:@"%d%%", brightness * 10];
self.tabBarItem = [[UITabBarItem alloc] initWithTitle:self.title
image:[self buildSwatch:brightness] tag:0];
return self;
}
// Tint the background
- (void) viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor =
[UIColor colorWithWhite:(brightness / 10.0f) alpha:1.0f];
}
+ (id) controllerWithBrightness: (int) brightness
{
BrightnessController *controller = [[BrightnessController alloc]
initWithBrightness:brightness];
return controller;
}
@end
#pragma mark Application Setup
@interface TestBedAppDelegate : NSObject
<UIApplicationDelegate, UITabBarControllerDelegate>
{
UIWindow *window;
UITabBarController *tabBarController;
}
@end
@implementation TestBedAppDelegate
- (void)applicationDidFinishLaunching:(UIApplication *)application
{
[application setStatusBarHidden:YES];
window = [[UIWindow alloc]
initWithFrame:[[UIScreen mainScreen] bounds]];
// Globally use a black tint for nav bars
[[UINavigationBar appearance]
setTintColor:[UIColor blackColor]];
// Build an array of controllers
NSMutableArray *controllers = [NSMutableArray array];
for (int i = 0; i <= 10; i++)
{
BrightnessController *controller =
[BrightnessController controllerWithBrightness:i];
UINavigationController *nav =
[[UINavigationController alloc]
initWithRootViewController:controller];
nav.navigationBar.barStyle = UIBarStyleBlackTranslucent;
[controllers addObject:nav];
}
tabBarController = [[RotatingTabController alloc] init];
tabBarController.viewControllers = controllers;
tabBarController.customizableViewControllers = controllers;
tabBarController.delegate = self;
window.rootViewController = tabBarController;
[window makeKeyAndVisible];
return YES;
}
@end