Big screen iphone adaptation +ios picture size requirements

Excerpt from: http://blog.ibireme.com/2014/09/16/adapted_to_iphone6/

Apple's website is designed to show that the ultra-high pixel density of the retina display has surpassed the range of human eyes to distinguish.
What effect does retina have on image design (icons, splash screens and all other pixels)? If our app is to support retina, we need to provide high resolution (wide x2, high x2) images. Also, in order to support devices without retina, you still have to prepare a low-resolution version.

In other words, we need to prepare two sets of designs.

For different resolutions of the picture, Apple set a naming convention: If a normal resolution of the picture, the file name is "Abc.png", then its corresponding high-resolution filename should be "[email protected]", more "@2x".

The following is the Iosapp icon format and size specification. Very detailed.

Format of icon and splash screen: PNG format is recommended, it can be standard 24-bit color (8 bits for red, green and blue), plus 8 bits of alpha channel. Do not use the transparent color on the app icon.

Icon Size: Apple has a complete document listing all the icon sizes required for the app and their respective usage environments.

The adaptation of a big screen iphone

Published by Ibireme on 2014/09/16

Since Apple has a big screen iphone, iOS development has to be adapted, presumably Android programmers are stealing music;) Here's a summary of the big screen adaptations that you've learned about these days.

Enable high-resolution mode

Starting with the Xcode6 GM version, the simulator adds the IPhone6 and IPhone6 plus two, and if the old project runs directly into these two simulators, the default is "Compatibility Mode", that is, the system will simply enlarge the content, the display effect is somewhat vague but acceptable. The device resolution and IPhone5 acquired within the app are the same: 320*568 point.

There are 2 ways to enable high-resolution mode (currently I can find):

1. Add the launchimage of the large screen:
In Images.xcassets, delete the old Launchimage group, and then create a new Launchimage group to add the corresponding high-resolution picture. Here's a more detailed description: How to Add a Launch Image for the IPhone 6. If you want to quickly test the new effect, here are 3 sample images to download.

2. Add Launch screen File

Launch screen is a new feature of Xcode6 and IOS8, and it uses a xib file as a splash. This property is automatically ignored when the app is launched in the previous version of iOS and does not cause an exception.
First, click New File->ios User Interface->launch screen, and then enable it in the project setup:

The above two settings allow the app to enter high-resolution mode as long as any one is enabled, but if neither is set, the app will fall back to compatibility mode. Given that many apps now need to be compatible with IOS5, and the first method may have bugs on iOS5, the second approach is recommended.

Display of resources

A picture wins thousands of words, first here is a complete chart: http://www.paintcodeapp.com/news/iphone-6-screens-demystified.

Simply put: IPhone4, IPhone5, iPhone6 the PPI of these devices are the same, the default image priority is @2x. IPhone6 Plus has a higher pixel density and the default image takes precedence over @3x.

In addition, IPhone6 Plus is a bit different from other devices: the screen resolution obtained within the app is 1242*2208, but the actual resolution of the device is 1920*1080, when the system will zoom in on the overall display, downscale to 1/1.15. This feature has also appeared on OSX:

Here are some of the data that might be useful:

Point Scale

	iPhone	iPhone4	iPhone5	iPhone6	iphone6+
	320*480	320*480	320*568	375*667	414*736
Pixel	320*480	640*960	640*1136	750*1334	1242*2208
pexel (equipment)	~	~	~	~	1920*1080
	1	2	2	2	3
PPI	163	326	326	326	401

Iphone4,iphone4s resolution 960*640 aspect ratio 1.5
Iphone5,iphone5s resolution 1136*640 aspect ratio 1.775
IPhone6 resolution 1334*750 aspect ratio 1.778
iphone6+ resolution 1242*2208 aspect ratio 1.777 This shows that only iPhone4 and iphone4s and IPhone5 and the above equipment, the aspect ratio is not the same, you can roughly think IPhone5, 5s, 6, 6+ aspect ratio is the same, you can scale, Although there are subtle differences, it is basically not visible. All design interface design only two sets should be OK, a set with the largest resolution iphone6+ 1920*1080 design, a set of iPhone4 and 4s 960*640 design. It's best to keep two sets of UI transduction in the program to meet all the iphone devices on the market. Of course have more transduction is also possible, the more pictures added to the package, the larger the package, the user download experience is almost. iOS picture Size requirements

Cut two sets of Figure @2x @3x

Display resolution, which is the number of pixel points contained within a unit length, usually in pixels per inch (ppi)

