Android design:. 9.png Picture Making method

In the Android design process, in order to adapt to different mobile phone resolution, most of the pictures need to stretch or compress, so that there can be arbitrarily resized a picture format ". 9.png".

The picture is a special image format for Android development, and the advantage of this is that you can use a simple way to stretch which areas in a picture, which areas cannot be stretched, and to mark the location of the displayed content area clearly.

This article combines some concrete examples to see the specific usage of the 9.png.

First look at the common. png resource differs from. 9.png Resources:

Common PNG resources are not introduced, you can obviously see. 9.png has some black lines on the outside, what are these lines used for? Let's look at the larger image:

Magnified can be more obvious to see the top and bottom of a pixel, respectively, the black line segment, here are labeled serial number. In simple terms, ordinal 1 and 2 identify areas that can be stretched, and ordinal 3 and 4 identify the content area. When the actual width and height of the button are applied, the pixels in the 1 area are stretched horizontally, and the pixels in the 2 area are stretched vertically. The following figure:

The meaning of stretching should be easier to understand, but what is the meaning of content area annotations? Let's look at the picture below:

Here the text of the program is centered vertically, and the horizontal left alignment. Alignment is fine, but for a graphic that has a large rounded angle and some irregular borders, the wrong notation makes typography look messy. So we need to fix the segment position and length of the content area.

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

There is also a special situation, which is itself a 9.png resource, but in the process of modification you want this one. 9.png can not be stretched (in the case of doing skin may encounter), then how to do? As long as the point of the stretch area is visible in the transparent pixel, this stretch will stretch the transparent part of the pixel, without stretching the image itself. The following figure:

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

For half a day. 9.png usage, that. 9.png how to output it? There are a number of ways to output 9.png, such as using the Draw9patch.bat tool, or simply, using Photoshop for direct output. Output is the way to output the ordinary PNG resources, and then enlarge the canvas size, the top and bottom of each empty out a pixel, and then use a pixel pencil tool (color selection of pure black), up and down the left and right to draw points can be, save the time to change the suffix to. 9.png.

There are two points that need special attention:

1. The outermost circle of pixels must be either pure black, or transparent, a little translucent pixel can not have, for example, 99% of Black or 1% of the projection can not have;
2. The suffix name of the file must be. 9.png, cannot be. png, or. 9.png.png, such naming will cause the compilation to fail.

Original link: http://isux.tencent.com/android-ui-9-png.html