About the multi-resolution adaptation of the Android boot screen

This article is not about the form to guide the screen, how to define the information, there are some considerations of the introduction.

This article describes how the guide screen can be better suited to a variety of resolutions, understand that this will help to better define the guide screen, and maintain good communication with designers and engineers.

As a product person, it is necessary to extend the knowledge to different directions, which can make communication smoother.

There may be some mistakes in this knowledge, and you can update your knowledge system whenever you find a problem.

The form of the guiding picture mentioned in this article

Like the following figure, a boot screen is a screen, drag left and right to toggle

Figure 1: Youdao Cloud notes Android 1.2.0 boot screen

Figure 2: Youdao Cloud notes Android 2.0.0 boot screen

Second, the realization of one of the ways: background with the picture zoom

What you need to know is that the same DPI device also has a different resolution, such as hdpi the most common is 480x800 and 480x854 resolution, there are other, such as 480x640, 600x1024 ...

Therefore, there are problems in trying to do a resolution of different DPI.

I'm going to try to illustrate a picture with a graph, if I don't do the display style for different machines and different resolutions:

In the case of Galaxy Nexus, the screen resolution is 720x1280, the status bar is 50px, and the virtual keyboard bar below is 96px, so the actual middle picture size is 720x1134

2.1 Display styles at different resolutions

Let's simulate the display style of this 720x1134 's boot graph on the 720x1280 resolution device as follows:

Figure a:720x1134 The display style of the 720x1280 device for the boot chart

When we are in a 480x800 resolution of the device display, the picture will be reduced to 480px width display, at this time the height of the corresponding will be reduced to 756px display, assuming that the status bar standard height of 38px, will be free 16px space. If we set the background color to red, the status shown is as follows:

Figure b:720x1134 The display style of the 480x800 device for the boot chart

Similarly, when we are in a 320x480 resolution of the device display, assuming that the status bar standard height of 25px, such as scaling, the picture will be reduced to 455px (480-25) height display, at this time the width of the corresponding will be reduced to 289px display, will be free 31px space. If we set the background color to red, the status shown is as follows:

Figure c:720x1134 The display style of the 320x480 device for the boot chart

No more examples are going on.

2.2 Fitting Scheme

From the above example, the big picture automatically scaling, the biggest problem is up and down, or left and right will leave some unfilled position.

So, in the case where the edges are solid, we just have to fill the background with the same color value as the edge color.

Moreover, we only need to prepare a larger set of resolutions, which can better guarantee the effect on different resolution devices.

2.3 Defects

The following figure shows the effect on the 240x320 ldpi device, and if you look closely, you can see that there are some inconsistencies between the vertical color of the left and right sides and the color of the middle part.

The reason is uncertain and there is no clear conclusion, and speculation may be related to the Android image reduction mechanism.

3.4 Example

(1) Youdao Cloud notes Android 2.0.0 guide picture cut Map

(2) Adaptation in Android 2.0.0

√ The surrounding guarantee of the picture is a solid color, so as to effectively carry out different resolution of the fit.

√ Specifies the 720x1280 machine for standard reference equipment, cut out the part of the virtual keyboard and status bar

√ Set the background color of the boot interface to the color consistent with the edge color

Third, the realization way of two: 9-patch

3.1 Fitting Scheme

Premise:

√ To ensure the scaling effect of four edges, the edge needs to be set to a solid color.

√ To ensure the scaling effect, using xhdpi picture material to do 9-patch original picture

Fitting:

√ in draw 9-patch, set the top of the picture to the left and right one pixel for the stretch area, set the picture on the right side of the top and the bottom of a pixel for the stretch area.

Results:

√ Similar to the implementation of an image example, only the red part of the adaptation, will be set in the stretch area and automatically use the Set stretch area to fill, so as to achieve the matching effect

3.2 Defects

It is now found that when the picture is large, the image scaling of the 9-patch will cause problems and not scale as expected.

3.3 Example

Youdao Cloud Notes Android 1.2.0 's Guide screen is implemented in 9-patch way, see figure 1

Four, the realization way of three: transparent guide map

4.1 Fitting Scheme

√ Provides a background transparent guide map

√ Provides a background color value

√ Fill the background color and place the background transparent guide map

4.2 Defects

PNG's graph will be larger than JPG's

V. Summary

Mode three is the current tendency to adopt the way, this article if there is further practical information, and then to be supplemented.

In the above description and understanding, there may be errors and problems, if any, please point out. Finish

Article Source: penddy.com