Practical android technology: Use dimension to solve the problem of multi-screen adaptation

Principle of opening and closing-separation of variables and immutability, and easy to customize

The purpose of an application is to apply to multiple devices as much as possible. The configurations of these devices vary, with some different physical sizes and resolutions. in order to achieve the best adaptation effect, repeat with the least code, and achieve the best scalability, you need to separate resource usage and resources. use a unified resource manager to manage resources. the Code Obtains resources through a unified interface provided by the resource manager. in this way, the user can obtain resources in a unified manner, and the resource owner does not need to care about how to obtain different resources for different devices. in this way, the code that changes with different devices is minimized, and only resource managers need to worry about different device-related resources.
For example, obtain and use a string. the most direct method is to directly use literal constants in the code. but when processing multiple languages, this is very troublesome. You need code to determine the current system language and then decide which one to use! However, if you use the resource manager to obtain the string, the code coupling will be minimized: only the resource manager needs to judge the current system language and then proceed to the corresponding string. Others do not need to care about it.
This is also true for Android. The Code obtains system resources through a unified interface, and the resource manager handles device relevance issues.

What does hdpi commonly used in Android resources mean? To understand this, first understand some metrics and dimensions in the standard graphic design.

Basic terms and concepts: screen size

It refers to the physical size of the screen, measured by the length of the diagonal line of the screen, measured in inches (1 inch = 2.54 cm ).
The screen size is large or small. It usually determines how much content can be displayed on the screen. For example, the area displayed on the computer is generally larger than that displayed on the mobile phone.

Resolution resolution

Usually measured in pixels. pixels are defined as the basic units that a device can display, such as 480x800 or 1024x768, this means that the screen can display more than 1024 points in length and 768 points in height. resolution is usually used to indicate the size of an image. however, the resolution cannot represent the real physical size of the image. the physical size displayed on the screen cannot be determined.

Screen density Density

The number of pixel points displayed on the screen per unit length, that is, the number of pixel points displayed on the screen at 1 inch. The calculation method is to divide the resolution by the physical size. the screen density reflects the clarity of the device. the Unit is usually PPI (pixels per inch ). the higher the PPI value, the clearer the screen, and the clearer the display. for example, Apple's retina series screen has reached 326ppi. the human eye's recognition capability is around 326 ppi, so when it reaches, the human eye cannot tell the pixel, so it shows more clearly.
With the concept of screen density, we can see that the physical size of images of the same size (resolution) on a high-density screen will be small (It looks small ), the physical size displayed on the low-density screen will become larger (it looks big ).
So why is there no software to adapt to the Retina screen of the MBP, for example, the PS icon may look blurred. because the density of the MPO Retina screen is greatly increased, which is four times that of the previous one, images of the same size will look smaller than the original one, which is 1/4 of the original one. If they are too small, they will not be seen, however, this is inconvenient to use. therefore, in order to adapt to the new Retina screen, the MAC system must scale the image to four times the original size, so that the image looks so big in the eyes of users! Because the icon is four times bigger, it will be blurred! Therefore, applications on Mac must be optimized and adapted after the retina.

Aspect Ratio of the screen

The ratio of the physical length to the physical width.

How to adapt to different screens

The purpose of adapting to different screens is to make the application experience consistent across all systems. different platforms have different strategies. some platforms are only based on screen resolution. that is, the device is classified by screen resolution. this is also the source of common VGA names:
Different devices are differentiated based on different screen resolutions, such as some common names:

Qvga: 240*320 quarter VGA 1/4 (1/2*1/2 = 1/4)
Hvga: 320*480 half size VGA means 1/2 (1/2*1 = 1/2)
VGA: 480*640 the resolution of computer monitors in ancient times. Others are scaled based on this.
WVGA: 480*800 wide VGA
Svga: 600*800 Super VGA

For more information about resolution, see Wikipedia: graphics display resolution.
Some GUI systems distinguish different resources by resolution.
However, as described above, the resolution cannot represent the degree of clarity on the screen. images of the same resolution or the same length on a high-density screen will look small and become larger on a low-density screen! Because it is measured in pixels. therefore, if the resolution is used as the basis to differentiate resources, you must set resources for all different resolutions and make adaptation optimization. Otherwise, the performance will not be good! Think about the workload!

The unit length of the screen density.

What is the purpose of adapting to different screens? To make

1. Applications can be normally displayed on different platforms, that is, the display can be either too large (low density) or too small (high density)
2. consistent layout. That is to say, the elements must be larger on the large screen (High Resolution) and smaller on the small screen (low resolution ).

As a lazy human, the goal is to adapt to the most screen with the minimum workload. How can this problem be achieved? It would be nice if a measurement unit could change with the screen. In this way, you can specify a length and let the device handle the changing factors on its own.
Therefore, a new length unit dip --- density independent pixels is created, which is an abstract unit length unrelated to density. it is not fixed like pixels or inch, but changes with the density of devices. on a low-density device, the value is small, and on a high-density screen, the value increases. As a result, developers can specify a length to adapt to screens of different density, in order to solve the problem that the low-density screen becomes larger and the high-density screen becomes smaller. for details, for example, if the length of a window is 100 dip and the dip value on a low-density screen is 1 pixel, the length is pixels, dip may change to 1.5
Pixel, and the length becomes 150 pixels. this is achieved, so as to remain unchanged. the specific value of DIP is also provided by the device because the device knows its own density.

Adaptation Policy on Android

On Android, how does one adapt to different sizes (resolutions) and density? It mainly reduces the workload for screen adaptation of different sizes by density classification and resolution.

