IOS: interface Adaptation (iii)--iphone different sizes (screen fit) and system adaptation for various models or devices

For different Apple devices, see IOS: Model parameters, SDK, Xcode versions for each of the parameters.

model Changes

Coordinates: Indicates the physical size of the screen, the coordinates become larger, indicating that the machine screen size has become larger;

Pixels: Indicates the size of the screen picture, with a correspondence between coordinates, such as 1:1 or 1:2, etc.;

PPI: A scale value representing the physical size of the screen to the size of the picture, and the scale of the coordinates and pixels will not change if the PPI is not changed;

         iphone 4            iphone, iphone3/3g models do not use retina, coordinates are 320 x 480, screen pixels x 480, they correspond, 1:1 relationships. That is, a coordinate corresponds to 1 pixels.          iphone 4/4s          machine with Retina screen coordinates of 480, screen pixel 640 x 960, he There are 1:2 relationships between them. That is, a coordinate corresponds to 2 pixels.          iphone 5/5s/5c          machine with Retina screen coordinates of 568, screen pixel 640 x 11 36, the relationship between them 1:2 relations. That is, a coordinate corresponds to 2 pixels.          iphone 6/6s          machine with Retina screen, coordinates 375*667, screen pixels x 1334, they The relationship between the 1:2 relationships. That is, a coordinate corresponds to 2 pixels.          iphone 6 plus/6s plus          machine with Retina screen, coordinates 414*736, screen pixel 108 0 x 1920, the relationship between them 1:2.6 relationship. That is, a coordinate corresponds to 2.6 pixels.         adaptation methods:

• after the IPhone 4s , different models, screen size coordinates unchanged, with the actual picture size ratio is not 1:1 is 1:2 relationship. Because the coordinates are constant, you can use absolute positioning in development, determine each view location, and provide two sets of pictures,~.png and [email protected], the system automatically determines which image to use based on the resolution of the machine.
• After IPhone 5/5s/5c , because the screen size coordinates have changed, the height increases 568-480 = 88 points, then uses the absolute localization way, will cause the program height is not enough, if the program does not fit, the system will be the extra 88 points will be automatically divided into two parts , making black edges appear up and down. corresponding to different models, screen coordinate size has changed, can no longer be absolutely positioning, in order to solve this problem, iOS has a new technology:AutoLayout. AutoLayout can solve different models, screen size changes, as for the picture adaptation, because 5/5s/5c, coordinates: pixels = 1:2, so directly using the @2x.png image on the line.

As for the @2x image size, is the size of 640 x 960 or 640 x 1136, one is the tensile effect, one is the compression effect, because the scale is similar, the recommended use of large map.

• after IPhone 6 , because the screen size coordinates have changed, the width and height are increased, but the width, height ratio is unchanged, similar to the previous processing, using AutoLayout automatic adaptation, coordinates: pixels = 1:2, using @2x.png picture.
  Prior to the synthesis,@2x pictures can be in accordance with the size of the X 1334.
• IPhone 6 Plus, similar to the previous use of AutoLayout, when using the picture, because the coordinates: pixels = 1:2.6, theoretically use the @2.6x.png picture can, but this is not an integer, the actual use is inconvenient, and @2x and @3x It's not going to work.

Quote a piece of text that says very well:

"is not the existing screen physical resolution significantly more than the @2x but still not reach the level of @3x?" So we're crooked. A screen that satisfies @3x is always OK?
Right, crooked.
When the app runs on IPhone 6 Plus, IOS will trick it into saying that you're running on an oversized @3x Retina display with a physical resolution of up to 1242 X 2208 and a logic resolution of 414 X 736, both larger than the iphone 6. And then as designers and developers, also along with crooked. when the designer paints the screen as 1242 x 2208来 (and to provide a high-definition image of @3x ), the developer also writes the program according to the logical resolution of 414 X 736.
But the borrowing always comes back. When we're done, IOS gets the fake large UI drawing result, and shrinks to the actual X 1920 resolution in real time (the system is through some sort of algorithm). As a result, users on the IPhone 6 Plus screen will always see a zoomed-out image:

This makes the design and development process much simpler, and the final actual scaling factor @2.62x very close to the ideal @2.46x, making the same material look very reasonable on the real machine.

Size adaptation:

The dimensions in the code do not use absolute values such as 480 or 460, and the uiscreen of the device is used.

Turn on the adapter? (Manual/Automatic)

On a model, if it is automatic adaptation, such as the iphone 5, the old version of the program will be on the screen, the two sides more than two blocks of black bar, such as Iphone6/6plus, the old version of the program will automatically wait than stretched. So how do I turn off automatic adaptation?

Specify the start diagram (for example, iphone 5 is [email protected]) or use launch screen file.xib, which means the program uses manual adaptation, does not stretch, etc., but the program must be processed internally, otherwise an automatic adaptation scheme is used.

Summarize:

• The adaptation of different models can be seen as two parts, one is the screen size adaptation (coordinates), one is the pixel adaptation, the former according to the different model size, the view size automatically adapts (AutoLayout), the latter according to the model resolution and the coordinate ratio, provides the appropriate @xx picture;
• At present, 4s, 5/5s/5c, 6 of the adaptation, the use of picture parts, are using @2x pictures, in different machines will certainly have a certain stretch, narrow, not see any good solution, recommended pictures by the big picture standard;
• Trend: Machine screen size may be more and more, the absolute positioning of the way certainly not, using AutoLayout, automatically adapt to screen size, similar to the idea of a Web page design interface;
• Trend: In Xcode 6 already can use vector diagram, can use vector diagram, avoid various specifications picture;

Here's a look at the system adaptation: Starting with iOS5,

IOS7 after and before

12	<span style="font-size:18px;background-color: rgb(255, 255, 255);">#define IOSVersion                          [[[UIDevice currentDevice] systemVersion] floatValue]#define IsiOS7Later                         !(IOSVersion < 7.0)</span>

The system needs to be adapted with the following points:

1. (StatusBar) statusbarheight height iOS7 after StatusBar is suspended above the screen so the control layout needs to be added 20 and not required before IOS7

2. Label text adaptive needs to be adapted

3. (iOS8 adaptation) Uialertcontroller Uialertaction-ios8 instead of Uialertview

4. (iOS8 adaptation) iOS8 new location judgment, info.plist file settings two properties for positioning needs adaptation

(Subsequent updates)

IOS: interface Adaptation (iii)--iphone different sizes (screen fit) and system adaptation for various models or devices