18

I am making images for my UITabBar. I am making them of size 60x60, because that's what retina screens use. However, when I use that size, it shows up too big in the bar, so you can only see part of the image. When I reduce it down to 30x30, it works, but that size is supposed to be for non-retina displays. Why does it not show up properly when I use 60x60?

2
  • 7
    Make sure your 60x60 retina image is named with the @2x suffix in the filename.
    – rmaddy
    Sep 6, 2013 at 14:28
  • possible duplicate of iOS7 Tabbar icons too big
    – sam_smith
    May 27, 2014 at 0:31

2 Answers 2

13

You probably may have to rename your retina image to [email protected].

7

You were getting this behavior because you were supplying a high-resolution image, when iOS was looking for a standard resolution image.

iOS automatically selects the appropriate image size for you, depending on the resolution of the accessing device. So you will be responsible for supplying a "standard resolution" image, for non-retina devices, and a "high resolution" image, for retina displays. The way you do this in iOS is to append "@2x" to the end of your filename, but before the file extension, like this:

my-image.png     // for non-retina displays (Ex: 30x30 dpi)
[email protected]  // for retina displays (Ex: 60x60 dpi)
my-imag[email protected]  // for retina displays(plus editions) (Ex: 90x90 dpi)

Then, when you are referencing files in your XCode project, you only need to supply the filename to the standard resolution (e.g, "my-image.png") and if the accessing device has a retina display, then XCode will automatically select the file with the "@2x" suffix for you. This is very convenient, because it saves us developers from having to detect whether or not the device has a retina display, and which image we need to supply.

Here is a code example:

// Select an image named "my-image.png"
UIImage *img = [UIImage imageNamed:@"my-image.png"];

// If the device this code is run on is a retina device,
// then Xcode will automatically search for "[email protected]" and "[email protected]"
// otherwise, it will use "my-image.png"

You can read more on the subject via the Apple Developer's Site: Optimizing for High Resolution

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.