A UISegmentedControl with custom color

matteo — Mon, 24 May 2010 09:24:58 +0000

Update: code for the class is now on GitHub. Also updated with BSD license and a fix for the next iOS version coming soon. If you have issues please use GitHub.

The color of a UISegmentedControl in the UIKit is customizable only in the bar style mode, so if one uses the plain or bordered mode, the only possible color is blue. This could be a problem if blue does not fit well in your app or in a view.

The only way to support other colors is to subclass the UISegmentedColor and draw the view yourself. That’s what I did in the MCSegmentedControl class, here’s how it looks with a green tint color.

Here compared with the standard UISegmentedControl, bordered style (mine is above):

and plain style:

and now with some ugly colors and font:

My implementation is not pixel identical to the Apple one, but it is very similar.

I added support for customizing the tint (i.e. the background of the selected segment), the color of the not selected items and of the selected item, plus, if the segment has an image, it is drawn as a mask, so it will always be in the same color as the text.

Example

// Instantiate as usual
NSArray *items = [NSArray arrayWithObjects:@"first", @"second", [UIImage imageNamed:@"image.png"], nil];
MCSegmentedControl *segmentedControl = [[MCSegmentedControl alloc] initWithItems:items];

// set frame, add to view, set target and action for value change as usual
segmentedControl.frame = CGRectMake(10.0f, 10.0f, 300.0f, 44.0f);
[self.view addSubview:segmentedControl];
[segmentedControl addTarget:self action:@selector(segmentedControlDidChange:) forControlEvents:UIControlEventValueChanged];

// Set a tint color
segmentedControl.tintColor = [UIColor orangeColor];

// Customize font and items color
segmentedControl.selectedItemColor = [UIColor yellowColor];
segmentedControl.unselectedItemColor = [UIColor darkGrayColor];

If you use Interface Builder, add a normal UISegmentedControl, set its class as MCSegmentedControl in the Identity Inspector, set the Tint in the Attributes Inspector.

At the moment, animations and the following UISegmentedControl methods are not supported:

- (void)setWidth:(CGFloat)width forSegmentAtIndex:(NSUInteger)segment;
- (void)setContentOffset:(CGSize)offset forSegmentAtIndex:(NSUInteger)segment

Here are the files: MCSegmentedControl.zip

Matteo Caldari » uikit

A UISegmentedControl with custom color

Example