IPhone screen knowledge point analysis, iphone Knowledge Point Analysis

IPhone screen knowledge point analysis, iphone Knowledge Point Analysis

SEP 28 th, 2014

I. Screen-related knowledge point 1. Screen Size

In the display world, the screen size is represented by the diagonal length of the screen, measured in inches. For example, the 3.5 inch screen of iPhone 4 means that the diagonal line length of the screen is 3.5 inch.

2. Resolution

Resolution is one of the most important parameters of any mobile phone product. The display is composed of pixels, and the resolution can be simply understood as the number of pixels on the screen. For example, if the screen resolution of iPhone 4 is 640 × 960, it indicates that the screen has 640 pixels horizontally and 960 pixels vertically.

3. PPI

PPI (Pixels Per Inch) indicates the number of Pixels Per unit area. Resolution can indicate the number of pixels on the screen. To describe the display quality of the screen, you also need to know the screen size and finally calculate the number of pixels per unit area. Obviously, the higher the PPI, the more delicate the screen display.

PPI calculation formula:

X: length, Y: width, and Z: screen size, that is, diagonal length.

4. Points

It can be simply understood as our useUIKitOrCore AnimationThe logical coordinate system used to process interface elements. Points is introduced after iOS4 to provide a device-independent output effect.

Considering that mobile phones with different resolution screens may be available in the future, if developers manipulate pixels in the interface layout, there will be a copy of adaptation code for each device with different resolution. For example, if you want to draw a line with a length of 320 on the iPhone 3gs with a resolution of 480X1 inch, it is assumed that 50 pixels are required, that is, the line length is set to 50 pixels; however, for iPhone 4 with a resolution of 640x960, the actual length of 50 pixels is only half of the length of iPhone 3gs, that is, 0.5 inch. Therefore, developers must use two adaptive codes: Set the line length to 50 pixels on the iPhone 3gs and 100 pixels on the iPhone 4. This is only two devices. If the iPhone 5/5C/5S and iPhone 6/6 + are included, the developer will not go crazy if each resolution comes with a set of adaptation code ??

Now Apple uses a logical coordinate system to solve the problem of multi-resolution screen adaptation. Each point on the screen is used as the origin in the upper left corner of the screen, and the horizontal side is the X axis, Y axis coordinates (PS: not all frame default coordinate systems are like this, for exampleAPPKitInNSViewOf course, developers can alsoUIKitAndCore AnimationTo the lower left corner of the screen, but the principle is the same .). Taking iPhone3GS/4 as an example, the maximum values of X and Y in their coordinate systems are 320 and 480 respectively.

With the logical coordinate system, you can draw a line with a length of 1 inch in iPhone 3gs/4 with different resolutions: set the line length to 50 Points (assuming that 1 inch corresponds to so many Points ),UIKitWhen drawing on the screen, the screen resolution will be determined. If the screen is 320x480 resolution of the iPhone 3gs, the screen will be automatically drawn in 50 pixels; if the screen is 640x960 resolution of the iPhone 4, the image is automatically drawn in 100 pixels.

This mechanism makes iOS developers have almost zero workload on device screen adaptation before the 4-inch iPhone 5 is released (of course, two sets of images need to be prepared ), android colleagues have been drooling for three thousand feet. Later, as the iPhone screen size changes, the value range of the logical coordinate system also changes, which makes iOS developers have something to do.

5. Rendering ratio (Scale)

The ratio of the number of pixels to the number of logical coordinate points is the rendering ratio (Scale ). It is more intuitive to say that a logical coordinate point needs to be rendered using several pixels.

The logic Coordinate System of iPhone 3gs is 320 × 480, and the resolution is 320 × 480. That is, each coordinate point corresponds to one pixel, that is, the Scale is 1, and the logic Coordinate System of iPhone 4 is 320 × 480, the resolution is 640 × 960. Each coordinate point corresponds to two pixels, that is, the Scale is 2.

Therefore, to adapt to the iPhone 6 + screen, you have to add a @ 3x resolution image.

6. Aspect Ratio

The ratio of screen width to height can also be the ratio of the number of horizontal pixels in the resolution and the number of portrait pixels. They are usually consistent and are generally expressed in integers.

IPhone3GS/4/4S aspect ratio, iPhone5/5C/5S/6/6 + aspect ratio are.

