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 machine with Retina screen, coordinates 375, 667, screen pixels x 1334, between them Relationship 1:2 relationship. That is, a coordinate corresponds to 2 pixels. iphone 6 plus machine with Retina screen, coordinates 414, 736, screen pixels x 192 0, the relationship between them 1:2.6 relations. 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 the direct use of @2x.png pictures 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:
Other:
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;
- For designers:
(1) 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. Since the length-to-width ratio of several models is 9:16, it can be stretched directly.
(2) There are non-vector material, direct stretching to @3x.
(3) and when using vector tools such as flash to do the material, you should do some of that size directly. For example, a button with a 66-point x. Create a scene with a x 66. 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.
Other:--1. If it's the kind of navigation bar, a background map like a toolbar needs to span 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.
--2. The click area of the button should not be less than 44pt (too small and difficult to point), even if the button's picture looks smaller, it should also make the point button around the transparent area also reacts. Practical operation Scheme: The following is a personal point of view, there is no better or wrong, to be verified, promoted.
- Scenario (1):
Effect: (high) each view, button, cell, bar height, height spacing fixed (coordinates), different screen height shows the number of cells different, each bar,btn from the top of the screen, or occupy the bottom of the screen unchanged; (width) The width of each view, button, cell, bar varies with the screen size.
Implementation method:
(high): code defines the height of each control in # #, Xib directly to the height of each control, the parent view with ScreenHeight to adjust the height;
(width):
1. Width of the controls in the code control width/Figure width. 00 "This ratio x,x*scrrenweight the width of the control, and the parent view is adjusted with scrrenweight;
autorisizing constrained width in 2.xib; the parent View code adjusts the width with scrrenweight;
- Scenario (2):
Effect: Each view, button, cell, bar width height with different screen size, appropriate scaling.
Implementation method:
1. The height adaptation reference above the width adaptation;
2. The constraints of handwriting AutoLayout in the code, Nslayoutconstraint related classes or xib using AutoLayout, the parent view with Scrrensize to adjust the width;
- Description
1. ( for the controller created, the different screen controller xib the initial size, is the screen size or the size of the Xib settings, did not study, do not know, in the code with scrrensize adjustment insurance ).
2. For the height of fixed, only in the width of One Direction to do the adaptation, if used AutoLayout, there will be a lot of warning, the height of the above do not make the constraint, automatic change adjustment not come out, if the height is also a constraint, then it is not in a direction to adapt the premise.
iphone different models fit 6/6plus--spare
