Custom background/transparent background on UIBarButtonItem?

Question

How is this effect achieved? Code snippets are highly welcome.

This can be seen in Notes app and other apps on the App Store.

It seem that either the buttons on the navigation controller are transparent and show the custom background of the navigation controller or that they themselves have a custom background applied to them. Any ideas on how this is achieved?

EDIT:

Here is an example from the iBooks app for the iPhone. As you can see, not only the UIButtons, but also the segmented control have custom backgrounds. I'm thinking that there is a way to globally set transparency/background to different interface elements.

http://c0839932.cdn.cloudfiles.rackspacecloud.com/iBooks%201.1%20-%206.png

Answer 1

If you want to have UIBarButtonItem everywhere in your application, what you can do is in your AppDelegate.m and in your application:didFinishLaunchingWithOptions: method, you can write

[[UIBarButtonItem appearance] setBackgroundImage:[[UIImage alloc] init] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

This will create an empty image, and it will set UIBarButtonItem's background to that image. With writing it into AppDelegate you will make sure everywhere you are using a UIBarButtonitem it will have transparent background, even your back buttons.

Answer 2

I don't think you can make it transparent just by setting some sort of property (but I might be wrong).

Look at the UIBarButtonItem documentation. There are init methods that will take a custom view or an image and create a UIBarButtonItem from it. So create a view or an image with the appearance you want and use that. One thing you might want to try is to create a UIButton the way you want it to look, and then do [[UIBarButtonItem alloc] initWithCustomView:button];

Another solution is to sent the tintColor property of your UINavigationBar to whatever color you want, and the button will take on that color.

Answer 3

You can also create a standard UIButton and set its style to custom and set your image or background color for that button and drag it onto the UINavigationBar.

Answer 4

You could also use the Appearance proxy to set the backgroundImage property of the UIBarButtonItems to your own transparent image:

UIImage *buttonImage = [[UIImage imageNamed:@"barButton"]  resizableImageWithCapInsets:UIEdgeInsetsMake(12, 8, 12, 8)];
[[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil] setBackgroundImage:buttonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil] setBackButtonBackgroundImage:buttonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

Note that I think there's a bug when setting the insets to certain values (11?13?) so if you're having issues, try change the insets as you may have stumbled on that bug.