Pixel is the basic coding of basic original pigment and its gray level

@2x represents a point with two pixels @3x representing a point with three pixels

Design interface only design two sets should be OK, a set with the largest resolution iphone6+ 1920*1080 design, a set of IPhone5 1136 * 640 design.

The other small graphs are directly under these two sets of graphs to cut down on it.

If you need to adapt a different picture for 5 and 6 an [email protected] an [email protected] then need to determine the phone version

Apple website image size requirements https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ ICONMATRIX.HTML#//APPLE_REF/DOC/UID/TP40006556-CH27-SW1//Related website Data http://justsee.iteye.com/blog/2118203/HTTP mp.weixin.qq.com/s?__biz=mjm5nzqymjeyoa==&mid=200663740&idx=1&sn=f68aba3773cafa7d1ca2cc624522d242# How the RD IOS APP adapts to iPhone 5s/6/6plus three screen sizes excerpted from:http://mp.weixin.qq.com/s?__biz=mjm5nzqymjeyoa==&mid=200663740& Idx=1&sn=f68aba3773cafa7d1ca2cc624522d242#rd

Each model, such as a program that supports both the iphone and the ipad, requires the launch image to be specified separately for the iphone and ipad. When the old iphone 4 program runs on iphone 5 above, without the iphone 5 boot image, it uses compatibility mode and leaves black edges up and down. When you specify a new boot image for iphone 5, the system thinks the app is already equipped with the iphone 5, and it doesn't leave a black edge up or down. The following is the starting picture, should be very familiar with.

The earth that appeared in the launch picture, called the Blue Marble, was filmed by the crew of the Apollo 17th spacecraft on December 7, 1972. The photo was very shocking, and it was the first time that the average person could see the whole picture of the earth directly. See the question why does the Earth image of the launcher interface not go to China? Does this compromise the user experience?

The start diagram, for the adaptation of the iphone 5, compared with the iphone 4, is obviously long and narrow.

Typical iphone Apps (except games), many of which are above a navigation bar, a toolbar or a tab bar in the middle, a large chunk to display the content area. IPhone5 elongated, for the adaptation of the program, is not a problem, the content of the area is basically dynamic generation. The adaptation time can be simple up and down unchanged, the middle of the content area stretched on the line. Note that the height of the navigation bar and toolbar is also 44 points. The following is the same program, in IPhone4 vs. iphone 5.

AutoLayout

By this time, the weaknesses of the traditional absolute positioning were revealed. At this point, the iphone has two different sizes of screens on the dot, with 3 sizes on the ipad (some apps are compatible with both the iphone and ipad, called Universal).

After the release of the IOS6 system, an AutoLayout technology can be used in iOS development. AutoLayout like a Web page, specify the relative position between the view,button,text, such as how much to the left, how much to the right, how much to center, and so on. For example, a simple layout like the following.

Suppose the upper-left corner is View1, the upper-right corner is VIEW2, and the following area is VIEW3. AutoLayout will say:

View1.left =//View1 left margin 20 points
View1.top = +//View1 top distance boundary 20 points

View2.right =//View2 Right distance boundary 20 points
View2.top = +//View2 top distance boundary 20 points
View2.left = View1.left +//View2 to the left of View1 20 points to the right
View2.width = width of view1.width//View1 equal to View2 width
View2.height = view1.height//view1 height equals view2 height

View3.left = view1.left//VIEW3 left aligned with View1
View3.right = view2.right//VIEW3 right-aligned with VIEW2
View3.top = View1.bottom +//view3 top distance View1 bottom 20 points
View3.bottom = +//view3 bottom distance boundary 20 points
View3.height = view1.height//view3 height equals view1 height

When you specify the constraints above, the AutoLayout automatically calculates the corresponding layout. Above I write more cumbersome, in fact, a lot of operations can be used to specify the mouse drag, and do not necessarily need to use code. But even with the code, there are shorthand methods. Here is the interface when dragging the mouse to specify constraints in Xib.

and absolute positioning, will directly say

View1.frame = (x1, y1, width1, height1) View2.frame = (x2, y2, width2, height2) View3.frame = (x3, y3, Width3, HEIGHT3)

Absolute positioning is not the specified constraint, but rather the developer's own precise designation of the actual coordinate size of View,button, text, etc.

For a screen, absolute positioning may be different from the AutoLayout, or even absolute positioning will be more convenient. But when you need to fit multiple screens simultaneously, AutoLayout doesn't need to be changed at all. and absolute positioning needs to be calculated according to the screen size. For example, the horizontal screen, under the AutoLayout, will automatically become.

