I have 3 images:
test.png
test#2x.png
test-568#2x.png
In IBOutlet, a UIImageView is set to display test.png.
On iPhone 3.5in without retina, it's displaying test.png
On iPhone 3.5in with retina, it's displaying test#2x.png
But on iPhone 4in with retina, it's displaying test#2x.png!!!
What's going on?
Thanks!
The -568#2x suffix only applies to the Default.png launch images. There is no special suffix used by UIImage imageNamed: (or the other UIImage methods). If you need a special image on the 4" screen, you need to add code to get the desired image yourself.
The following works for the iPhone. For the iPad, you would need additional images.
For the three versions of the background image, use the following names:
background-480h.png (320x480)
background-480h#2x.png (640x960)
background-568h#2x.png (640x1136)
(You don't need a "-568h.png" image because there's no 320x568 iPhone screen.)
When you set the background image, simply append the screen height to the image name:
NSString* imageName = [NSString stringWithFormat: #"background-%ih", (int)[[UIScreen mainScreen] bounds].size.height];
[view setBackgroundColor: [UIColor colorWithPatternImage: [UIImage imageNamed: imageName]]];
iOS automtically appends the "#2x" if applicable.
You could omit the "h" after the height in the image names, but I think it's nice to emulate the iOS convention for the default image.
I know it's an old thread but I was having trouble with the new screen sizes for iPhone 6/6+.
What I did is to use this naming convention for different image files:
none if #1x small old phones
#2x for iPhone 4
-568h#2x for iPhone 5
-667h#2x for iPhone 6
#3x for iPhone 6 Plus
And then to automatically generate (full size) images just by including the code from this Gist in the project:
https://gist.github.com/kevindelord/fe2e691d06ab745fbb00
You have nothing else to do. When you instantiate an image in your code:
[UIImage imageNamed:#"background.png”];
The categorised class from the Gist will automatically create an image corresponding to the current device.
There is a Pod for it UIImage+Autoresize documented on CocoaDocs.
Related
I am trying to upgrade my app to display icons that look great on the retina screen of the iPhone 5. AS of right now I am not setting my icons using code, I'm simply selecting the image within xcode and it loads it on its own ( I don't know how to code in the icon so that's why I am doing it this way).
Anyways, when I set the icon I have to use a 24x24 icon or else it wont fit.
When I use my high-res icons 64x64 they do not fit correctly. My question is, how do I go about making it so my icons will be scaled to fit but still retain the high-res quality?
1) If your non-retina icon is 24x24, then your retina icon should be 48x48
2) You should set your icon to be the non-retina version in interface builder. The retina version will be swapped out automatically if its on a retina device, as long as you follow the standard naming scheme:
name.png (non-retina image)
name#2x.png (retina image)
Note also: if you do set an image in code, you can simply use [UIImage imageNamed:#"whatever"] and the retina image will be swapped out automatically for you too (you don't have to do if-else or anything like that).
just try to set this code in your .m file of your particular tabBar's parent view.. in viewDidLoad: method..
self.tabBarItem.image = [UIImage imageNamed:#"home#2x.png"];/// set your image name instead of home
I'm using an image that fills the screen (like a background) to my app. The image is already in retina dimensions, but I scaled it to fit the simulator screen. Because it's already in retina dimensions, do I still need to add a copy of it with the #2x extension?
It's better to use separate images, normal & normal#2x. if you only use single image, small images will be distorted while bigger image will look squeezed.
don't forget the iphone 5 for background images for example.
3 images are required : Background-568h.png Background.png Background#2x.png
if ([UIScreen mainScreen].bounds.size.height > 480.0f) {
// for the iPhone 5
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"Background-568h.png"]];
} else {
// for iphone 3.5 inch retina /non retina.
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"Background.png"]];
}
the naming notation is required for compiler to detect your retina images.if you write image.png the compiler looks for image#2x.png and then image.png and if it can not find it(for retina displays).
So name all your images xxx#2x.png and provide also xxx.png for non retina devices.
On the other hand i would use exact image sizes for non-strechable images in you app.Resizing means extra time and naturally extra computation.On the other hand fractional image resolutions ends up with blurry images.
For iphone 5 images you should for instance include Iphone5BackgorundIamge#2x.png but call Iphone5BackgorundIamge.png in your code.
Iphone dont have to do with image dimension but it uses image name for checking whether it is to be used as ratina or normal image.You have to keep a normal size image with it's name like "image1.png" for normal display and ratina size image as "image1#2x.png" for ratina display.If your used image is already of ratina display then keep it with #2x format and put one half size image with normal name.
I have icons inside my application for uibutton & on uitable cell. Lets say I have image named "sampleImage.png". Can my app use the image named "sampleImage#2x.png iphone with retina display automatically provide it is in my app bundle ?
If yes how can write code for it because I have code like
cell.imageview.image = [UIImage named:#"sampleImage.png"];
Does it work even if I hardcoded the image name?
Any kind of help is appreciated.Thanks
Yes, UIImage will automatically use the #2x version of an image on a retina display.
Searching for an answer of your question I came across this: what is the code to detect whether ios app running in iPhone, iPhone Retina display, or iPad?
One of the answers mentions this:
There's often no need to determine directly whether you're on a retina display because UIImage handles that automatically when you use imageNamed and append "#2x" to your high resolution image file names (see Supporting High-Resolution Screens in the Drawing and Printing Guide for iOS).
For testing not/retina display I've created an UIView with size 100x100.
I've create 2 images:
- normal size (100x100)
- retina size (200x200)
I have two situations:
1) Non-Retina display + Normal Size image in background
2) Retina display + Retina Size image in background
The 1st scenario is ok.
In the 2nd scenario the image is double size and in my UIView I can see only 1/4 of the total image.
The same happens when I try to assign a background image to my UIViewController navigation bar as following:
if (IS_RETINA()) {
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:IMG_NAVIGATION_BAR_BACKGROUND_RETINA] forBarMetrics:UIBarMetricsDefault];
}
else {
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:IMG_NAVIGATION_BAR_BACKGROUND] forBarMetrics:UIBarMetricsDefault];
}
There's a much easier way to do this. Give the retina version of the image the same name as the non-retina version, except with a "#2x" at the end. For example, if your regular image was named foo.png, then the retina version should be named foo#2x.png.
Then, just refer to the regular version of the filename (e.g., foo.png) at all times. When your app is running on non-retina hardware the regular image will be used, but whenever you're on retina hardware the higher-resolution image will be used automatically. It's easier than having to write an if statement for every image you use, plus it'll actually work.
You don't need to code the IS_RETINA test, just add the #2x suffix to the name of the file containing the image you want to use for the retina display, and iOS will automagically use that in preference.
Bundle 2 image files, prettyNavBarBackground.png and prettyNavBarBackground#2x.png
#define IMG_NAVIGATION_BAR_BACKGROUND prettyNavBarBackground
Then you can just use this single call, and iOS will select the appropriate option
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:IMG_NAVIGATION_BAR_BACKGROUND] forBarMetrics:UIBarMetricsDefault];
U don't have to write any sought of code to distinguish between retina and normal hardware. U just need to add a "#2x" image . This will work fine as perfect.
U don't have to call these images individually, but just write the filename.
I'm about to resize some images, for use with buttons.
However, I think setImage will resize the images to the right size for the buttons.
My buttons are 72 x 72, according to IB.
I think I'm going to need to produce some retina size buttons too ?
What size should I create my images so that the iphone doesn't need to resize my images ?
Create 72x72px images for the normal iPhone screens and double the size for retina displays. So that would be 144x144px images for retina displays.
If your include the images in the resources folder of your project make sure to append #2x.png to the name of the retina version of your image. This way the iPhone will use this image automatically when the button is displayed on an iPhone with retina display.
For example name the 72x72px image: button.png
And name the 144x144px image button#2x.png.
Then select button.png in InterfaceBuilder or use [button setImage:[UIImage imageNamed:#"button.png"] forState:UIControlStateNormal] to set the image in code. The iPhone will automatically load the retina version when needed.
I think it would be better to create two images, One for iPhone 3 , iPad and other for iPhone 4. As per my information iPhone provides some naming convention for images in iPhone 3 and 4 device. Check out following.
http://useyourloaf.com/blog/2010/6/29/updating-for-the-iphone-4-retinal-display.html
if button is of 72X72 then for iphone 4 make image of 144X144
Hope it helps...