How to Use .9.png images in Android

1. folder for storing image resources in Android

In Android, drawable-ldpi, drawable-mdpi, drawable-hdpi, drawable-xhdpi, drawable-xxhdpi, and other folders place image resources. The pixel density of these folders is:

Folder	Corresponding pixel density
Drawable-ldpi	120 dpi
Drawable-mdpi	160 dpi
Drawable-hdpi	240 dpi
Drawable-xhdpi	320 dpi

Figure-1

In addition, you can create a default drawable folder. The default pixel density is 160 dpi.

2. Search for image resources in the view setting sequence of the background image in Android

In Android, when a view loads an image in setBackground, it usually finds the corresponding image in the pixel density folder of the device, if it is not found, it will go to the folder with a high pixel density next to it, and then look up, if the image is not found in the folder with the highest pixel density, it will be found in the folder with lower pixel density. This is a process of loading the corresponding image.

For example, if the pixel density of a device is 240 dpi, the application contains six folders: drawable, drawable-ldpi, drawable-mdp, drawable-hdpi, drawable-xhdpi, and drawable-xxhdpi, when a view sets a background image, the order of image search is drawable-hdpi ====> drawable-xhdpi ==> drawable-xxhdpi ==> drawable-mdpi ==> drawable = ==> drawable-ldpi.

This sequence can be verified by a small demo. It is the rule for android to search for image resources, not illustrated in a few words.

3. Set the view background image

Source code tracking:

View view = new View (this );

View. setBackgroundResource (R. drawable. about_logo );

Here is a background image for setting a view. The source code of the setBackgroundResource method is:

Figure 2

In this method, there are 14,179th lines of code and the red line annotation. The Resources object is used to obtain the drawable object corresponding to the Image Based on the image resource resid. the source code of the getDrawable method is as follows: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + pgltzybzcm9 "http://www.2cto.com/uploadfile/Collfiles/20140316/2014031609521611.jpg" alt = "\">

Figure-3

In this method, a Drawable object is returned through the loadDrawable method. A TypedValue object is input in the loadDrawable method, and the TypedValue object is obtained through the getValue method, you can use the code to check the information of the corresponding resource images stored in the TypedValue object.

Figure 4

Debug the code in the demo code and find that, the stored information in the TypeValued object obtained based on the image resource resid mainly includes density = 240 and string = "res/drawable-hdpi/about-logo.png ", density refers to the pixel density corresponding to the drawable-hdpi folder where the image resource is located. string is the path of the image resource.

In fact, the loadDrawable method obtains the corresponding Drawable object based on the path of the image resource. In this case, I place the image in the drawable-hdpi folder. Will the TypeValued value be the same if I move the image to the drawable-mdpi folder? Through the test, the following results are found:

Figure 5

According to the typedValue information obtained from figure-4 and figure-5, the corresponding variable values are different, density = 160, string = "res/drawable-mdpi/about-logo.png", density is the pixel density corresponding to drawable-mdpi, then the same picture is placed in different resource folders, are the obtained Drawable objects the same? It is proved that they are different.

The original image size of about_logo.png is 138*64 pixels and runs on the same 480*800 pixel DPI simulator. The Drawable object information obtained is as follows:

The image is placed in the drawable-mdpi Folder:

Figure 6

The image is placed in the drawable-hdpi Folder:

Figure-7

The following data is obtained through code testing:

Folder for storing images	Corresponding pixel density	Device pixel density	The Bitmap value corresponding to the obtained Image
Drawable-mdpi	160 dpi	240 dpi	207*96
Drawable-hdpi	240 dpi	240 dpi	138*64

It can be seen that the Bitmap size of the images placed in different folders is different under the same pixel density. In the preceding table, the image in drawable-mdpi is actually scaled.

The image width obtained by the program = actual image width * Device pixel density/pixel density corresponding to the image resource folder

The Image Height obtained by the program = the actual image height * Device pixel density/pixel density corresponding to the image resource folder

It can be seen that if an image is placed in a low-density folder and displayed on a high-pixel device, the image is first zoomed in and then displayed, this will result in blurred display on high-pixel devices.

Note: The Bitmap amplification process can be found in the source code. The source code is in the BitmapFactory. decodeStream method. For more information, see the tracking source code.

4. How to use images

The processing process of the Figure 9 is the same as that of the normal png image above. It scales according to the placed resource folder and the pixel density of the screen, when the image is displayed, the image will be stretched. Therefore, if you place the image with rounded corners in the low pixel density resource folder, when you use a high pixel density device to display the image, the image is first zoomed in for partial stretching, which will cause the rounded corners and edges of the image to be stretched and blurred during the enlargement.

Solution:

1. Try to place the image in the high-pixel resource folder, so that the image will be scaled down and then partially stretched even when it is displayed on a low-pixel mobile phone, however, when an app is running on a low-pixel cell phone, the image is calculated and scaled once for all the places where the image is used, which affects the performance;

2. for mobile phones with different pixel density, do multiple set points and click 9 images.

Note: After, how do I perform partial stretch rendering on the screen?

Source code tracking: in the View draw method, the image is drawn to the specified area based on the Drawable object as the background. The actual Drawing Process of the Figure 9 is in the draw method of NinePatch, the canvas object calls the local method nativeDraw to draw the image. The source code of the JNI method is temporarily unavailable for how to draw a local image.

Figure-8