CODEWITHSUNDEEP
objective-ciosuikitscreen-resolutioniphone-5
Ufuk Can Bicici
Ufuk Can Bicici

Reputation: 3659

Image resolution support for iPhone 3G, iPhone 4 and iPhone 5

I know that similar questions have been asked before, but I am really in a dire situation.

I am building an app which is wanted to work on iPhone 3G, iPhone 4 and iPhone 5.

I am a beginner in iOS development and until now, I have written a large amount of UI code which just works on the iPhone Simulator. I concentrated on the general language and SDK features in order to learn about the general iOS development and therefore mostly ignored any resolution support outside of what the Simulator is providing me.

Now, I am facing this requirement of portability among those different iPhone versions and I am very confused. First of all let me tell what I am knowing about iPhone 3 and iPhone 4 screen support details and please correct me, if I did something wrong (ignoring iPhone 5 completely, for now):

  1. The system assumes a 320x480 POINT based viewing area. In iPhone 3, the actual screen size is the same, but iPhone 4 uses an actual 640x960 pixels sized screen.

  2. We code and generate our views according to the 320x480 size. We provide the normal resolution image (for example 100x100 sized some_image.png) and the high resolution version with the "@2x" suffix. (200x200-sized [email protected]) both in the same app bundle.

  3. When calling UIKit image loading methods, for example the ones of UIImage or UIImageView the system selects the correct version of our images and loads them, according to the current device (iPhone 3 or iPhone 4).

Until now, I was cautious to provide these three steps in order to support low and high resolution iPhone 3G and iPhone 4.

Let's say I have an image of size 100x100 which I am going to use in UIImage objects. I provide the 200x200 high resolution version as well and I think this will work on both iPhone 4 and iPhone 5 with the "@2x" suffix.

But let's say I have a background image of the size 320x480 covering the whole background and I provide the 640x960 version with the "@2x" suffix as well.

But what will be happen in an iPhone 5 screen with a size of 640x1136? Should I prepare a iPhone5 resolution image and load it in a if(IPHONE5 == true) conditional?

What is the proper method of handling this?

Upvotes: 1

Views: 1527

Answers (1)

bobnoble
bobnoble

Reputation: 5824

A couple of issues you need to handle:

  1. a "full screen"/background image/other image that is intended to match the aspect ratio of the screen
  2. images that are screen aspect ratio independent

In the case of #1, you will want to provide the same/similar image with different resolutions. One that fits the 320x480 pixel devices, one for the retina display (640x960 pixel) with @2x, and the third to fit the iPhone 5 display (and possibly separate iPad images if it is a universal app).

Unfortunately, iOS does not provide anything like the @2x naming for iPhone 5 displays. A common convention seems to be including @568h in the filename, but that is NOT automatically used by iOS. The solution is to determine if the display is an iPhone and whether it is the taller display. The following code snippet will allow you to do this:

// Is it an iPhone with the tall screen?
if ([[ UIScreen mainScreen ] bounds ].size.height == 568.))

    // use the tall image
    image = [UIImage imageNamed:@"[email protected]"

else {

    // use 'default' image (will use [email protected] if iPhone retina, 
    // myImage~ipad.png if iPad, [email protected] if iPad retina)
    image = [UIImage imageNamed:@"myImage.png"
}

For #2, since you probably want the 100px x 100px to show as square on all devices, you are ok providing only the 100px x 100px and a 200px x 200px images, with the latter having the @2x in it filename.

Upvotes: 2

Related Questions