This is just the layout of the 3 controls, and the more the number of controls that appear, the more screen size, the AutoLayout advantage is revealed. Another advantage of AutoLayout is that it is easy to support multiple languages, different languages, the same meaning of the length of the text is different, the use of AutoLayout can also be automatically adapted.

In iOS 6, AutoLayout was also less used, when the screen size was relatively small. IOS 7, it started to be used by a lot of people. And now iOS8, more on the iphone 6, iphone 6 Plus needs to adapt, autolayout the trend, not to die.

iphone 6, iphone 6 Plus

The situation has changed since 2014, when the iphone 6 and iphone 6 Plus were released. Compare all iphone models again.

Screen size splits again. But we compare the iphone 5 with the iphone 6 's wide-height ratio.

As can be seen, the iphone 6 and iphone 5 Although the screen size has changed, but their proportion is unchanged. All are 9÷16 = 0.5625 screens.

When the old iphone 5 program runs on the IPhone6, if not adapted. Older programs automatically zoom in and out, spread the new phone, the old program can also run normally. Such a scheme can be considered as an automatic adaptation. But because the old program stretched, the overall look is a bit virtual, also can not make better use of large screen space.

When a developer needs to be manually adapted, a new boot image is specified in the new program, like the iphone 4 transition to IPhone5. When the launch diagram is specified, the screen resolution has become the appropriate size, this time using AutoLayout for layout, the same code, you can support multiple models. The new phone has a larger screen, more virtual dots, and more content to display.

It's worth noting that the IPhone 6 Plus. Its width is 414x736 point, 3x mode, ideally, there should be 1242x2208 pixels. But the actual pixel of the iphone 6 Plus is 1080x1920, which is a little less than the ideal value. The IPhone 6Plus is handled in a way that narrows the overall program down a bit. The resolution is very high, this difference, actually can not see. This processing, can make 44 points of the Click Area constraints, the actual length of the physical, the basic remains unchanged.

From the analysis can be seen, slowly in order to adapt to multiple models, the program's start-up pictures are gradually increasing, in order to solve the problem. After iOS, you can use the Xib to set up the start-up interface, so that the same launch interface can be adapted to multiple models, reducing the space used to start pictures.

Suggestions

1, after the application, all use AutoLayout, do not use absolute positioning.

2, the use of similar web-like way to design the interface.

3, good designers, programmers, try to use point this unit to think, and do not use pixels. For example, you need to do the X 66 dots button, 2x mode, multiplied by the 2,3x mode multiplied by 3. This way of thinking can be roughly estimated to the actual physical length. 44 points, is the mobile phone navigation bar, the height of the toolbar. If you think in pixels, it's easy to make pictures too big or too small.

4, non-vector material, you can do the largest size, and then to reduce. For example, if you need a 3x screen, you can do the highest image directly.

5, and when using the vector tools such as flash to do the material, you should do a bit of that size directly. For example, a button with a 66-point x. Create a x66 scene. Then it is exported to twice times the graph, 3 times times the graph, because the vector amplification is not true. Do not create a 3x scene, export to a large picture, and then zoom out, so it is easy to distort. It is more desirable to use vector diagrams directly.

6, if it is the kind of navigation bar, toolbar and other background map, need to cross the entire screen. You can only cut a small piece, let the program stretch, stretch the way is to keep the pixels on both sides do not move, just stretch the most middle of a column of pixels. If you need to stretch, do not appear in the transverse direction of some gradients.

7, the button's click Area, should not be less than 44 pixels, even if the button's picture looks small, also should make the point button around the transparent area also has the reaction.

8, you can according to your current most convenient test machine model to do some of the main preview map. For example, you have an iphone 5 on hand, you can follow the iphone 5 size, 320x 568 points, need to be compatible with the iphone 6Plus, using 3x mode. This makes it easy to put pictures into the phone to see the actual effect. There are more than one test machine, select the larger, and then do some fine tune. If you support IPhone6 Plus's flat screen mode, you need to handle it separately.

9, the above said is the application of treatment, the game will be some special. Now a lot of games, according to 1136 x768 pixel size to design the scene, so that it can be compatible with both the ipad and iphone, and only use a map. The size of IPad 1x mode is x768 pixels, IPhone 6 in 2x mode, is 1136 * 640. This size, you can simply center the scene, each stretch the scene to the maximum.

Fit +ios picture size requirements for big screen iphone