iOS resolution for those things

All say do iOS development than Android worry, then how does iOS do this? Let's analyze it today and hope to be a little help to the students who do iOS interface design.

1 resolution of iOS devices

iOS devices, there are currently 3 main types (Apple TV, etc. not discussed here), divided into two categories by resolution

Iphone/ipod Touch

Pu resolution 320 pixels x 480 pixels

Retina resolution 640 pixels x 960 pixels

Ipad,ipad2/new IPad

Pu 768 pixels x 1024 pixels

Retina screen 1536 pixels x 2048 pixels

2 The relationship between the point and resolution used in iOS design

Despite the 4 resolutions listed above, but careful people will find that the resolution of the retina screen is always maintained at twice times the Pu, this is for iOS design or development time to provide a great convenience, naturally think for the interface design, only need to design a set, Then zoom in and out in equal proportion. When it comes to design and development, it is true that Apple, in order to prevent the confusion of thinking in the communication process (especially for programming implementations), uses a point to describe the size of the interface elements, such as:

Iphone/ipod Touch

Interface description 320 points x 480 points

Iphone/ipad

Interface description 768 points x 1024 points

Conversion relationship

Pu 1 points = 1 pixels

Retina Screen 1 dots = 2 pixels

Thus, whether we are designing and developing for Pu or retina screens, we can clearly and uniformly use points to describe the size of the interface elements.

3 Name of the iOS interface picture

Now we can describe the size of the interface elements of the two screens in a unified language, but how do we set up the different resolutions for different screen images? Does it mean that we have to do it in the place where every picture is loaded, add a statement that determines if the current device is a Retina screen, and then load the corresponding picture? Of course you can do this, but iOS has a simpler way of automatically loading, which is named after the canonical file name. For example, the following statement that loads a picture:

[UIImage imagenamed:@ "pic.png"]

In the actual operation, if you find that the current device is a Retina screen, will automatically find the picture "[email protected]", automatically load the image material for the retina screen, is not very convenient?

Therefore, we in the production of iOS devices, you can imitate the following, the image file classification, for the 640x960 folder picture, file name add "@2x" can.

4 Naming conventions for common icons for iOS apps

You can refer to the following two documents:

Apple's q&a on this issue

Apple's official documentation

Be sure to name the icons according to the specifications described in the documentation!!

PS: Some additional icons refer to

A icon will automatically add a highlight effect, if not required, you can explicitly specify the uiprerenderedicon key value in the plist to remove

B 57 Pixel Pu iphone icon with rounded corner radius of 10 pixels

C 114 Pixel Retina iphone icon with rounded corners radius of 20 pixels

D 512 pixels for the Itunes/app store icon, the actual display will be scaled to 175 pixels for display (but submission is not available to submit 175 pixels)

E 72-megapixel Pu ipad icon with a radius of 13 pixels for the fillet of the icon

F 144 Pixel Retina screen ipad icon with a radius of 26 pixels for the rounded corners

G 50 pixels The final visual size of the ipad's Spotlight search icon is 48 pixels, because iOS removes 1 pixels from each edge of the icon, adding a shadow effect

The final visual size of the spotlight search icon for the H 100 pixel retina screen is 96 pixels, the same reason, this time minus 2 pixels per side