CODEWITHSUNDEEP
iosuser-interfacepng
user142019
user142019

Reputation:

Selected tab bar icons look fuzzy if not on Retina display

I am working on an iPhone app that has a tab bar. I made the tab bar icons using a vector graphics editor and exported them to PNG. The icons look fine, except when selected.

screenshot of fine-looking button screenshot of fuzzy-looking button

This doesn't happen on the retina display.

I use self.tabBarItem.image = [UIImage imageNamed:@"Symbol"]; to set the image. Here is the actual PNG: https://i.sstatic.net/ChxHk.png (though it happens with all the images).

What can I do about this? Why does this happen?

Upvotes: 0

Views: 858

Answers (2)

Bill Burgess
Bill Burgess

Reputation: 14154

You should have 2 copies of the image. One for normal or older devices, and one for retina display.

Your images should be named accordingly.

image1.png // older devices
[email protected] // for retina display. @2x is case sensitive as well

When you choose your image, be sure to choose the normal image. The OS will select the @2x image if it is capable of displaying it.

Upvotes: 0

user142019
user142019

Reputation:

This appears to happen when the images don't have a margin. If you add a margin of 2px it will look fine:

screenshot

Upvotes: 2

Related Questions