IOS app Screen size adaptation

iphone for the first generation

In 2007, the first iphone was released and the screen was 480 pixels wide. The following are arranged in the order of width and height. This resolution has remained the same for the iphone 3GS.

At that time, iOS apps (apps) were written to support absolute targeting only. For example, a button (x, y, width, height) = (20, 30, 40, 50) means its width is 40 pixels, the height is 50 pixels, and the position is placed (20, 20) pixels.

IPhone 4

In 2010, the IPhone 4 was released, taking the lead with the retina display, which multiplied to 640 x 960 pixels in the same physical size of the screen.

So there is a problem, how to let the original app run on the new phone? One advantage of the iphone is that there are a number of excellent apps, if not compatible with the original app, it is the equivalent of giving up this hard-earned advantage, is very unwise.

Every time the iphone's screen changes, such as the iphone 3GS transitioning to iphone 4, the iphone 4 transitioning to the iphone 5, and the iphone 5 transitioning to iphone 6, Apple needs to find a way to solve the above compatibility issues.

To run the previous app, introduce a new concept point (dot). The point concept is important in iOS development, not the developer's attention. The IPhone 4 screen size continues to be x 480, but the units are not pixels but dots.

In the iphone 3GS, 1 dots equals 1 pixels. In other words, dots and pixels can be exchanged directly.

In iphone 4, 1 dots equals 2 pixels.

The screen size of the iphone 4 and iphone 3GS is actually the same, all 3.5 inches. The same point, in fact, looks the same. Just iphone 4 pixels more on a unit inch and looks more delicate.

When developing iOS, it is more convenient to use points as the basic unit. List comparison

The screen mode here can be initially understood as how many pixels a point equals. 2x is a point equal to 2 pixels.

Summarize the Unit

The physical length of the phone screen, using inches as the unit. For example, the iphone 4 screen is 3.5 inches, the iphone 5 is 4 inches, and the iphone 6 is 4.7 inches, where the number refers to the physical length of the screen diagonal of the phone.

Screen pixels, such as the iphone 3GS screen is 480 pixels, iphone 4 is 640 x 960 pixels, where the pixels can be imagined as the screen is really used to display the color of the light dot.

Point, the development of the use of the unit, is a virtual unit, not actually exist, so the point is sometimes called virtual point. Point this unit, used to block different screen devices, compatible with previous programs.

The number of pixels per inch, called the PPI (pixel per inch). We can simply calculate that the IPhone 4 is 640 x 960 pixels, the diagonal is 1154 pixels, divided by 3.5 inches, should be 330ppi. And the official number is 326ppi. When the pixel is too dense, more than 300ppi, the human eye can not distinguish between each pixel. So the iphone 4 screen is called the retina display. Retina in English, is the meaning of the retina.

After the IPhone 4 (x, y, width, height) = (20, 30, 40, 50), it represents a height of 40 points, a width of 50 points, placed at (20, 20) points. This approach, which was previously converted to dots as units of pixels, enabled iphone 3GS applications to run on iphone 4 without modification.

text, color, and so on are vector data, amplification is not distorted. The original iphone 3GS program, run on the iphone 4, text display is also very clear.

Images are not vector data and are handled differently. Suppose the picture is example.png, the size is 40 pixels (the units here are pixels, and the units of the digital pictures are usually pixels). When used in the iphone 3GS and iphone 4, this example.png occupies a screen of 40 dots. And because the 1 dots in iphone 4 equals 2 pixels, which is a picture of 40 pixels, which occupies a screen of x 80 pixels, the image looks blurry in iphone 4.

Development, in order to make the picture clear, need to do picture adaptation. You need to prepare two images with the same content, and put them in the same directory.

Example.png//x 40 pixels
[Email protected]//x 80 pixels

When using Example.png in the program, the corresponding image is automatically selected according to the screen mode. Screen 1x mode, will choose Example.png, 2x mode will prefer [email protected], if [email protected] does not exist, select Example.png.

The picture is the same as the screen, also has 1x mode, 2x mode. In the iphone 6 Plus, there is also 3x mode, the principle is the same.

When iphone 4 selects the [email protected] image, it will generate a picture with a size of 40 dots and 2x mode. This time, the picture will look very clear. And there is no adaptation of the old program, [email protected] does not exist, select Example.png, generate a size of 40 x points, 1x mode of the picture, looks more blurred. But they occupy the same number of screen points.

IPhone 5

Apple released iphone 5 in 2012. We compare all models and still use points as units.

Compared to iphone 4, the width of the iphone 5 remains the same. Height increased by 568-480 = 88 points.

In iOS development, 44 is a very special number. The iOS interface guide says that the human finger has a certain size, and when the click area is below 44 points, it is difficult to spot. 44 is twice times the 88.

When the original program does not fit the iphone 5, it can also run normally, but the extra 88 points will be automatically divided into the upper and lower parts, so that black edge appears. I can't find a good picture.

So how can you tell the iOS system that the app is already equipped with iphone 5? Here, let's start by talking about the startup picture.

Click on the Home screen icon, when you enter the app, a picture is displayed immediately, this image is the boot image (Launch image). The app needs to do some initialization when it's officially launched, which is usually time-consuming. First, the start of the image, you can make the user feel that the system responds immediately, reduce the anxiety of waiting.

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. IPhone 5 stretched, for the program's adaptation, is not cumbersome, content area content 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 iphone 4 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 iOS 6 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 dots 
 View1.top =                //View1 top distance boundary 20 dots 
 
 View2.right x           &N Bsp  //View2 right distance boundary 20 points 
 View2.top =                //View2 top distance boundary 20 dots 
 View2.left = View1.left +  //View2 left distance View1 right 20 points 
 View2.width = view1.width    //View1 width equals View2 Width 
 View2.height = view1.height  //view1 height equals view2 height 
 
 view3.left = view1.left      //VIEW3 Align to view1 left 
 View3.right = view2.right    //VIEW3 with view2 right 
 View3.top = View1.bottom +//view3 top distance View1 20 points below 
 View3.bottom =            //VIEW3 bottom distance boundary 20 points 
 View3.height = view1.height &N Bsp 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 iOS 8, more on the iphone 6, iphone 6 Plus needs to adapt, AutoLayout 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 iphone 6, if it's 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, as with the iphone 4 transition to iphone 5, in the new program, specify a new boot image. 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 6 Plus 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, multiply by 2, 3x mode is 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 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. 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, you can follow the iphone 5 size, the X 568 points, need to be compatible with the iphone 6 Plus, use 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 the flat screen mode of iphone 6 Plus, 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 x 768 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 the IPad 1x mode is 768 pixels, and IPhone 6 in 2x mode is 1136 * 640. This size, you can simply center the scene, each stretch the scene to the maximum.

This article transferred from:http://www.niaogebiji.com/article-4379-1.html

IOS app Screen size adaptation