When the iPhone 5 came out that year, the black borders of applications adapted to 3.5-inch screens were still fresh in our memory, and the user experience was poor, although most applications were quickly adapted. Fortunately, Apple has learned how to be smart this time. From a 4-inch screen to an iPhone 6 4.7-inch screen and an iPhone 6 + 5.5-inch screen, the aspect ratio has not changed. That is to say, the application running on iPhone 5 can smoothly transition to iPhone 6/6 + through stretching, which may be slightly blurred. However, the upgrade is much better than the upgrade from 3.5 to 4-inch screens.

Ii. Description 1. iPhone screen parameters of different generations

The following figure shows several key screen-related parameters for several generations of iPhones from iPhone 4 to iPhone 6 +:

It should be noted that the logic coordinates of iPhone 6 + are 414 × 736, and the rendering ratio is three times, so the corresponding screen resolution is 1242 × 2208. However, the actual screen resolution of iPhone 6 + is 1080 × 1920. Then, the system will scale the overall display content from the new sample, and the downsampling ratio is 1/1. 15.

2. Coordinate System in the old project

The project created using Xcode of versions earlier than Xcode6 runs on iPhone6/6 + and the logical coordinates obtained are 320*568 Identical to the iPhone5/5C/5S screen. In this way, we can seamlessly upgrade the screen from 4-inch to 4.7-inch and 5.5-inch. Even if we don't do anything, our old project can run almost perfectly on iPhone 6/6 +. Of course, because of proportional amplification, the image may be blurred or jagged.

To restore the coordinate system of the old project to normal, you can addLaunchImageOrLaunch Screen FileAs shown in:

LaunchImageInImages.xcassetsTo delete the oldLaunchImageGroup, and then createLaunchImageGroup to add a high-resolution image. Here is a more detailed graphic Introduction: How to Add a Launch Image for the iPhone 6.

WhereLaunch Screen FileIt is a newly added feature of Xcode6 and iOS8. It uses an xib file as the startup screen. This attribute is automatically ignored when the App is started in the old iOS version, without exceptions.

You can enable any of the above two settings to enable the App to enter the high-resolution mode. Since many apps still need to be compatible with iOS5, and the first method may have bugs in iOS5, the second method is recommended here.

Iii. References

• Drawing and Printing Guide for iOS
• Resolution
• Big screen iPhone adaptation

SEP 28 th, 2014

I. Screen-related knowledge point 1. Screen Size

In the display world, the screen size is represented by the diagonal length of the screen, measured in inches. For example, the 3.5 inch screen of iPhone 4 means that the diagonal line length of the screen is 3.5 inch.

2. Resolution

Resolution is one of the most important parameters of any mobile phone product. The display is composed of pixels, and the resolution can be simply understood as the number of pixels on the screen. For example, if the screen resolution of iPhone 4 is 640 × 960, it indicates that the screen has 640 pixels horizontally and 960 pixels vertically.

3. PPI

PPI (Pixels Per Inch) indicates the number of Pixels Per unit area. Resolution can indicate the number of pixels on the screen. To describe the display quality of the screen, you also need to know the screen size and finally calculate the number of pixels per unit area. Obviously, the higher the PPI, the more delicate the screen display.

PPI calculation formula:

X: length, Y: width, and Z: screen size, that is, diagonal length.

4. Points

It can be simply understood as our useUIKitOrCore AnimationThe logical coordinate system used to process interface elements. Points is introduced after iOS4 to provide a device-independent output effect.

Considering that mobile phones with different resolution screens may be available in the future, if developers manipulate pixels in the interface layout, there will be a copy of adaptation code for each device with different resolution. For example, if you want to draw a line with a length of 320 on the iPhone 3gs with a resolution of 480X1 inch, it is assumed that 50 pixels are required, that is, the line length is set to 50 pixels; however, for iPhone 4 with a resolution of 640x960, the actual length of 50 pixels is only half of the length of iPhone 3gs, that is, 0.5 inch. Therefore, developers must use two adaptive codes: Set the line length to 50 pixels on the iPhone 3gs and 100 pixels on the iPhone 4. This is only two devices. If the iPhone 5/5C/5S and iPhone 6/6 + are included, the developer will not go crazy if each resolution comes with a set of adaptation code ??

