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 Answers
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
@2x
suffix in the filename.