In my application, I am having trouble showing iPad Retina images. I know I have to use the #2x~ipad.png extension in order to get them to properly show and I do that. My images are named according so they are all named the same besides the extension for each device. However, my images appear blurry when viewing them on an iPad 3. I know the images are the proper size and PPI but it just doesn't look clear.
My images are in my 'Copy Bundle Resources' too. I have tried to clean my project, and restart Xcode. No luck.
Also in Interace Builder in my iPad XIB, I have each image set to the -72.png image (I guess the image automatically switches to the #2x~ipad.png if it is an iPad 3 correct?)
Is there any way to confirm maybe via NSLogs to see if it is loading the correct images? Also is there anything else I should double check to ensure that the proper images are loaded.
Uh, if you really are doing this:
[name]-72.png and [name]#2x~ipad.png
thats not right.
If this is a universal app, then you have
Foo.png (or Foo~iphone.png) and Foo#2x.png (or Foo#2x~iphone.png) [NOTE: iphone not iPhone];
Foo~ipad.png and Foo#2x~ipad.png
This all working for me in my universal app.
EDIT: you can read about the naming convention in Apple's "Resource Programming Guide", page 46:
The bundle- and image-loading routines automatically look for image
files with the #2x string when the underlying device has a
high-resolution screen. If you combine the #2x string with other
modifiers, the #2x string should come before any device modifiers but
after all other modifiers, such as launch orientation or URL scheme
modifiers. For example:
MyImage.png - Default version of an image
resource.
MyImage#2x.png - High-resolution version of an image
resource for devices with Retina displays.
MyImage~iphone.png -
Version of an image for iPhone and iPod touch.
MyImage#2x~iphone.png -
High-resolution version of an image for iPhone and iPod touch devices
with Retina displays.
EDIT2: So I did trip on a reference to "-72" (and -50). These were used in iOS 3.1.3 and older. The full explanation is found "iOS Application Programming Guide", "App Icon" section (links too fragile to use).
What I am doing is setting the image names to:
[name]_ipad.png, [name]_ipad#2x.png. [iPad]
[name]_ipod.png, [name]_ipod#2x.png. [iPhone]
And, I added a category on UIImage, mc_imageNamed: that appends the _ipad or _ipod based on the current device. And of course I have set the images based on their names in the XIBs.
This method is guaranteed to work, from my experience. It would be great if someone would fix your issue, but this solution is also available.
Related
I just created a new app with a MvvmCross template. But the iOS resolution looks like non-retina. Also, I only have i386 and x86_x64 as supported architectures and not ARM like all my other projects have. So what do I need to change that the app runs on the native resolution?
Has some one an idea what I need to change that the app stops looking like it was made for a 4" iPhone instead of a new app? Here are a few screenshots that may help to make clear what I mean (the App "PLZ Suche" is the one with the 'old' looking resolution, compared in the App Switcher it is clearly visible - all screenshots are taken on a iPhone 6S).
Problem solved -
This 'compatibility-mode' is triggered when you do not include a retina resolution splash screen (or launch screen as it is called in the Apple ecosystem) in your app.
Make sure that you have all the right types of splashscreens included in your app.
You can either:
use a Storyboard (or XIB) that adapts to different screen resolutions automatically
use XCode Asset catalog 'LaunchImage' image set, and fill all the correct sizes
You can read more about all the sizes and the launch screen on the Apple documentation page.
My design team has given me various launch screen images for all types of screen sizes found here.
I want to support iPhone 6+ and iPad Pro so I know launch screen files should be used instead of image assets.
However, how do I specify in my launch screen file the different images for each screen size? I thought size-classes would be the way to go but I can't differentiate between iPad Air 2 and iPad Pro that way.
There's also no iPad Pro image asset either.
You can look at device specific image assets (on the attributes inspector of an image in an asset bundle).
It may be impossible to match the design exactly because you can't run code at this point. It may be easier to explain this to the designers and have them design to the constraint.
One simple idea is to have a centered image at the correct resolution and to use a view underneath to have a background (color or tiled image).
So I was snooping around in that achieve trying to make my app smaller. And I found something odd!
There are two identical copies of every image! One with an ending "~iPad" and one with "~iPad#2x"
I understand the purpose of having those two endings, but when I am setting up the .xcassets the way I am.... I don't expect the app to need it. Is there any way to get rid of the duplicate?
Here is how I have set up one of my entires:
You should use universal image asset instead of separate for iphone and ipad.
from assets select this image set and from attribute inspector uncheck iphone and ipad under Device and check universal from it.
So you will get universal imageset with 1x,2x and 3x will automatically used by iphone and ipad both.
If you are using different size of images for iphone and ipad then you must set separate images for iphone and ipad but if you are using same image size then you should use universal as i mentioned above.
Hope this will help :)
Here is my situation: I have a simple app with some buttons that are images. I have the image set in xcode using the menu on the right (i simply click the button and pick the image I want from the dropdown). I created them using a simple image program so they look somewhat glossy and nice, but nothing crazy. I also sized them for an iphone screen.
Using some auto layout, I've been able to ensure the layout stays the same and the buttons change size with the size of the iphone. I would like this to be the case with the iPad as well, but I'm worried if they size too big, I'll lose image quality with the button images. I'm very new to layout and coding and have only been doing this development stuff for a little while. What are my options? I figure they are...(and these might not even be possible, throwing them out there):
1) Create two version of the app, one only for iPad and one only for iPhone with different size/quality images for each.
2) Code swift to identify the device and assign the different image accordingly
3) Pick a resolution for the iphone image that when expanded on iPad won't lose much quality
4) I'm overreacting and this isn't a big deal whatsoever since it's just a basic glossy button with some shadowing.
Thank you! Advice/links appreciated.
The better option to add images for both iPhone(retina/non-retina) and iPad(retina/non-retina). Put the high-resolution and original versions of your image in the same location in your application bundle.
Ones you added images same as the below naming format in to your application resources, the application will automatically pick the right one for you.
MyImage.png - Default version of an image resource.
MyImage#2x.png - High-resolution version of an image resource for devices with Retina displays.
MyImage~iphone.png - Version of an image for iPhone and iPod touch.
MyImage#2x~iphone.png - High-resolution version of an image for iPhone and iPod touch devices with Retina displays.
MyImage~ipad.png - Version of an image for iPad.
MyImage#2x~ipad.png - High-resolution version of an image for iPad devices with Retina displays.
I started a new project in Xcode 5.
What is this Images.xcassets shenanigans?
Am I supposed to put the various images I'm using for my app (like button images & stuff) in there or only the AppIcon & LaunchImage?
I see I can create a new folder in Images.xcassets. Should I create a folder called "Button Icons" or whatever and just throw them in there?
See, but I just want to add some retina images to my target.
I'm only supporting iOS 7. So, I don't need to worry about other formats like non-retina.
Why did they make this so complicated and not document it at all? Why do I need these extra Contents.json files?
It looks like I can uncheck (remove) Images.xcassets from the target but not the individual image files within the asset catalog.
Can I just do things the old way or would I be missing out on compression/performance enhancements?
Is there a setting I can set so that my app treats all image files as retina images even if they dont have the #2x suffix in their filename?
In the "What's New in Xcode 5" WWDC 2013 Session Video, the speaker says Image.xcassets "collects all of your image-based resources, such as your launch images, icons, loose images that you use in your project, together into one place."
"Also, Xcode knows about new iOS 7 APIs and so can even optimize the loading of your image-based resources." I'm assuming "it does it for you automatically" as long as you put your images in Image.xcassets (or another asset catalog included in your target).
So, I suggest you suck it up, and adapt or die.
I don't know.
There are not retina devices that are still supported by iOS 7 such as iPad mini and iPhone 3GS. Keep that in mind. The images will scale down and still work but I wanted to make sure you knew iOS 7 supported not retina devices.
When you ask for an image by name iOS will look for the image by name. For example, "background.png" if there is a retina image "background#2x.png" and the device is retina iOS will handle that for you. If you only plan on providing retina images there is nothing wrong with making the images all retina and excluding the "#2x" info in the image. name.