Thursday, July 22, 2010

Custom tintColor for each segment of UISegmentedControl

The UISegmentedControl offers the ability to set the tint color for the entire control, but it does not offer the ability to set the tint color for an individual segment. In fact, the UISegment class, the actual class for the individual segments, is not publicly documented. So, what I propose here does go a bit off the farm, but it only uses publicly available API to accomplish it. Here is the end result.
The first step is to create an extension to the UISegmentedControl. The extension neatly wraps up the new functionality so that it can be easily reused instead of cluttering up your view controllers.

@interface UISegmentedControl(CustomTintExtension)
-(void)setTag:(NSInteger)tag forSegmentAtIndex:(NSUInteger)segment;
-(void)setTintColor:(UIColor*)color forTag:(NSInteger)aTag;
-(void)setTextColor:(UIColor*)color forTag:(NSInteger)aTag;
-(void)setShadowColor:(UIColor*)color forTag:(NSInteger)aTag;

#import "UISegmentedControlExtension.h"

@implementation UISegmentedControl(CustomTintExtension)

-(void)setTag:(NSInteger)tag forSegmentAtIndex:(NSUInteger)segment {
[[[self subviews] objectAtIndex:segment] setTag:tag];

-(void)setTintColor:(UIColor*)color forTag:(NSInteger)aTag {
// must operate by tags. Subview index is unreliable
UIView *segment = [self viewWithTag:aTag];
SEL tint = @selector(setTintColor:);

// UISegment is an undocumented class, so tread carefully
// if the segment exists and if it responds to the setTintColor message
if (segment && ([segment respondsToSelector:tint])) {
[segment performSelector:tint withObject:color];

-(void)setTextColor:(UIColor*)color forTag:(NSInteger)aTag {
UIView *segment = [self viewWithTag:aTag];
for (UIView *view in segment.subviews) {
SEL text = @selector(setTextColor:);

// if the sub view exists and if it responds to the setTextColor message
if (view && ([view respondsToSelector:text])) {
[view performSelector:text withObject:color];

-(void)setShadowColor:(UIColor*)color forTag:(NSInteger)aTag {

// you probably know the drill by now
// you could also combine setShadowColor and setTextColor
UIView *segment = [self viewWithTag:aTag];
for (UIView *view in segment.subviews) {
SEL shadowColor = @selector(setShadowColor:);
if (view && ([view respondsToSelector:shadowColor])) {
[view performSelector:shadowColor withObject:color];

Once that is in place, here is an example of a typical UIViewController taking advantage of it.


#import "SegmentColorsViewController.h"
#import "UISegmentedControlExtension.h"

#define kTagFirst 111
#define kTagSecond 112
#define kTagThird 113

@interface SegmentColorsViewController(PrivateMethods)

@implementation SegmentColorsViewController

-(void)viewDidLoad {

// create a simple segmented control
// could have done this in Interface Builder just the same
NSArray *items = [[NSArray alloc] initWithObjects:@"orange", @"yellow", @"green", nil];
UISegmentedControl *colors = [[UISegmentedControl alloc] initWithItems:items];
[items release];
[colors setSegmentedControlStyle:UISegmentedControlStyleBar];
[colors setTintColor:[UIColor lightGrayColor]];
[colors setFrame:CGRectMake(20.0f, 20.0f, 280.0f, 30.0f)];
[colors addTarget:self action:@selector(segmentChanged:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:colors];

// ... now to the interesting bits

// at some point later, the segment indexes change, so
// must set tags on the segments before they render
[colors setTag:kTagFirst forSegmentAtIndex:0];
[colors setTag:kTagSecond forSegmentAtIndex:1];
[colors setTag:kTagThird forSegmentAtIndex:2];

[colors setTintColor:[UIColor orangeColor] forTag:kTagFirst];
[colors setTintColor:[UIColor yellowColor] forTag:kTagSecond];
[colors setTintColor:[UIColor greenColor] forTag:kTagThird];

[self setTextColorsForSegmentedControl:colors];
[colors release];

-(void)segmentChanged:(id)sender {
// when a segment is selected, it resets the text colors
// so set them back
[self setTextColorsForSegmentedControl:(UISegmentedControl*)sender];

-(void)setTextColorsForSegmentedControl:(UISegmentedControl*)segmented {
[segmented setTextColor:[UIColor yellowColor] forTag:kTagFirst];
[segmented setTextColor:[UIColor blackColor] forTag:kTagSecond];
[segmented setTextColor:[UIColor blueColor] forTag:kTagThird];

[segmented setShadowColor:[UIColor redColor] forTag:kTagFirst];
[segmented setShadowColor:[UIColor whiteColor] forTag:kTagSecond];
[segmented setShadowColor:[UIColor clearColor] forTag:kTagThird];