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!

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(_:)))
    

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

I would try to set

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

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.

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)

After you create your bar button item do next:

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

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.

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.

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.

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