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 lap of pixels must be either pure black, or transparent, a little bit of translucent pixels can not have, for example, 99% of the black or 1% projection can not have;
2. The suffix name of the file must be. 9.png, cannot be. png or. 9.png.png, and such a naming will cause compilation to fail.

Androidui design. 9.png production and go black line

1. Open Draw9patch.bat My path is D:\adt-bundle-windows-x86_64\sdk\tools, find your SDK directory tools inside the Draw9patch.bat

2. Open the picture you want to process, I send it by my own image as an example

3. Description black line usage, left-click Paint, right-click Cancel selection

Top: Stretches only the black line downward so that the font is not stretched

Left: In portrait orientation, only the area that contains the black line to the right is stretched

Bottom: Displays the area of the black line upward to ensure that the font is displayed

Right: Shows the area to the left of the black line

Areas without black lines indicate that they do not change when stretched, because fillet pictures are sometimes used

4. Go to the black line
Download Tool xultimate-d9pc-x86

To remove the black line of the picture into the example1\res\drawable-hdpi directory, and then click Xultimate-d9pc.exe, Run, wait a two seconds, tick a sound, and handle it well. 9 pics in Done\example1\res \drawable-hdpi directory, the picture can be copied out of the use of

Contrast effect

. 9.png

in Android design