Now Apple uses a logical coordinate system to solve the problem of multi-resolution screen adaptation. Each point on the screen is used as the origin in the upper left corner of the screen, and the horizontal side is the X axis, Y axis coordinates (PS: not all frame default coordinate systems are like this, for exampleAPPKitInNSViewOf course, developers can alsoUIKitAndCore AnimationTo the lower left corner of the screen, but the principle is the same .). Taking iPhone3GS/4 as an example, the maximum values of X and Y in their coordinate systems are 320 and 480 respectively.

With the logical coordinate system, you can draw a line with a length of 1 inch in iPhone 3gs/4 with different resolutions: set the line length to 50 Points (assuming that 1 inch corresponds to so many Points ),UIKitWhen drawing on the screen, the screen resolution will be determined. If the screen is 320x480 resolution of the iPhone 3gs, the screen will be automatically drawn in 50 pixels; if the screen is 640x960 resolution of the iPhone 4, the image is automatically drawn in 100 pixels.

This mechanism makes iOS developers have almost zero workload on device screen adaptation before the 4-inch iPhone 5 is released (of course, two sets of images need to be prepared ), android colleagues have been drooling for three thousand feet. Later, as the iPhone screen size changes, the value range of the logical coordinate system also changes, which makes iOS developers have something to do.

5. Rendering ratio (Scale)

The ratio of the number of pixels to the number of logical coordinate points is the rendering ratio (Scale ). It is more intuitive to say that a logical coordinate point needs to be rendered using several pixels.

The logic Coordinate System of iPhone 3gs is 320 × 480, and the resolution is 320 × 480. That is, each coordinate point corresponds to one pixel, that is, the Scale is 1, and the logic Coordinate System of iPhone 4 is 320 × 480, the resolution is 640 × 960. Each coordinate point corresponds to two pixels, that is, the Scale is 2.

Therefore, to adapt to the iPhone 6 + screen, you have to add a @ 3x resolution image.

6. Aspect Ratio

The ratio of screen width to height can also be the ratio of the number of horizontal pixels in the resolution and the number of portrait pixels. They are usually consistent and are generally expressed in integers.

IPhone3GS/4/4S aspect ratio, iPhone5/5C/5S/6/6 + aspect ratio are.

When the iPhone 5 came out that year, the black borders of applications adapted to 3.5-inch screens were still fresh in our memory, and the user experience was poor, although most applications were quickly adapted. Fortunately, Apple has learned how to be smart this time. From a 4-inch screen to an iPhone 6 4.7-inch screen and an iPhone 6 + 5.5-inch screen, the aspect ratio has not changed. That is to say, the application running on iPhone 5 can smoothly transition to iPhone 6/6 + through stretching, which may be slightly blurred. However, the upgrade is much better than the upgrade from 3.5 to 4-inch screens.

Ii. Description 1. iPhone screen parameters of different generations

The following figure shows several key screen-related parameters for several generations of iPhones from iPhone 4 to iPhone 6 +:

It should be noted that the logic coordinates of iPhone 6 + are 414 × 736, and the rendering ratio is three times, so the corresponding screen resolution is 1242 × 2208. However, the actual screen resolution of iPhone 6 + is 1080 × 1920. Then, the system will scale the overall display content from the new sample, and the downsampling ratio is 1/1. 15.

2. Coordinate System in the old project

The project created using Xcode of versions earlier than Xcode6 runs on iPhone6/6 + and the logical coordinates obtained are 320*568 Identical to the iPhone5/5C/5S screen. In this way, we can seamlessly upgrade the screen from 4-inch to 4.7-inch and 5.5-inch. Even if we don't do anything, our old project can run almost perfectly on iPhone 6/6 +. Of course, because of proportional amplification, the image may be blurred or jagged.

To restore the coordinate system of the old project to normal, you can addLaunchImageOrLaunch Screen FileAs shown in:

LaunchImageInImages.xcassetsTo delete the oldLaunchImageGroup, and then createLaunchImageGroup to add a high-resolution image. Here is a more detailed graphic Introduction: How to Add a Launch Image for the iPhone 6.

WhereLaunch Screen FileIt is a newly added feature of Xcode6 and iOS8. It uses an xib file as the startup screen. This attribute is automatically ignored when the App is started in the old iOS version, without exceptions.

You can enable any of the above two settings to enable the App to enter the high-resolution mode. Since many apps still need to be compatible with iOS5, and the first method may have bugs in iOS5, the second method is recommended here.

Iii. References

• Drawing and Printing Guide for iOS
• Resolution
• Big screen iPhone adaptation