In the design process of Android, in order to adapt to different mobile phone resolutions, most of the pictures need to be stretched or compressed, so there is a picture format ".9.png" that can be arbitrarily resized. This kind of picture is a special picture format used for Android development. Its advantage is that it can set which areas can be stretched and which areas cannot be stretched in a picture in a simple way, and can display The location of the content area is clearly marked.
This article combines some specific examples to see the specific usage of .9.png.
First look at the difference between ordinary .png resources and .9.png resources:
I won't introduce more common png resources. It can be clearly seen that there are some black lines on the periphery of .9.png. What are these lines used for? Let's take a look at the enlarged image:
After zooming in, it can be clearly seen that there are black line segments of one pixel on the top, bottom, left, and right, and the serial numbers are marked here. Simply put, numbers 1 and 2 identify areas that can be stretched, and numbers 3 and 4 identify content areas. When the actual width and height of the button are set, the horizontal area will stretch the pixels of the 1 area, and the vertical area will stretch the pixels of the 2 area. As shown below:
The meaning of stretch should be relatively easy to understand, but what is the point of labeling the content area? Let's look at the picture below:
This program sets the text to be vertically centered and horizontally left-aligned. Alignment is fine, but for graphics with large rounded corners and some irregular borders, the wrong labeling can make the typography look messy. So we need to fix the line position and length of the content area. The horizontal content area is shortened to within the rounded corners, and the vertical content area is controlled within the height of the input box, so that the text can be displayed normally.
There is also a special case here, that is, the resource itself is .9.png, but you want this .9.png not to be stretched during the modification process (it may be encountered in the case of skins), then how? What to do? Just place the stretched area on the transparent pixels, so that when you stretch, the pixels of the transparent parts will be stretched, but the image itself will not be stretched. As shown below: You can see that the black dots in the stretch area can be discontinuous.
After talking about the usage of .9.png for a long time, how to output .9.png? There are many ways to output .9.png, such as using the tool draw9patch.bat, or simpler, using photoshop to output directly. The output method is to output ordinary png resources first, then expand the size of the canvas, leave a pixel on the top, bottom, left, and right, and then use a one-pixel pencil tool (select pure black for the color), just draw points on the top, bottom, left, and right. When saving Note that the suffix is changed to .9.png.
There are two points to pay special attention to:
1. The outermost circle of pixels must be either pure black or transparent, and no semi-transparent pixels, such as 99% black or 1% projection 2. The suffix name of the file must be
.9.png, not .png or .9.png.png. Such a name will cause compilation failure.
Reprinted from: http://isux.tencent.com/android-ui-9-png.html