CODEWITHSUNDEEP
iphoneuibarbuttonitem
Shumais Ul Haq
Shumais Ul Haq

Reputation: 1447

add image to UIBarButtonItem using initWithImage:(UIImage *)image

I would like to know how to set an image to a UIBarButtonItem which will then be added to a UIToolbar, by using InitWithImage when creating a UIBarButtonItem.

I am doing the following, but it creates a blank whitespace where the image should be on the UIToolbar

UIImage *image = [UIImage imageNamed:@"6.png"];

UIBarButtonItem *systemItem1 = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:self action:@selector(pp:)];

Thank You!

Upvotes: 68

Views: 85052

Answers (10)

yoAlex5
yoAlex5

Reputation: 34175

You are able to create UIBarButtonItem with system standard icons using
- initWithBarButtonSystemItem:target:action:

For example:

[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemRewind target:self action:@selector(YOUR_METHOD:)];

Upvotes: 0

Vahan
Vahan

Reputation: 2186

And for iOS 7+ you do the following:

Objective-C

 UIImage *image = [[UIImage imageNamed:@"myImage.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
 UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:self action:@selector(YOUR_METHOD:)];

Swift 2.3

 let image = UIImage(named: "myImage")?.imageWithRenderingMode(.AlwaysOriginal)
 let button = UIBarButtonItem(image: image, style: .Plain, target: self, action: #selector(YOUR_METHOD(_:)))

Swift 3.0

let image = UIImage(named: "myImage")?.withRenderingMode(.alwaysOriginal)
let button = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(YOUR_METHOD(_:)))

Upvotes: 79

King-Wizard
King-Wizard

Reputation: 15694

In Swift:

First solution

let img = UIImage(named: "picture")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
let leftBarButtonItem = UIBarButtonItem(image: img, style: UIBarButtonItemStyle.Plain, target: self, action: nil)
self.navigationItem.leftBarButtonItem = leftBarButtonItem

Second solution

let img = UIImage(named: "picture")!
let imgWidth = img.size.width
let imgHeight = img.size.height
let button = UIButton(frame: CGRect(x: 0, y: 0, width: imgWidth, height: imgHeight))
button.setBackgroundImage(img, forState: .Normal)
button.addTarget(self, action: nil, forControlEvents: UIControlEvents.TouchUpInside)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)

Upvotes: 15

alex1704
alex1704

Reputation: 529

After you create your bar button item do next:

systemItem1.image = [systemItem1.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

Upvotes: 2

vladof81
vladof81

Reputation: 26499

I would write the same code as you do. Note when you add image to project, make sure it is added to the target you are building against.

Upvotes: 0

IOS Learner
IOS Learner

Reputation: 75

The UIBarbuttonItem initWithImage will not create a bar button with that specified Image. It creates a pattern of a UIBarbutton using the given image. If the specified image is not transparent it will show a bar button with specified tintcolor on it which has the size of the image. If the image has opaque parts then the tint color will be filled on the opaque parts like the default UIBarButtonSystemItemBookmarks.It hase opaque boarder and transparent inner side.

In your case the titncolor is white that is why it shows white.

Upvotes: 0

Kwexi
Kwexi

Reputation: 1011

Here's an example that creates a toolbar button from the Facebook logo. Create a pointer to an image (file already added to xCode), create a custom button, change the size of the button to match the image, set image of button, create toolbar button from button view.

UIImage *faceImage = [UIImage imageNamed:@"facebook.png"];
UIButton *face = [UIButton buttonWithType:UIButtonTypeCustom];
face.bounds = CGRectMake( 0, 0, faceImage.size.width, faceImage.size.height );
[face setImage:faceImage forState:UIControlStateNormal];
UIBarButtonItem *faceBtn = [[UIBarButtonItem alloc] initWithCustomView:face];

Upvotes: 72

Tim Bowen
Tim Bowen

Reputation: 677

From the documentation of UIBarButtonItem:

The images displayed on the bar are derived from this image. If this image is too large to fit on the bar, it is scaled to fit. Typically, the size of a toolbar and navigation bar image is 20 x 20 points. The alpha values in the source image are used to create the images—opaque values are ignored.

In other words, the UIBarButton item is going to disregard the color of your image and recolor it according to the current bar style. The only way it will display an image is if the image is drawn using varying alpha values. Since all the pixels of your image have an alpha value of 1, they are all drawn at maximum brightness and you get a white space.

Upvotes: 18

Kwexi
Kwexi

Reputation: 1011

I was having this problem too and solved it by using a png file with an alpha channel. I was trying to do a quick mockup and added a back button with a jpg file on a background the default colour of the buttons. I got a white rectangle. But when I created an arrow on a transparent background and saved it as a png file, it worked.

Upvotes: 0

Steven David
Steven David

Reputation: 704

I would try to set 

UIBarButtonItem *systemItem1 = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"image.png"] style:UIBarButtonItemStylePlain target:self action:@selector(pp:)];

Upvotes: 41

Related Questions