IOS/Objective-C: Assign custom image to UIBarButtonItem

Question

I am able to assign some images to a UIBarButton item--simple line icons easily in InterfaceBuilder. However, when I assign a full color image, it makes the entire image the color of the tint, blue for default value. If I set the tint to clear color the image disappears. I can't get it to show the image.

I know it is possible to show an image by creating an UIImageView, making a button and assigning the UIImageView to the button, but it seems strange that you have to go to all this trouble for some images, when other images display correctly by just assigning the image property in IB.

Does anyone know of a way to display a colored image without having to go through the whole rigamarole of creating a view etc.

something like btnItem.image = @"myimage.png";

Long way I would like to avoid...

UIImageView* v = [[UIImageView alloc] initWithFrame:CGRectMake(4, 0, 36, 36)];

UIImage *myImage = [UIImage imageNamed:@"headshot-32.png"];  

v.image =myImage;
UIImage *scaledImage = [UIImage imageWithCGImage:[myImage CGImage] scale:(35) orientation:(myImage.imageOrientation)];
v.image=scaledImage;
v.layer.cornerRadius = v.frame.size.width / 2;
v.contentMode = UIViewContentModeScaleAspectFill;
v.clipsToBounds = YES;

UIBarButtonItem* roundBtn = [[UIBarButtonItem alloc] initWithCustomView:v];
self.navigationItem.leftBarButtonItems = @[roundBtn];

score 2 · Answer 1 · answered May 21 '18 at 15:48

I would do something like this:

 UIButton *b = [UIButton buttonWithType:UIButtonTypeCustom];
 [b setFrame:CGRectMake(0, 0, 36, 36)];
 [b addTarget:self action:@selector(randomMsg) forControlEvents:UIControlEventTouchUpInside];
 [b setImage:[UIImage imageNamed:@"headshot-32.png"] forState:UIControlStateNormal];
 UIBarButtonItem * roundBtn = [[UIBarButtonItem alloc] initWithCustomView:b];
 self.navigationItem.leftBarButtonItems = @[roundBtn];

score 2 · Accepted Answer · answered May 21 '18 at 17:16

The problem is rendering mode. When creating an instance of UIImage, its renderingMode property has a default value of UIImageRenderingModeAutomatic. Now, from the documentation of this rendering mode:

Use the default rendering mode for the context where the image is used.

For a UIBarButtonItem rendering mode defaults to UIImageRenderingModeAlwaysTemplate, which creates actually displayed image based on source image's alpha channel.

What you want to do is to change your image's rendering mode to UIImageRenderingModeAlwaysOriginal

UIImage *scaledImage = [UIImage imageWithCGImage:[myImage CGImage] scale:(35) orientation:(myImage.imageOrientation)];
scaledImage.renderingMode = UIImageRenderingModeAlwaysOriginal;
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithImage:scaledImage
                                           style:UIBarButtonItemStylePlain
                                           target:yourTarget
                                           action:someSelector];

This ensures that an original image will be displayed, instead of one created from alpha channel.

Ok. And I take it there is no way to change the rendering mode in IB? — user6631314, May 21 '18 at 17:58
Not directly, but you can check out [this answer](https://stackoverflow.com/questions/19517334/modify-uiimage-renderingmode-from-a-storyboard-xib-file) — mag_zbc, May 21 '18 at 18:01
I think you need to create a new image with the alwaysoriginal rendering mode as the .rendering mode property is readonly — user6631314, May 22 '18 at 15:13

score -1 · Answer 3 · answered May 21 '18 at 18:11

Alright do one thing make UIBarButtonItem programmatically in viewWillAppear

UIButton *ArrowSnapCapture  = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 40 , 35)];
[ArrowSnapCapture setImage:[UIImage imageNamed:@"ArrowIcon"] forState:UIControlStateNormal];
[ArrowSnapCapture addTarget:self action:@selector(CaptureSS) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:Notification];
[self.navigationItem setRightBarButtonItem:rightBarButtonItem];

rightBarButtonItem=nil;

IOS/Objective-C: Assign custom image to UIBarButtonItem

3 Answers3