3

I'm trying to put an image onto the UI Navigation Bar and facing a couple issues with tint. The image is a 40*40 with transparency (png).

The image looks like this in xcode:

logo

When I place in as the image of a UI Bar Button Item it appears as this:

navigation bar

Notice how the color's have changed. The default color of the app is brown and hence the default tint is shining through.

How do I get the original colors of the image to show?

Thanks

edit:

aspect ratio issue:

enter image description here

wholly_cow
  • 907
  • 5
  • 13
  • 20

2 Answers2

5

Taken from the apple documentation:

UIImageView includes the tintColor property. When the image view contains a template image—that is, an image that specifies the UIImageRenderingModeAlwaysTemplate rendering mode—tintColor is applied to the image.

So you need to set the rendering mode of your image to: UIImageRenderingModeAlwaysOriginal

UIImage *originalImage = [UIImage imageNamed:@"navBarImage.png"];
originalImage = [originalImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
//Then apply the image to the navigation bar

If you are developing for an iOS app which seems to be the case then I suggest leaving your image the way it shows atm as it looks much better having it flat than it does with your origianl image. This is just my opinion, I feel that it its clearer and clean.

Pavan
  • 17,840
  • 8
  • 59
  • 100
  • Thanks! This solved the tintColor problem. But now the aspect ratio of the image is lost. I'll update the question with a picture. I'm using a square 40px image as per [link]http://stackoverflow.com/questions/1590170/how-big-should-a-uibarbuttonitem-image-be[link] – wholly_cow Jan 18 '14 at 19:33
  • Dude, have you tried to atleast research on the aspect ratio bit? and how to set the frame of an imageView? Because its quite an easy fix – Pavan Jan 18 '14 at 19:43
  • But i'm not using an imageView. I was taking a short cut but just using a bar button item and then putting the image on that :) Thanks though - I solved the problem using: http://www.appgroup.co.uk/adding-a-uibarbuttonitem-with-a-custom-image/ Also flattened my image - thanks for the reccomendation – wholly_cow Jan 18 '14 at 19:47
2

Swift:

let customImageBarButton = UIBarButtonItem(UIImage(named: "someImage.png").withRenderingMode(.alwaysOriginal), style: .plain, target: self, action: #selector(handleClick))

A 22pt x 22pt icon size works better.

i.e. a 66px x 66px image @3x for iPhone Plus phones etc.

Nitin Nain
  • 5,113
  • 1
  • 37
  • 51