CODEWITHSUNDEEP
iosuiimageuibarbuttonitem
wholly_cow
wholly_cow

Reputation: 977

Image in UI Navigation Bar

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

Upvotes: 3

Views: 1169

Answers (2)

Nitin Nain
Nitin Nain

Reputation: 5483

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.

Upvotes: 2

Pavan
Pavan

Reputation: 18498

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.

Upvotes: 5

Related Questions