Tint UIButton and UIBarButtonItem

http://charles.lescampeurs.org/2011/02/10/tint-color-uibutton-and-uibarbuttonitem

Since iOS 5.0, UIButton and UIBarButtonItem have a tintColor property.

 

You may have noticed that the tint property is not available for UIButton and UIBarButtonItem.

Two common techniques to change the color, you can find around are drawing button with CoreGraphic or using a stretchable UIImage.

Lately, I found a new technique based on UISegmentedControl which you can use the tint property to change the color of your button. This control can be tweaked to have only one segment with a UIButton style (UISegmentedControlStyleBar).

A standard UISegmentedControl

Tweaking the control

We will now create a UISegmentedControl with one segment and set its tint color:

UISegmentedControl *button = [[[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"Add", nil]] autorelease];
button.frame = CGRectMake(0, 0, 160, 33);
button.center = self.view.center;
button.momentary = YES;
button.segmentedControlStyle = UISegmentedControlStyleBar;
button.tintColor = UIColorFromRGB(0x0000DD);
[self.view addSubview:button];

Compile your code, your button will look like the following screenshot:

Refer to the UISegmentedControl class reference for a detailled explanation of its properties.

I used a macro in this code to define my tint color. Macro definition is:

#define UIColorFromRGB(rgbValue) [UIColor \
  colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 \
  green:((float)((rgbValue & 0xFF00) >> 8))/255.0 \
  blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

You can read more about defining macro or function here and here.

In a toolbar

You can also use this technique to tint UIBarButtonItem used in UIToolBar.

UIToolbar *toolbar = [[[UIToolbar alloc] init] autorelease];
toolbar.barStyle = UIBarStyleDefault;
[toolbar sizeToFit];
toolbar.frame = CGRectMake(0, self.view.frame.size.height-44, self.view.frame.size.width, 44);
[self.view addSubview:toolbar];

/* Create our tinted buttons */
UISegmentedControl *button = [[[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"Add", nil]] autorelease];
button.momentary = YES;
button.segmentedControlStyle = UISegmentedControlStyleBar;
button.tintColor = UIColorFromRGB(0x0d9c23);

UIBarButtonItem *barButton = [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];
UISegmentedControl *button2 = [[[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"Delete", nil]] autorelease];
button2.momentary = YES;
button2.segmentedControlStyle = UISegmentedControlStyleBar;
button2.tintColor = UIColorFromRGB(0xC84131);
UIBarButtonItem *barButton2 = [[[UIBarButtonItem alloc] initWithCustomView:button2] autorelease];

[toolbar setItems:[NSArray arrayWithObjects: barButton, barButton2, nil]];

You now have a toolbar with 2 tinted buttons that look like that:

Download on GitHub.com