自定义UIBarButtonItem

Question

I am trying to create a custom UIBarbuttonItem that uses just a png with transparency so that I only have an icon as button. When I try to set the button image, set the background as white, and set the style to Plain I still get an inner shadow and black border around it.

What gives?

I have tried the below code and it still puts the black border around it.

UIImage *background = [UIImage imageNamed:@"Dismiss_normal.png"];
UIImage *backgroundSelected = [UIImage imageNamed:@"Dismiss_selected.png"];
self.closeButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.closeButton addTarget:self action:@selector(closeButtonPressed:) forControlEvents:UIControlEventTouchUpInside]; //adding action
[self.closeButton setBackgroundImage:background forState:UIControlStateNormal];
[self.closeButton setBackgroundImage:backgroundSelected forState:UIControlStateSelected];
self.closeButton.frame = CGRectMake(0 ,0,background.size.width, background.size.height);
self.closeButtonItem = [[UIBarButtonItem alloc] initWithCustomView:self.closeButton];
self.navigationItem.leftBarButtonItem = self.closeButtonItem;

What I noticed is if I do a modal segue the button, with the code above still has a black border around it, but if I do a push segue it doesn't? WTF?

Answer 1

You must set the button type to Custom and the icon image to the button background . example code:

UIImage *background = [UIImage imageNamed:@"icon.png"];
UIImage *backgroundSelected = [UIImage imageNamed:@"icon_selected.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self action:@selector(checkButtonTapped:event:) forControlEvents:UIControlEventTouchUpInside]; //adding action
[button setBackgroundImage:background forState:UIControlStateNormal];
[button setBackgroundImage:backgroundSelected forState:UIControlStateSelected];
button.frame = CGRectMake(0 ,0,35,35);

Then set this button to your BarButtonItem like this:

UIBarButtonItem *barButton = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.leftBarButtonItem = barButton;

Answer 2

I understood your problem.

When you actually push a UIViewController it will be a part of existing UINavigationController . So the UINavigationBar retains. But when you use ModalViewController its just another UIViewController kind of "added" to your existing UIViewController . So the UINavigationBar won't be there.

But you can add another UINavigationBar from xib and add a UIButton . But don't directly add the UIButton , if you do so it will automatically convert to UIBarButton making it bordered.

So first drag a normal UIButton to your UIView (not navigation bar). Change it to custom and add UIImage to it using Attribute Inspector . Then drag that image to your custom created UINavigationBar . It will work as I tried it just now. You can see the screen shot attached below.

Answer 3

This will update ALL back buttons and navigation bars throughout the app.

I have used the Following code to set Custom Navigation back button

UIImage *imgBack = [[UIImage imageNamed:@"nav_back.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(-6, 22, -6, 0)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:imgBack forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

and the Following code for Setting background image on navigation bar.

UIImage *navBackgroundImage = [UIImage imageNamed:@"nav_bar.png"];
[[UINavigationBar appearance] setBackgroundImage:navBackgroundImage forBarMetrics:UIBarMetricsDefault];

Answer 4

Try use [UIBarButtonItem initWithCustomView]

UIImage *menuButtonImage = [UIImage imageNamed:@"list.png"];// set your image Name here 
UIButton *btnToggle = [UIButton buttonWithType:UIButtonTypeCustom];
[btnToggle setImage:menuButtonImage forState:UIControlStateNormal];
btnToggle.frame = CGRectMake(0, 0, menuButtonImage.size.width, menuButtonImage.size.height);
UIBarButtonItem *menuBarButton = [[UIBarButtonItem alloc] initWithCustomView:btnToggle];
self.navigationItem.leftBarButtonItem = menuBarButton;

Answer 5

I personally like FlatUIKit's approach by just flattening out the entire UI through UIAppearance

Essentially, you'd do something like:

UIImage *backButtonPortraitImage = [UIImage backButtonImageWithColor:color barMetrics:UIBarMetricsDefault cornerRadius:cornerRadius];
UIImage *highlightedBackButtonPortraitImage = [UIImage backButtonImageWithColor:highlightedColor barMetrics:UIBarMetricsDefault cornerRadius:cornerRadius];

[appearance setBackButtonBackgroundImage:backButtonPortraitImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[appearance setBackButtonBackgroundImage:highlightedBackButtonPortraitImage forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];

UIImage *buttonImageNormal       = [UIImage imageWithColor:color cornerRadius:cornerRadius];
UIImage *buttonImageHightlighted = [UIImage imageWithColor:highlightedColor cornerRadius:cornerRadius];

[appearance setBackgroundImage:buttonImageNormal forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[appearance setBackgroundImage:buttonImageHightlighted forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];

Answer 6

Try this code..

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *btnImage = [UIImage imageNamed:@"bg"];
[button setImage:btnImage forState:UIControlStateNormal];
button.frame = CGRectMake(0, 0, btnImage.size.width, btnImage.size.height);
[button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
UIImage *icon = [UIImage imageNamed:@"icon"]
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.frame = CGRectMake(0, 0, icon.size.width, icon.size.height);
[button addSubview:iconView];
iconView..userInteractionEnabled=NO;
[iconView centerBothDirections];
[iconView release];
UIBarButtonItem *barbtn = [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];
self.navigationItem.leftBarButtonItem =barbtn