Generally speaking, the higher the screen resolution, the higher the definition, that is, the higher the density, otherwise it may look unclear. For example, a 4-inch screen only shows 100 pixels, it's just like watching a movie at close distance, or watching a projector, It's very rough and unclear. therefore, Android uses screen density to differentiate devices:

High density: hdpi (high dots per inch)
Moderate density: mdpi (medium dots per inch)
Low Density: ldpi (low dots per inch)

We recommend that you use the density-independent unit dip or DP in the layout as the unit of length or width. In this way, theoretically, developers only need:

1. Prepare image resources for screens of different density
(There is no way for an image. Because the length and width of the image are fixed pixel values, it cannot change with the density and can be forcibly stretched, but the image will be distorted. of course there are also 9 patch images that can solve the problem of random stretching. however, the length and width of a common image are fixed.
2. Use dip as the unit to specify the length or width

You can adapt to all the devices, so that the layout can be better displayed on all the screens.
Of course, the real life is not so perfect, and various devices are very different. however, the overall situation can still be divided into these three categories. After preparing images for these three categories, the others are close to one category, even if they are stretched or distorted, they are not obvious, yes. therefore, for general applications, write a layout file in layout to prepare images drawable-hdpi, drawable-mdpi, and drawable-ldpi for three density types, which is enough to handle 80% of devices.

Res/
Drawable-hdpi/
Ic_launcher.png
Drawable-mdpi/
Ic_launcher.png
Drawable-ldpi/
Ic_launcher.png
Layout/
Main. xml

(This may be a bit outdated, because xdpi is added, and many devices are also xdpi .)
However, it is not enough to classify and process light by density screen. with the increasing number of devices and the increasing size of the screen, the emergence of tablet will lead to the problem that although the screen density of the device is not high, its resolution is very high. for example, the resolution of ipad2 is 1024x768, while that of iPhone 4 is 960x640. However, the density of iPhone 4 is 326ppi, which is much higher than that of ipad2. however, no matter how high the density is, the screen can display a maximum of 1024x768 pixels. A x image can be seen on the iPad, and only half of the images can be seen on the iPhone! This is why when I use an iPad to run an iPhone application, I just simulate the display part in the middle of the screen.
The same is true for Android. in this way, even with the same DPI, if the screen size is very large, the image prepared for it will be stretched or not displayed completely. the UI element will also be stretched for a long time. this is not a good experience. A screen with a large size should display more content, rather than stretching some elements. therefore, if many mobile phone Android applications are not properly adapted, the direct use experience on the tablet will be very poor.
To solve this problem, the device must be differentiated by screen size.
There are four main screen sizes: small, normal, large and xlarge
This is mainly used with screen density. For example, it is applicable to flat images:
Drawable-xlarge-hdpi/ic_launcher.png
The relationship between density, size, and resolution is mentioned here. screen Resolution is the most obvious change with the device. The above two classification methods are only a rough classification of the screen. although there is no direct relationship between screen resolution and density, all devices are basically the same ?) :
Ldpi qvga 240*320 0.8
Mdpi hvga 320*480 1.0
Hdpi WVGA 480*800 1.5
Hdpi qhd 540*960 1.5
Xdpi wxga 720*1280 2
For, how to adapt, and how to provide resources can read the official documentation, which is described in detail. http://developer.android.com/guide/topics/resources/providing-resources.html

FAQs about adaptation to different screens

Although the above method is available, it is not enough in practice. because the ratio of screen size and density is inconsistent. for example, the ratio of width to density of hvga is the same as that of WVGA: 480/320 = 1. 5. therefore, the width is displayed as much as the width. no worries. but the height is different. 800/480> 1.5, what is the cause? After the same thing is scaled 1.5 times, there will be a pretty blank screen for WVGA. or if WVGA is used as the baseline, it will not be displayed if it is placed on hvga. this problem is more obvious in qhd. even WVGA and qhd of the same hdpi may have problems. qhd can display more content than WVGA.

Use dimension resources to solve problems

From the above problem, we can see that density-independent units cannot solve the above problem. of course, you can also choose to make a layout for each resolution, but this will cause a lot of repetitive work, because after all, the layout is the same, resolution and screen density must be considered only for the height or width of an element.
In this case, the height or width can be abstracted into a single resource dimensions to minimize the variation:
For example, the height of a view:

Layout/
Main. xml # Android: layout_height = "@ dimen/view_height"
Values-mdpi
Dimensions. xml item name = "view_height"> 20dip </item>
Values-hdpi
Dimensions. xml 30dip
Values-hdpi-960x540
Dimensions. xml 40dip

Another point is to use relative values as much as possible, such as wrap_content and fill_parent (or match_parent). They are not fixed values but will be calculated during the specific layout.
Finally, share a pitfall. The default values of resources are not always values, drawable, and layout. when you specify a value in values and a value in values-mdpi respectively, other types such as hdpi will use the value in mdpi instead of the value in values.
In addition, you need to pay attention to the size issues when making images.

Because the image size is measured in pixels, and most Android applications are measured in dip or DP, pay attention to the relationship between them at different density. convert the pixel kernel value to an integer after dip conversion. for example, one dip on hvga or mdpi is equal to one pixel. however, one dip on the WVGA or hdpi is 1.5 pixels, so the pixel value of the WVGA image size should be a multiple of 1.5. this makes it easier to use dip to define the width of the image length.

Other useful materials:

1. support different Android device deployments with dimension resources

2. Providing resources

3.
Adapt to specific resolutions