I have a question that may sound odd, but being somewhat of a newbie, I am guessing no question is a stupid question...
Do I need separate storyboards for all four devices?
Right now I have two storyboards, one for iPhone and one for iPad, but what I get my view frame it always shows the size of the device, not the retina device. So for example on the iPhone my view size is 320x460, and for iPhone Retina it shows the same... likewise for iPad.
Thanks
No, you don't. Yes it's the same resolution for the developer point of view. iOS will make all the adjustment. The only important issue is that if you use images in your app bundle (like tab icons) you have to add one for not retine a one for retina (with double resolution). For example if you have icon.png of 24x24px, you have to add icon#2x.png of 48x48px. iOS automatically will replace your icon for the "#2x" filename in retina divices.
You can differentiate the graphic content of your application, but the views / storyboard for the moment I do not think you can.
If you want to take advantage of the resolution of retina screens you can use the #2x trick.
This consists of the following, we give the example of the application icon_
Icon.png ( default icon for the iphone at 57x57 pixels )
Icon#2x.png ( default icon for the iphone with retina display at 114x114 pixels )
Icon~iPad.png ( default icon for the ipad at 72x72 pixels )
Icon~iPad#2x.png ( default icon for the ipad with retina display at 144x144 pixels )
This trick is useful for all your graphic content and no requires extra code when you make your interfaces and your code. When you have to specify the graphics file to be used, always specify the file which does not have the "#2x".
I hope that is helpful.
Related
I have a very simple app that just displays a block of text every time you touch the screen. I have a graphic behind the text, that the basics of it.
I made it back in 2010 using a .xib file to create the text field and the image.
I'm now attempting to make it fit both iPhone 5 and both iPad and iPad Retina.
I can't simply stretch out the existing .xib layout because it just accepts and renders the last one I do. (If I stretch to iPhone 5 resolution it goes off the screen on an iPhone 4S).
Is there anyway to reference different .xib files based on the iOS device?
Thank You.
According to the documentation, you can use:
myNibName~ipad.xib and
myNibName~iphone.xib
and the correct xib will be loaded depending on the device.
You can read iOS Supports Device-Specific Resources.
EDIT:
how do you distinguish between iPhone 3.5" vs iPhone 4.0"
there is no device modifier specific to the iPhone 4". You will have to define your nib in a way that it can "stretch" vertically.
The only mechanism is a iPhone 4" specific Default-586#2x.png file. If you provide it, then the whole screen area will be available to your app.
If you do not provide it, then the app will run in a special mode whereby its content is presented in a 3.5" area. The remaining area is filled with a top and a bottom black band.
iPad vs iPad Retina?
nothing special here, since the 2 devices share the same "logical" resolution of 768x1024 pixels. As usual, you can use #2x modifier to supply specific retina-resolution images; and, if you need it, you can use ~ipad#2x modifier to supply retina iPad-only images.
E.g.:
iconImage.png -> non-retina iPhone version
iconImage#2x.png -> retina iPhone version (also retina iPad version if no ~iPad is given)
iconImage~iPad.png -> non-retina iPad version
iconImage~iPad#2x.png -> retina iPad version
EDIT:
To make your UI stretch, go to the metrics pane in IB and set the vertical spring for the view height (this is the inner vertical double arrow in the picture below).
You will have to find your way through this a bit, especially if you have a lot of subviews.
I have some image files for iPhone 5 size 640x1136, i have previously implemented retina images for iPhone 4 & 4S using #2x suffix, so what will be the suffix for images in iPhone 5, we can user the same as is #2x or it has to be changed.
It’ll still use #2x images where they’re available. There’s a -568h suffix you can use for the launch image, as in Default-568h#2x.png, but that’s currently the only place it’s supported; see Leo’s answer for a way to get that working elsewhere.
See my answer here. Some useful macros to help you with dealing with images.
For the iPhone Retina 4-inch (iPhone 5) it's still the #2x suffix because the density is the same as the iPhone Retina (iPhone 4 and 4S). The screen is bigger but have the same density.
The -568h suffix will work only in for the default image because it's the only place you really need it (just to tell the system that your app have been optimized for this new screen size, and it can stretch your views).
The naming convention Default-xxx.png is just here to provide the right image while the app is launching but I think it's non sense to try to replicate the same to load other images in imageViews. It's like the Default-(landscape|portrait).png on iPad. You never need this convention to load images yourself.
The only rule is:
# is for density (2 density exist right now, normal and 2x)
~ is for device (2 different devices exist right now, iphone and ipad)
To adapt images/imageView on the 4-inch iPhone you should play with your imageView content mode and the autoresizing configurations.
I have a universal app which supports both orientations and all resolutions, so there are a bunch of possible splash images (iphone & ipad, portrait & landscape (left/right), retina & std display). But there is no sense to show anything except the background image as a splash image for my app. And the background is just a simple repeated pattern, so ideally I just specify a little 10x10 pixels image and tile the screen with it.
But as I understand it's not possible, and I need to provide a bunch of pre-rendered full-screen images. So I wonder what is the minimum number of images that is required for a Universal app? Will just one Default.png be enough?
In your case i would place 4 Default png's.
And yes. You need to pre-fill your 10x10 tiles in a (or multiple) big default.png files.
two for iPad (iPad / iPad Retina) and two for iPhone (iPhone / iPhone retina).
You need to set the base name in your app plist.
Look for Launch image (iPad) then enter there DefaultiPad (or something like this). Then you should place a DefaultiPad.png and a DefaultiPad#2x.png within your project resources.
Do the same for iPhone.
Look after Launch image (iPhone) in your app plist and do the same with a different base name.
Update 1:
You can also add Default.pngs for each device orientation.
Easiest way is to go with [Basename]-Landscapen.png and [Basename]-Portrait.png.
So in the case above you can place your files with the filename DefaultiPad-Landscape.png and DefaultiPad-Portrait.png
But this will also increase your binary filesize which – maybe for your 10x10 tile case - will not be worth doing so.
Because you are asking for the minimum:
Every app must provide at least one launch image. This image is typically in a file named Default.png that displays your app’s initial screen in a portrait orientation. However, you can also provide other launch images to be used under different launch conditions.
Source: App Launch (Default) Images
However, I also would suggest to use at least 4 (iPad + iPhone each in normal and #2x).
The minimum number you can provide is zero. If your app is quick to launch, you don't need to supply one. If your app is slow to launch, make it faster by putting heavyweight stuff on a background thread and get the UI (or a plain view with your tiled pattern) on screen as fast as possible.
You can't do it by just providing a small image and having it tile, you have to provide an actual, pre-made image for everything you want to support. In your case:
4 images for iPad (Landscape, Portrait, Landscape 2x, Portrait 2x)
2 images for iPhone (Portrait, Portrait 2x)
Left and right are the same image, unless you do something different with those orientations. Upside-down is the same too.
If you think that's a lot, wait until you see how many icons you need.
More info is at App Launch (Default) Images
I have a few questions about screen resolution, that I'm not clear on. These questions assume they my app will be running on iOS 4.0 and up, and on either iPhone 3GS or iPhone 4.
Should the size of the splash image (default.png) be (960x640) or (480x320)?
Should the size of the app icon (Icon.png) be (57x57) or (114x114)?
What about other graphics that I may use in my app, such a graphic that represents a button? Should I always create these images for the higher resolution, and have the app scale them down? In other words, if I want a button image to be displayed on the 3GS that is 200x40 - should I create the image at 400x80, so that iPhone 4 can take advantage of it?
Thanks!
A good guide to this can be found here: http://mobile.tutsplus.com/tutorials/iphone/preparing-your-iphone-app-for-higher-resolutions/
In general you just create 2 sets of images. Your original and then a new one twice as big with #2x in the name. So for image.png at size 32x32 you would have one that is twice the resolution called image#2x.png at size 64x64. In your app just always use the image.png in Interface Builder and when loading in code.
There is no need to detect the device. These images will automatically be picked up by the OS and subbed in as necessary.
Provide both sizes (960x640 & 480x320) for the splash image using the #2x method described above
Provide both icons (57x57 & 114x114) using the #2x method
For our apps we use a combination of the #2x images and just Scaling the large images. (More information on this can be found in the above article) We use the #2x images for bar buttons, icons, etc. But for UIImageViews we often just use the Scaling. There can be a performance hit for doing this, but for most apps I'd say this is negligible. The savings in file size sometimes make scaling the only option.
Related Questions:
Retina/non-retina images in UIImageView
Making an app Retina Display friendly
You need to provide both if you want them to look nice. For example,
Default.png -> (480x320)
Amd
Default#2x.png -> (960x640)
I've installed my iPhone app on an iPad. When I tap this "2x" button, the app gets scaled up, but it doesn't use my retina display graphics. Isn't that somewhat stupid? I am sure I did something wrong!
What must I set in the info.plist or elsewhere that the iPad will use my retina display graphics when the app is watched in 2x mode?
No, it literally just scales up the screen. It may be a bit lame but that's by design. Note that even the text is pixel-doubled.
If you want to make better use of the screen you have to make a "Universal" app.
If you use a hi-res image (not called #2x) in your app, then size the UIImageView half the size of the image it will appear crisp on the iPhone, retina, and iPad scaled up.
Please make sure your retina image naming convention is correct.
For retina image naming convention should be #2x.Suppose if your regular image name is like
icon.png then for retina it should be icon#2x.png.