Alter a UIBarButtonItem view to be transparent programmatically

Question

I've had trouble getting this to work, nowhere have I seen a working example on the web. Now offering bounty on this as its making me crazy. It should be easy, but that doesn't seem to be the case.

I'd like my buttons on my UINavigationBar to be semi-transparent such that they allow the background of whatever is on the UINavigationBar to show through. This effect is seen in many applications, image examples below. You can do this by setting a custom background on the item, which i think is an unacceptable solution because it requires that you prepare images beforehand, and they won't be adaptable for variable buttons etc. They will not look like Apple UI and I don't believe there is a reason to do this either, UIKit is already drawing the background for these buttons, we just need to change it. The correct solution uses the bar items and views generated by Apple's apis.

UIBarButtonItem is not a UIView subclass. When you create one and add it to a UINavigationBar, some code somewhere in the framework draws a view for it. The framework methods seem to resist anything related to allowing transparency of the bar items, such as the tintColor property.

For example, this does NOT work:

 UINavigationItem *item = [[UINavigationItem alloc] init];
 UIBarButtonItem *editButton = [[UIBarButtonItem alloc] initWithTitle:@"SUCKS" style:UIBarButtonItemStyleBordered target:self action:@selector(whatever:)];
editButton.tintColor = [UIColor colorWithWhite:0.4 alpha:0.3];
item.leftBarButtonItem = editButton;

Nothing I do will make UINavigationBar allow semi-transparency for its bar items. I believe at runtime we need to:

1. Get the image for the bar item
2. Mask it for transparency
3. Set the new image on the bar item

But I haven't been able to get the image at runtime or mask it properly. How do you do this?

Answer 1

Create a custom uiview and draw a semi-transparent black rectangle in it and use that view with initWithCustomView.

see and

Failing that, you may have to use an image (png). e.g. a 1x1 black pixel png with 30% opacity.You could then initWithImage.

EDIT: I have had this second approach working using:

buttonThree = [[UIBarButtonItem alloc] initWithTitle:@" sort button " style:UIBarButtonItemStyleBordered target:self action:@selector(sortMethod)];
UIImage *thebgUIimage = [UIImage imageNamed:@"semi.png"];
[buttonThree setBackgroundImage:thebgUIimage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

This results in a button that has a transparent background image that the navbar background image shows through. However, you would need to create an image with the rounded corners on and so need an image for each button width. Also I found this thread after trying the above

Answer 2

A brilliant hack is to use the UISegmentedControl with a single segment (as a button) and set its tint color. Have a look at http://charles.lescampeurs.org/2011/02/10/tint-color-uibutton-and-uibarbuttonitem. I have personally implemented this. Feel free to ask any questions.