Tint UIButton and UIBarButtonItem

Edit 2011-11-04

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

This source code is created and enhanced in my leisure time for free. Your donation allows me to continue my development and any amount is greatly appreciated.

9 thoughts on “Tint UIButton and UIBarButtonItem

  1. I was wondering how you make the buttons work. I’ve tried setting the selector on the segment and the UIBarButton, and nothing seems to work. Anyone got that working? :-)

  2. Great article, still usefull if you need to support iOS 4.3.
    If you want to display an image / icon you can just init the UISegmentControll with one empty NSString (@””) and then use [button setImage:[UIImage imageNamed:@”icon.png”] forState:UIControlStateNormal]; to set the image.
    When setting the action for the button remember to use forControlEvents:UIControlEventValueChanged!

  3. great article.
    When I press the button, it’s stays pressed only for ~half a second. How can I make it behave more like a regular button?

Leave a Reply