Programming the iPhone : Standard Control Types (part 6) - Segmented Controls

6. Segmented Controls

Segmented controls provide a compact, persistent grouping of buttons that switch between views. According to the mobile HIG, segmented controls should provide feedback to users by swapping views or otherwise appropriately updating the UI. The feedback should be immediate, avoiding animation effects. It’s conceivable to use segmented controls for complex view management. For example, the following code illustrates the use of segmented controls to manage pagination for a UIScrollView with fixed, known content. This approach isn’t standard for pagination, but it may prove to be more usable than the UIPageControl class, which uses very tiny buttons for paging:

#import "RootViewController.h"
#import "SegmentedPaginatorAppDelegate.h"

@implementation RootViewController

- (void)viewDidLoad
{
	UISegmentedControl *segmentedControl = [[[UISegmentedControl alloc]
		initWithItems:
											 [NSArray arrayWithObjects:
											  @"1",
											  @"2",
											  @"3",
											  @"4",
											  @"5",
											  nil]] autorelease];
	[segmentedControl addTarget:self action:@selector(segmentChosen:)
		forControlEvents:UIControlEventValueChanged];
	segmentedControl.frame = CGRectMake(0, 0, 200, 30.0);
	segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
	segmentedControl.momentary = NO;

	self.navigationItem.titleView = segmentedControl;
	
	UIScrollView *scrollView = [[UIScrollView alloc]
		initWithFrame:self.view.frame];
	scrollView.contentSize = CGSizeMake(320.0, 422.0);
	scrollView.scrollEnabled = NO;
	[scrollView setPagingEnabled:YES];

	UIView *viewOne = [[UIView alloc]
		initWithFrame:CGRectMake(0.0, 0.0, 320.0, 422.0)];
	viewOne.backgroundColor = [UIColor redColor];
	UIView *viewTwo = [[UIView alloc]
		initWithFrame:CGRectMake(320.0, 0.0, 320.0, 422.0)];
	viewTwo.backgroundColor = [UIColor blueColor];
	UIView *viewThree = [[UIView alloc]
		initWithFrame:CGRectMake(640.0, 0.0, 320.0, 422.0)];
	viewThree.backgroundColor = [UIColor greenColor];
	UIView *viewFour = [[UIView alloc]
		initWithFrame:CGRectMake(960.0, 0.0, 320.0, 422.0)];
	viewFour.backgroundColor = [UIColor orangeColor];
	UIView *viewFive = [[UIView alloc]
		initWithFrame:CGRectMake(1280.0, 0.0, 320.0, 422.0)];
	viewFive.backgroundColor = [UIColor yellowColor];

	[scrollView addSubview:viewOne];
	[scrollView addSubview:viewTwo];
	[scrollView addSubview:viewThree];
	[scrollView addSubview:viewFour];
	[scrollView addSubview:viewFive];
	scrollView.contentSize = CGSizeMake(1600.0, 422.0);

	[viewOne release];
	[viewTwo release];
	[viewThree release];
	[viewFour release];
	[viewFive release];

	self.view = scrollView;
}

- (void)segmentChosen:(id)sender
{
	UISegmentedControl* segmentedControl = sender;
	NSUInteger i = [segmentedControl selectedSegmentIndex];
	UIScrollView *scrollView = (UIScrollView *)self.view;
	[scrollView
		scrollRectToVisible:CGRectMake((320.0 * i), 0.0, 320.0, 422.0)
		animated:YES];
}

@end


					  

Figure 10 shows the example running in the iPhone emulator.

Figure 10. Example use of segmented control for pagination

Obviously, this implementation is just a simple example. It wouldn’t be terribly difficult to develop a more usable clone of the UIPageControl element based on the UISegmentedControl class and the segmented control pattern, though such an exercise is outside the scope of this book.

Overall, working with segmented controls is simple and adds a rich supplement to your organization and navigation toolkit.