In my application I need to get the correct image based on the device iPad/iPhone 4/iPhone 3 device.
For example:
I have an image named a.png (width 40,height 20) for iPhone 3/iPod, and a#2x.png (width 80,height 40) for iPhone 4.
If I mentioned the code
UIImage *myImage=[UIImage imageNamed:#"a.png"];
myImage contains (80*40) image if it's iPhone 4.
myImage contains (40*20) image if it's iPod/iPhone 3.
My question is how do I get the image for iPad (60*30) like above naming convention.
I tried giving a~ipad.png as an image name and it's not working. Can you point out where there is a mistake?
And if I use the condition using [UIDevice currentDevice]; isIpod -> load(60*30) image
otherwise load images for iPhone/iPod it's working fine.
But I need to get it to work without using the condition, and using the naming convention like a.png for iPhone/iPod, a.#2x.png for iPhone 4 and likewise for iPad.
Thanks in advance.
I know it is old post, but I think Screenshot gives more clear idea about naming convention.
With latest devices: button#3x~iphone.png and button#3x~ipad.png
According to this Apple doc, there is an image naming convention for devices:
http://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/LoadingResources/ImageSoundResources/ImageSoundResources.html#//apple_ref/doc/uid/10000051i-CH7-SW17
It says to use "~iphone" for iPhone, and no suffix for iPad. Though anecdotally I have been told that "~ipad" also works.
There is no image naming convention for iPad, it's only for retina displays so that your images will appear crisp. If you want to support iPad then you need to create a separate layout for it (separate xib), even separate set of images in most cases because you were given a bigger layout.
You can, however, create a naming convention for yourself and pass the string name to a static function that will convert the name to an iPad / iphone depending on the device.
E.g.
[UIImage imageNamed: [MyAppUtils getImageName:#"a.png"]];
and inside the getImageName function, you can do your conversion (use the same name if iphone, else rename to something else)
Further to Nate's post, the specific documentation from Apple describing the naming convention can be found at:
Supporting High-Resolution Screens - Updating Your Image Resource Files
According to the link, the naming convention pattern is as follows:
Standard: <ImageName><device_modifier>.<filename_extension>
High resolution: <ImageName>#2x<device_modifier>.<filename_extension>
For example: "MyImage#2x~ipad.png" for a high-res iPad-specific image or "MyImage~iphone.png" for a standard-res iPhone-specific image.
I am using a "Resource Manager" that I developed first before creating any application.
This Resource Manager can decide about the naming convention after loading the resource configuration files (mostly XML).
This way everything is transparent to the programmer of the GUI, you only need to worry about creating the content :)
Related
When i create an image for an ImageView to iPhone, iPhone retina, iPad, iPad retina, should i create 4 images ?
For example for a coin image that i use ->
coin.png
coin#2x.png
coinIpad.png
coinIpad#2x.png
Can i create just the most-size image (imageIpad#2x.png) and inside Xcode select Aspect Fit ?
[UIImage imageNamed:#"imageIpad#2x.png"];
Which is the common way to do this?
To answer you question as you asked it: Yes you can just use the highest resolution image only and have it fitted to the size that each device currently needs. You can to that by just initializing the UIImage with the named resouce, as you suggest, and assign that to an UIImageView with an appropriate frame in each device type.
Would I advice doing so? No!
Why?
The naming conventions (~ipad and #2x) make it easy for you as programmer to provide perfectly fitted artworks for each resolution.
You or your designer respectively are in full control over how the artworks will be displayed
It saves memory and cpu and therefore even a bit of battery power.
When it comes to very detailed or small graphics that don't rezise well, then you can consider creating slightly different ones for the lower resolutions that suit better for their current resolution
So if you just want to downsize a high-res image then download something powerful but cheap like gimp and reszise it once yourself (instead of having thouthands of mobile phones do it again and again), save them with poper names and include them in the boundle.
Creating only one image and relying on the device to resize it is:
Inefficient - you're going to be using a lot of resources at runtime that should be busy doing other things
Not the intended way - you should create 2 images (retina and non-retina). If you wish to use another set of images for iPad, you should either check which device you're running on at runtime by using:
[[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad
or by splitting your project into 2 separate targets and adding the 2 sets of images separately to their correct target.
All you need to do is to put coin when you want to call it.
For example:
[UIImage imageNamed:#"coin"];
But when put the images in the resources folder, name it as coin#2x.png for retina image and coin~ipad.png for ipad images.
Xcode will call the appropriate image accordingly.
If you just want to have resizable assets that you can create once and use in different situations - have a look at this UIImage+PDF category that helps you use a PDF, which as a vector format can be scaled to whatever size without loss of quality.
Cacheing has been recently added, which should be a help as well.
What name convention the new images have to have to be loaded by the new iPhone 5?
We see that we have to have 3 default images to be loaded by the device
Default.png
Default#2x.png and
Default-568h#2x.png
what about the other images used by an app?
Is there a naming convention that will automatically load the correct image?
The new default is Default-568h#2x.png. (note hyphen)
There is no other corresponding change. If you need a different image for the new iPhone 5 screen then you have to create it as a separate name. There is no 1x/2x/new phone auto switching behavior.
If you are looking for something similar to ~iPad or ~iPhone (like ~586h) there isn't anything build in like that. But you can easily add it yourself by expanding UIImage class.
Have a look at this source snippet (UIImage+Retina4) for information about how to achieve. Just add this UIImage category and there will be support for ~568h#2x files.
I solve this problem here. Just add #2x~568h suffix to images or ~568h to xib's. Also you can use this images in xib's.
With the introduction of Asset Catalog in Xcode 5, all you have to do with the images is simple drag and drop to its corrosponding related areas. Everything else will be handled by the Xcode itself..
You can create new catalog by going to the above mentions option in the screenshot.
I have a TabBarController that sets the image for the tab like so, in the -init method:
self.tabBarItem.image = [UIImage imageNamed:#"tabImage.png"];
I have a tabImage#2x.png file in the resource. In the iPhone 4 simulator or the phone, the hi-res image isn't being picked up - the low res version is simply being scaled up.
Any ideas why this might be?
EDIT: Some more info:
If I try and explicitly use tabImage#2x.png (or just tabImage#2x) then the tab image I see is extremely large and blown up beyond the bounds of the tab, as if it's being scaled from 60px to 120px. So it looks like whatever name is supply is being treated as a scale=1.0 image.
Note that the simulator is not case-sensitive, but the device is. Make sure case matches EXACTLY. If you've changed the case of the filename at some point, you'll need to clean and rebuild. Sometimes, for the simulator, I've had to actually blow away the folder in Library/Application Support/iPhone Simulator/4.3/Applications/ to get the rebuild to pick up the renamed image.
Always use
[UIImage imageNamed:#"foo.png"]
This will work on 3.x and 4.x devices, and on the 4.x Simulator. Devices with Retina Displays (and the 4.x simulator) will magically pick up the #2x versions of your images; iOS has been modified to be smart about this function and #2x.png files.
Make sure you have both the #2x.png and the normal.png added to the project file, and do a full clean & build. As others have mentioned, verify the size of the images, too; apparently if they're not exactly 2x the dimensions it won't work (I haven't verified this myself).
If you leave the .png off, it will only work on iOS 4.0. So if you're building a 4.0+ only app, you can ask for:
[UIImage imageNamed:#"foo"]
If you have only one hi-res image and want to use it on both Retina and non-Retina devices, then you'll have to change view.contentMode to scale to fit.
I had the same problem. It turned out that my png was not square. Solution: make it square and it will work.
Are you sure the file has been added to the XCode project and is visible in the project explorer?
I had this problem as well.
Make 2 images:
30x30 pixels
60x60 pixels
Suffix the 60x60pixel image with #2x. For example, tabBarImage#2x.png. Then, in your storyboard or code, you can specify the regular one, tabBarImage.png, and iOS will choose the #2x version at its discretion.
You can leave the .png off now. I believe it will still work, but you may try that.
I just went through a few hours of redoing art in The Gimp and trying to get it recognized and loaded by my app on an iPhone 4.
I ran into the problem described with certain images with a #2x extension not being recognized and loaded.
I was not able to discern any pattern. My images are all loaded using [UIImage imageNamed:#"<name>.png"] into a singleton. I inspected the image scale settings post-startup and some were 1.0 (the old art) and some were 2.0 (the new art).
The only way I was able to resolve this problem was to delete and re-add the high resolution images that were not being recognized.
Two silly mistakes (both of which I've made before) that can cause this problem:
Accidentally naming the small
versions #2x instead of the large
ones
Having the large versions be
slightly missized (by one pixel)
you need 2 versions of your images and both ned to be at the same location in the project folder and added to the project
image.png 60x60
image#2.png 120x120
then simply use [UIImage imageNamed:#"image.png"]
did it this way with selfmade buttons and it worked for me (iOS 4.1)
Another thing to look out for is having two images with the same name.
I had the same issue. The #2x image had the wrong build target checked (ServiceTests instead of MyProject).
I had exactly the same problem.
Make two images: im1.png and im1#2x.png
Call imageNamed: with the first one.
Note, imageNamed: doesn't initialize UIImage, hence use it as transient [[UIImageView new] initWithImage:[UIImage imageNamed: #"im1.png"]] or initialize UIImage yourself.
I've run into the issue of using a UIBarButtonItem with a custom color. Everything out on the 'net seems to indicate that the only way around this lack of official API support revolves around the use of images. This is all fine and dandy when developing for pre-iOS 4 devices, except when using the new iPhone 4. Creating an image for iPad and pre-iOS 4 devices is straightforward enough, but the images developed for those devices look absolutely horrid on iPhone 4. I suspect that this problem will be exacerbated further with the introduction of next generation devices.
Consider the example below. Notice how the default colored button is nice and smooth, but the iPhone 3GS image looks terrible. It does not seem very scalable (pun intended) to have to include multiple images for different resolution devices.
In the absence of an official API for changing the color of a UIBarButtonItem, what strategies are out there for creating images that scale well against differing resolution devices? This problem is hardly unique to UIBarButtonItems, how is the community adapting to other UI elements that are bitmapped? Is there a better solution for this particular case than using an image (such as using Quartz to draw it)?
If at all possible, please offer concrete code examples.
You can list any image as Image#2x.png along with Image.png and the system will select the appropriate image at runtime.
If you look at the source for Three20 you can see how they draw custom buttons and shapes that will scale well, regardless of resolution.
Give Opacity (for Mac) a try. Draw your button in it with vector elements and effects, and it'll spit out the necessary Quartz code to reproduce it, drawing natively in your iOS application. You get Retina (#2x) support automatically.
Been over a year since I posted this question, but ran into a use case where I wanted to be able to do this, so instead of having to draw or otherwise create the buttons, I decided to write an open source application to create them. This application uses private APIs to change the colors of the UIBarButtonItem objects and then uses a graphics context to save them to a determined location on your computer's file system. This way you can have pixel perfect UIBarButtonItem images to use in your UIToolbars.
The app creates both the standard and #2x resolution images.
UIBarButtonItem-Generator # GitHub
Any vector drawing app may work, but I would also consider povray, which allows you to create in a C-like scripting 3D language, then export any pixel size you choose.
http://povray.org
I have the same problem with navigation bar so solve as the following:
first i subclass my navigation bar
inside this class
- (void)drawRect:(CGRect)rect
{
UIImage *image=[UIImage imageNamed:#"MyImage.png"];
self.frame=CGRectMake(0, 0, image.size.width, image.size.height);
self.backgroundImage =image;
}
finally save the same image with different resolution With #2x at the end
I have 3 images on the same place on my app's bundle: "image~iphone.png", "image#2x~iphone.png" and "image~ipad.png".
when I do
UIImage *imageU = [UIImage imageNamed:[[NSBundle mainBundle] pathForResource:#"image"
ofType:#"png"]];
BOth, the iPhone and iPhone 4 hires versions load fine, but not the ipad image. When I run on iPad, I get nil on imageU.
Yes, the image is there, the name is correct (iphone~ipad.png).
Why is that? any clues?
thanks.
I discovered that the solution for that is: do not use any extension on the iPad images. This tilde trick is not working for iPad. One more buggy stuff that makes us waste time.
Possible daft attempt, but is the ipad image copied into the correct target when you add it as a resource? By that, I mean - of you right click the image and get info, does it have the iPad ticked as it's target?
I ran into the same problem with launch images. Despite what the docs say, naming a file with a ~ipad suffix doesn't do anything. You need to set the UILaunchImageFile~ipad key and use a separate name for your launch images on iPad, e.g., DefaultiPad.png and DefaultiPad-Landscape.png, then make sure to just set UILaunchImageFile~ipad to DefaultiPad (no .png suffix) and it will pick up the variants correctly.
image "image~ipad.png" will show HD quality on iPad because in ios 5.1 "~ipad.png" is used to show HD quality image of resolution 2048*2048.Test this naming conservation on iPad,it will work.