How IOS apps fit different screen sizes in the system

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, 30) 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). Point this concept is important in iOS development, and the actual user is rarely concerned. 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.

In this article, I use dots and pixels as one-dimensional units of length rather than two-dimensional area units, which is more natural for me, so a point equals 2 pixels. Other articles may say that 1 points equals 4 pixels, in fact refers to 1 points occupy 4 pixels of the area, so there is no mistake, pay attention to the context.

The screen size of the iphone 4 and iphone 3GS is actually the same, all 3.5 inches. At the same point, the actual size 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). The IPhone 4 screen is 640 x 960 pixels, 3.5 inches, we do not have the actual size of the wide height, just follow the diagonal to roughly calculate its PPI. The pixel is treated as a unit of length, and the diagonal is 1154 pixels according to the Pythagorean theorem. The actual length of the screen diagonal is 3.5 inches, which is 1154 pixels divided by 3.5 inches, resulting in 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      // 30 x 40像素[email protected]   // 60 x 80像素

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 = 20               // View1的左边距离边界20个点view1.top = 20                // View1的上边距离边界20个点view2.right = 20              // View2的右边距离边界20个点view2.top = 20                // View2的上边距离边界20个点view2.left = view1.right + 20 // View2的左边距离View1右边20个点view2.width = view1.width     // View1的宽度等于View2的宽度view2.height = view1.height   // view1高度等于view2高度view3.left = view1.left       // view3的跟view1左对齐view3.right = view2.right     // view3跟view2右对齐view3.top = view1.bottom + 20 // view3的上边距离view1下边20个点view3.bottom = 20             // view3下边距离边界20个点view3.height = view1.height   // view3高度等于view1高度

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.

Then why do we need to do that? How do the numbers from the above table in iphone 6, iphone 6 Plus screen width high logic points? Let me guess why, but I can't prove it.

Look at the iphone 6 first, this is relatively simple. The iphone 6 has a high screen-to-width ratio like the iphone 5, which is calculated using the diagonal, which is magnified by 4.7÷4 = 1.175 times times. With this number, the iphone 5 is multiplied by the X 568 points, ignoring the error, almost the iphone 6 screen 375 x 667 points. It is important to note that the width of the screen is the same as the scale to use the diagonal to calculate.

To calculate the iphone 6 Plus in the way above, it should be to get the X 781 points, in fact it is 414x736 points. I guess this is because the IPhone 6 Plus screen is significantly larger, the same size points on the big screen, it makes people feel smaller, so the actual size of each point is magnified, resulting in a smaller number of points. A person sees something with an illusion, not an isolated one, but a comparison with the surrounding environment.

After determining the number of points, and then determine the pixel 1080x1920 (many HDTV is this size), it should be 1080/414=2.6x, but 2.6x this digital development is too troublesome, according to 3x to deal with. In fact, if the pixel reaches 1242x2208,3x can also be accurate to 1:1, this will be better. But today's technology in the consideration of batteries, processors, screen size and other comprehensive factors, it is likely to not achieve such a delicate degree.

The above is just speculation, I believe that the parameters of the mobile phone after repeated consideration and re-determined. The IPhone 6 Plus, a product of the middle of a cell phone and tablet, has been specially processed.

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 8, 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 up pictures.

Suggestions

• For future applications, use AutoLayout and do not use absolute positioning.

• Design the interface using a web-like approach.

• Good designers, programmers, try to use points to think about the unit, rather than using 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.

• Non-vector material, you can do the largest size, and then zoom out. For example, if you need a 3x screen, you can do the highest image directly.

• And when using vector tools such as flash to do the material, you should do a little 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.

• If this is the navigation bar, the toolbar and the background map, you 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.

• The click area of the button should not be less than 44 points, even if the button's picture looks small, it should also make the point button around the transparent area also reacts.

• You can do some major previews according to the model of your current most convenient test machine. 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.

• It says the way the application is handled, and the game is a little bit 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 5 in 2x mode is 1136 * 640 pixels. This size allows the scene to be centered and the scene stretched to its maximum.

How IOS apps fit different screen sizes in the system