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
Related
I'm a newbie of iOS development and I'm confused regarding universal app.
We can use the same code, same xib file for iPhone 4(retina) and previous iPhones, but why we should write two different xibs for iPhone and iPad? What's the difference?
For iPhone and retina iPhone, we use "point" instead of pixel for the coordinate. Why we can't use the similar method for iPhone and iPad?
For some simple apps, it is possible to design your iPhone UI and reuse the same xib file for the iPad. Just select your Target in XCode and copy the Main Interface text from iPhone / iPod Deployment Info to iPad Deployment Info. If you're using a Main Storyboard, copy that too. However, the iPad does not simply scale everything up from the 320*480 / 640*960 iPhone screen to the 768*1024 / 1536*2048 iPad screen. #elgarva correctly says that this would look terrible. Instead, the iPad version makes use of your autosizing masks to resize or reposition each view.
If all of your views can be considered to be left-middle-right or top-middle-bottom, this may work. If you have anything more complicated, you'll need to design a separate iPad interface.
Duplicating your iPhone UI is not just discouraged for aesthetic reasons - iPhones often end up containing a deep and confusing navigation tree for tasks that the iPad can fit on a single screen.
The main reason, is that if you just scale the elements on the UI to fit the larger screen, it wouldn't look nice... and you don't need to do anything for it to work, it automatically does it for you if your app is iPhone only and installed on an iPad (if the user chooses to).
Having a different XIB lets you rearrange your app, and think it so that you can take advantage of the larger screen. You can probably show more information on one iPad view than on 3 different screens on the iPhone... so, your iPhone app could show basic info and expand it when the user taps on it, while your iPad version could show all the information on load, plus extra graphics that look nice but aren't needed, and wouldn't make sense on the iPhone screen.
PS: If you're starting a new app, I strongly suggest you using the storyboard if your app won't have a lot of views... it's really easy to get started and it lets you see your app flow at a glance.
The ratina display just doubles the resolution of original iPhone. If you don't provide separate graphics for retina display, then system just doubles the resolution of resources.
The points are related to physical size of screen, which is similar in old and new iPhones.
For iPads, the screen size changes. This means that its dimension in points will be different from that of iPhone.
duplicating the xib file and renaming that as filename~ipad.xib is working great for me in ios6.1
I have developed a straight iPhone/iPod Touch app.
A launch image is implemented for Retina displays as well as the lower resolution of the former generation devices.
Those images are displayed properly on the iPhone simulator as well as on several iPhone an iPod Touch devices.
However, since some days, when launched on an iPad (1) or iPad simulator one of the other images within the app is shown.
Apparently the image that is displayed wrongly, is one of two amongst ca. 70 images within the app. Those two images happen to be either
1. the first image in my xcode project groups hierarchy.
-or-
2. the first image in my project in alphabetical order.
I did not yet find a pattern of when 1. or 2. happens, so when the first image in the project's hierarchy of groups is taken or when the first in alphabetical order is taken. But it seems to be one of these two files only.
Any idea what I probably did wrong so that a wrong image is picked as launch image of this iPhone-only app whenever it is launched on an iPad?
Thanks in advance.
Cheers
Hermann
Try inserting an image named Default.png into Xcode. That's all, just drag it in. Xcode recognizes any picture named Default.png as the loading image. That should make it work.
To expand a little on Jack's answer - you can indeed use an image named Default.png which will automatically be used as a launch image for your app.
However,you can also customise the launch image for particular hardware and device orientations by using images of a particular size and name - for example, a 768x1004 pixel image named Default-Portrait~ipad.png added to your project will be automatically used as the launch image when you launch the app on an iPad in portrait orientation.
The use of these customised images is highly recommended, as it allows the launch image to be sized appropriately for the different shapes of screen (i.e. iPhone and iPad), and allows high resolution launch images to be used on Retina display devices.
For a list of these sizes and image names, see this page. The items of interest are the ones beginning with "Default"
All iPhone apps have a splash screen, or what Apple refers to as a “launch image”. It is the screen that is displayed immediately after you press your app’s icon on the home screen, while the app icons are sweeping away and your app is zooming into view.
Some apps opt not to display a splash screen and go for a black screen, which is the default behaviour when you create an app. Others display a wireframe of the app’s interface in order to look like it is loading faster. See Apple’s native apps such as Clock and Camera for good examples of this. The most common use of the splash screen (especially in games) is to present a company or game logo, as we do in Addicus:
Apple has made it so easy to set your splash screen that you don’t even need a single line of code to do it. Why, you don’t even need to change a setting. Here’s how to set your splash screen it in just 2 steps:
Add a file to your project’s Resource folder called Default.png.
There is no step 2. Take this time to reflect on how good life is.
And that’s it. Run your app and your splash screen will zoom into glorious view.
A couple of things to watch out for when working with splash screens:
Whatever image you give it will be scaled to fill the 320×480 resolution of the iPhone, so ideally you would use a 320×480-sized image.
If your iPhone app is running in landscape mode, you need to rotate the splash screen you use. For example, our splash screen is rotated 90 degrees to the right in the above image.
See more at: http://getsetgames.com/tag/launch-image/#sthash.GEXwuzsf.dpuf
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 have a universal iOS app with a custom view that has three buttons, each with an image background that extends to the sides of the screen for each orientation (portrait and landscape). The heights of each of the three buttons are the same and all three buttons take up the whole screen. So it looks simliar to this layout (image on the far right).
Since the widths and heights of each button are the same, I need to calculate how big (in pixels) I need to make each button image in order to support both orientations of the iPad and iPhone. On top of that, I also need to create higher res images to support the new Retina display. My questions are...
How do I calculate the resolution these images need to be for...
iPad in both portrait and landscape mode
iPhone in both portrait and landscape mode
iPhone with Retina display
Instead of having two sets of images to support both Retina and non-Retina displays, can I just use one hi-res set that will be scaled down to the non-retina displays? if so, is this a good idea?
If I add a navigation controller and/or a toolbar, what are the heights of these two view objects so I can adjust the heights of my images?
Thanks so much in advance for all your help! I'm going to continue searching for these answers right now.
Good info on porting apps / graphics to retina display is here
Essentially Apple created a new unit for graphics called "points" and if you add additional images to the bundle and use new API you can automagically load one or the other image.
Graphics development for iPhone4 and old iPhones was changed in several ways:
The concept of point was introduced
to replace pixel.
Methods of UIImage will load high
resolution resource files with #2x
in the file name.
Scale factor was added to UIScreen,
UIView, UIImage, and CALayer
classes.
So if we handle CGImage carefully, it's not hard to support the high resolution Retina display of iPhone4.
I have several questions about non-native iPad app in iPad 2x mode:
Could all the changes from old
iPhone to iPhone4 (#2x resources
auto loading, point concept, scale
factor) be applied to iPad 2x mode.
The scale of app on iPad can be
changed. How can I handle it?
With The new iPad sporting Retina Display you will need another set of images for some items such launcher icon, launch images (splash screen).
For example:
The launcher icon for Retina Display on iPhone/iPod Touch is 114 x 114 but on The new iPad the same icon for Retina Display is 144 x 144.
Other example:
On an Universal App, for the launch images (splash screen) you'll need an image set for phones/music players:
Default.png (For old devices)
Default#2x.png (For phones/music player with retina display)
Another image set for Tablets:
Default-Portrait~ipad.png (For original iPad and iPad 2)
Default-Portrait#2x~ipad.png (For the new iPad with retina display)
Default-Landscape~ipad.png
Default-Landscape#2x~ipad.png
The "#2x~ipad" will work on the new iPad in the same way "#2x" worked for the phones and ipods, but will be relative to the old iPad image set.
Unfortunately, all of those content scale functions were added in 4.0, so I don't think there's any way to use the iOS4 stuff that you're asking for.
The iPad 2x mode is just a way to run iPhone-only apps on the iPad's larger screen. If you want to take advantage of iPad's larger screen, all you have to do is create a universal binary (i.e. one that contains views for both iPhone and iPad).
There is no way to get the iPad 2x mode to display your iPhone retina level content automatically—Apple do not support this... presumably as they want people to put effort into developing iPad-specific interfaces for their apps.