CODEWITHSUNDEEP
iosobjective-cuinavigationbaruibarbuttonitem
jdog
jdog

Reputation: 10769

Custom UIBarButtonItem

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?

enter image description here

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?

Upvotes: 7

Views: 18983

Answers (6)

Splendid
Splendid

Reputation: 1061

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;

Upvotes: 3

NANNAV
NANNAV

Reputation: 4901

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

Upvotes: 0

Javvadi Rajesh
Javvadi Rajesh

Reputation: 281

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.

enter image description here

Upvotes: 7

Ayush
Ayush

Reputation: 3999

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];

Upvotes: 4

Jonathon Hibbard
Jonathon Hibbard

Reputation: 1546

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];

Upvotes: 1

Primoz990
Primoz990

Reputation: 1738

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;

Upvotes: 15

Related Questions