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

Question

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

I do the following, but it creates empty spaces 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!

Answer 1

Here is an example that creates a toolbar button with the Facebook logo. Create a pointer to the image (a file already added to xCode), create a custom button, resize the button to fit the image, set the button image, create a toolbar button from the 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]; 

Answer 2

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

Answer 3

I would try to install

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

Answer 4

From the UIBarButtonItem documentation :

Images displayed on the panel are taken from this image. If this image is too large to fit on the bar, it is scaled. Typically, the size of the toolbar and image on the navigation bar is 20 x 20 pixels. The alpha values ​​in the original image are used to create opaque image values.

In other words, the UIBarButton element will ignore the color of your image and recolor it according to the current style. The only way to display an image is with an image drawn using various alpha values. Since all the pixels in your image have an alpha value of 1, they are all drawn with maximum brightness, and you get empty space.

Answer 5

In Swift :

First decision

 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) 

Answer 6

After you create the panel item, do the following:

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

Answer 7

I also had this problem, and I decided to use it using a png file with an alpha channel. I tried to make a quick layout and added a back button with a jpg file on the background of the default color of the buttons. I got a white rectangle. But when I created the arrow on a transparent background and saved it as a png file, it worked.

Answer 8

UIBarbuttonItem initWithImage will not create a panel button with the specified image. It creates a UIBarbutton template using this image. If the specified image is not transparent, a button with the specified hue color, the size of which is the size, will be displayed on it. If the image has opaque parts, then the hue color will be filled with opaque parts, such as the default UIBarButtonSystemItemBookmark. It has an opaque face and a transparent inner side.

In your case, titncolor is white, so it shows white.

Answer 9

I would write the same code as you. Pay attention when you add an image to the project, make sure that it is added to the purpose for which you are building.