Android. 9.png "Point Nine" image making method

"Point Nine" is a special image form in the application software development of Andriod platform, the file extension is:. 9.png

The smartphone has the function of the automatic horizontal screen, the same interface will change the direction of the sensor in the mobile phone (or tablet), changing the orientation of the display, after the interface changes direction, the interface graphics will be due to the length and width of the changes resulting in stretching, resulting in distorted graphics.

We all know that the Android platform has many different resolutions, and many of the controls ' transduction files are blurred and distorted when zoomed in.

OK, using the dot nine PNG technology under Android, you can stretch the picture horizontally and vertically to achieve a perfect display at multiple resolutions.

"Normal stretch and point nine tensile effect comparison"

In contrast, it is clear that after using point nine, the gradient texture of the image and the fineness of the fillet can still be preserved.

We can also understand why it is called "Point nine PNG", in fact, the equivalent of a PNG image is divided into 9 parts (nine Gongge), respectively, 4 corners, 4 edges, and a middle area, 4 corners are not pulled up, so still can keep the fillet of clear state, and 2 water The horizontal and vertical edges are stretched only horizontally and vertically, so there is no case where the edges will be stretched, only the area specified by the black line will be extruded in the middle. The result is that the picture doesn't get distorted

Two. " Point Nine "method of making

Method 1: Use the "draw9patch" tool to draw the following process

1. Installation tools first you need to install Java in the system's default directory for your computer. Do not install Java classmate can search in Baidu: jdk-6u20-windows-i586, installation package size of about 80M. Then, using the Andriod simulator-android-sdk-windows, open the "Draw9patch.bat" file in the Sdk/tools directory, and the loading window appears:

2. Import and edit

Drag a PNG picture into the window

For example, automatically enter the editing interface. The content and function notes for each area are described in the figure.

The view on the right side of the preview finds that the edge of the picture is in normal stretch state.

Now we click the left button on the edge of the picture to draw a black line, that is, the part that the picture needs to be stretched. For example, 4 black lines are commented.

If the error is a multi-painted part, you can press and hold the SHIFT key while clicking the left mouse button to erase.

See, three kinds of tensile results have been perfectly displayed, we have achieved the desired tensile effect, assuming this is a display text form, then the text display area, the program will also be controlled in the black line corresponding range.

These images, including the opposite sex (irregular graphics), can also be used to achieve a natural stretch of the transverse portrait through point nine PNG.

"Draw9patch.bat Other function description"

②show Lock: Show non-painted areas

②show Patches: Preview the extensible Gongge in this plot area (pink stands for an extensible area)

③show patches: Highlighted area in the Preview view (purple area)

④show Bad patches: Adds a red border for four weeks in the Gongge area, which may produce artificial traces when the image is extended. If you eliminate all bad Gongge, the visual consistency of the extended view will be maintained.

3. Save and Export

Click on the upper left File-save, save the file, automatically generate a suffix named "*.9.png" format of the picture, the picture up and down each of the increase of 1px black line.

Method 2: Direct use of the PS and other planar tools to draw, the flowchart is as follows

As the flowchart shows, relative to Method 1, it takes only 2 steps to get a. 9.png picture, the steps are:

1. Determine the canvas size of the image directly after the cut.

2. Manually increase the upper and lower sides by 1px

3. Using the Pencil tool, draw the stretch area manually and the color value must be black (#000000).

4. Save for Web format, select png-24, and manually change the suffix name to. 9.png

However, the disadvantage of this method is that it is not possible to preview, judge and test the accuracy of the stretch area.

Use this method to note the following 2 points:

1. The hand-drawn black line stretching zone must be #000000, transparency 100%, and the image can not appear on the four edges translucent pixels;

2. Your. 9.png must be painted with a black line in the stretched area;

Otherwise, the picture will not compile via Android, causing the program to error. Also, there are classmates puzzled after extracting the apk file,. 9.png the black line in the picture is gone?

That's because the Andriod program will automatically remove the black line from the edge of the *.9.png image when the file is packaged as an apk, so the. 9.png file that you see after extracting the APK is no black line.

Three. Meaning of using "point nine"

About, the test found that the use of ordinary PNG display results in a noticeable discoloration of the horizontal lines. The. 9.png image is significantly better than normal PNG.

After using the. 9.png format, the cross-grain problem has been largely resolved. Because for. 9.png pictures, the Android system program has an algorithm for its optimization.

Due to the large gap in quality of the Android phone screen. Many screens do not support more than 16-bit color display.

Therefore, after rendering the result of lost color, it caused the horizontal lines display.

Comparing with a variety of Android phones, it is found that the more the screen the more obvious the cross-grain of the phone.

With the use of *.9.png image technology, only a set of interface transduction to adapt to different resolutions, and significantly reduce the size of the installation package. And the program does not need to be specifically processed to achieve its stretching, but also reduce the amount of code and development effort.

I believe that each of the Android platform of the work, there will be different skills and experience, very welcome to the comments you can leave their personal experiences and experience. Mutual communication will make our working mode more flexible, more efficient, but also to bring you more quality mobile applications:)

Android. 9.png "Point Nine" image making method