Android design in the. 9.png

In the Android design process, in order to adapt to different phone resolutions, most of the images need to be stretched or compressed, so there is an arbitrary size of the image format ". 9.png". This image is a special image format for Android development, which has the advantage of having a simple way to stretch the areas of a picture, which areas cannot be stretched, and where the area of the display can be clearly marked. This article combines some specific examples to see the specific use of the. 9.png.

First, look at the common. PNG resources and. 9.png Resource differences:

Ordinary PNG resources are not much introduced, you can see clearly. There are some black lines on the periphery of the 9.png, so what are these lines for? Let's look at the big picture:

After magnification can be more obvious to see the upper and lower left and right there is a pixel of the black line, where the number is marked separately. In simple terms, the sequence numbers 1 and 2 identify the areas that can be stretched, and the sequence numbers 3 and 4 identify the content area. When the button is set to the actual width and height of the application, the transverse stretches the pixels of the 1 area, and the pixels in the 2 area are stretched vertically. Such as:

The meaning of stretching should be relatively easy to understand, but what is the meaning of the labeling of the content area? Let's see:

Here the program set the text vertically centered, horizontal left alignment. There is no problem with alignment, but for a graphic with a large corner and some irregular borders, the wrong way of labeling makes the layout look confusing. So we need to fix the segment position and length of the content area.

The horizontal content area is shortened to the rounded corner, and the vertical content area is within the height of the input box, so the text can be displayed normally.

Here is a special case, which is itself a. 9.png resource, but in the process of modification you want this. 9.png can not be stretched (may be encountered in the case of skin), how to do? As long as the points in the stretched area are visible in the transparent pixels, the pixels in the transparent part are stretched so that they do not stretch the image itself. Such as:

You can see that the black dots in the stretched area can be discontinuous.

Said for a long while. 9.png usage, that. How does 9.png output? There are many ways to output. 9.png, for example, with the Draw9patch.bat tool, or simply, use Photoshop to output directly. Output is the first output of the normal PNG resources, and then expand the canvas size, left and right each of a pixel, and then a pixel of the pencil tool (color selection of pure black), the next left and right to draw points on it, save the time note the suffix modified 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, a little bit of translucent pixels can not have, such as 99% of Black or 1% of the projection can not have;
2. The suffix name of the file must be. 9.png and cannot be. png or. 9.png.png, which can cause compilation to fail.

Android design in the. 9.png