Android. 9.png images using process and principles

1. The folder where the image resources are placed in Android

Android generally has drawable-ldpi, drawable-mdpi, drawable-hdpi, drawable-xhdpi, drawable-xxhdpi and other folders to place the picture resources, The respective pixel densities for these folders are:

Folder	The corresponding pixel density
drawable-ldpi	120dpi
drawable-mdpi	160dpi
drawable-hdpi	240dpi
drawable-xhdpi	320dpi

Figure-1

In addition, you can create a default drawable folder, which corresponds to a pixel density of 160dpi.

2. The order of looking up picture resources in Android view when setting background picture

Android view in the SetBackground load picture, usually first go to the device corresponding pixel density folder to find the corresponding image, if not found will be next to the pixel density of the folder to find, and then looked up, If the image is not found in the highest pixel density folder, it will be found in a folder with a lower pixel density. This is a lookup process for loading the corresponding picture.

For example, a device with a pixel density of 240dpi, the application has drawable, drawable-ldpi, DRAWABLE-MDP, drawable-hdpi, drawable-xhdpi, drawable-xxhdpi six folders, When you set a background picture in a view, the order in which you look for the picture is drawable-hdpi ===== > drawable-xhdpi ====> drawable-xxhdpi ====> drawable-mdpi = = > drawable ====> drawable-ldpi.

This sequence can be verified by a small demo, which is the rule for Android to find the resources of the picture, not in a few words can be explained.

3, set the view background picture process

SOURCE Tracking:

View view = new view (this);

View.setbackgroundresource (R.drawable.about_logo);

Use here is to set a view of the background image, the source of the Setbackgroundresource method is:

Figure-2

This method inside the 14,179th line of code, the Red Line callout part, is through the resources object according to the picture resource Resid to obtain the picture corresponding Drawable object, getdrawable method source code below:< yo? " http://www.2cto.com/kf/ware/vc/"target=" _blank "class=" Keylink ">vcd4kpha+pgltzybzcmm9" http://www.2cto.com/ Uploadfile/collfiles/20140316/2014031609521611.jpg "alt=" \ ">

Figure-3

This method returns a Drawable object through the Loaddrawable method, and the Loaddrawable method passes in a Typedvalue object, and the Typedvalue object is obtained by means of the GetValue method, Here you can see the information about which corresponding resource images are stored in the Typedvalue object by code.

Figure-4

Through the demo code, debug the code, found that according to the picture resources Resid obtained typevalued objects stored in the information mainly density=240 and string= "res/drawable-hdpi/ About-logo.png ", density is the pixel density corresponding to the drawable-hdpi folder where the image resource is found, and string is the path to the picture resource.

In fact, the Loaddrawable method is to obtain the corresponding Drawable object according to the path of the image resource. Now that I put the picture in the Drawable-hdpi folder, will the typevalued value be the same if I move the picture to the drawable-mdpi folder? Through the test, the following results are found:

Figure-5

The Typedvalue information obtained by FIG. 4 and Figure 5 shows that the corresponding variable values are not the same, at this time the density=160, string= "Res/drawable-mdpi/about-logo.png", Density is the pixel density of drawable-mdpi, then the same picture is placed in a different resource folder, get the same Drawable object, by proving that they are not the same.

About_logo.png The original image size is 138*64 pixels and runs on the same 480*800 pixel 240dpi emulator, the Drawable object information is as follows:

The picture is placed under the drawable-mdpi folder:

Figure-6

The picture is placed under the drawable-hdpi folder:

Figure-7

The following data is derived from the code test:

folder for picture placement	corresponding pixel density	Device pixel density	The resulting picture corresponds to the bitmap of the width of the high value
drawable-mdpi	160dpi	240dpi	207*96
drawable-hdpi	240dpi	240dpi	138*64

As a result, the same image placed under different folders, the size of the image bitmap in the same pixel density is different, as in the table above, the picture under drawable-mdpi is actually scaled.

The picture width of the program = actual picture width * Device pixel density/image resource folder pixel density

Picture height of the program = actual image Height * device pixel density/image resource folder pixel density

It can be seen that if a picture is placed in a low-density folder and is displayed on a high-pixel-density device, it will be zoomed in and then displayed, resulting in a blurry display on a high-pixel-density device.

Note: Image bitmap Amplification process can be found in the source code in the Bitmapfactory.decodestream method. For details, please check the tracking source yourself.

4. How to use 9 images

The process of point 9 is the same as the normal PNG image above, will be based on the placement of the resource folder and the pixel density of the screen to scale first, when the display point 9 is then a local stretch, so if the rounded point 9 picture is placed in the low pixel density resource folder, when using high pixel density device display, The image is zoomed in to a local stretch, which causes the picture's rounded corners and edges to be stretched during magnification, blurring the display.

Solution:

1, try to place the point 9 picture in the high pixel density resource folder, so that even if the image is displayed on low pixel density phone, the picture will be zoomed out and then the local stretch, but when running the app on a low pixel density phone, all the places that use Point 9 pictures will scale the image once and affect the performance;

2, for different pixel density mobile phone multi-set point 9 pictures.

Add: Point 9 How does a local stretch render to the screen after zooming?

Source tracking, in the view draw method according to the Drawable object to draw the picture as the background to the specified area, point 9 The actual drawing process in the Ninepatch draw method, the canvas object is called by the local method Nativedraw the picture is drawn. As to how to draw the local source of the Jni method is temporarily invisible.

Figure-8

Android. 9.png images using process and principles