Use .9.png technology under androidplatform

Is a special image format in the application software development of the andriod platform. The file extension is .9.png.
The smart phone has the automatic horizontal screen function. The same interface will change the display direction with the parameter of the direction sensor in the mobile phone (or tablet). After the interface changes the direction, the image on the interface is stretched due to the variation of the length and width, resulting in distortion and deformation of the image.
We all know that the Android platform has a variety of different resolutions. After the cut image files of many controls are enlarged and stretched, the corners are blurred and distorted.
OK. Using the PNG technology on the Android platform, you can stretch the image horizontally and vertically at the same time to achieve a perfect Display Effect in multiple resolutions.

[Comparison of ordinary stretch and dot-nine stretch effects]

Obviously, after, the gradient texture of the image and the fineness of the rounded corner can still be preserved.
We can also understand why it is called "PNG". In fact, it is equivalent to dividing a PNG image into nine parts (nine cells) with four corners and four sides, and in an intermediate area, the four corners are not raised, so they can still keep the rounded corners in a clear state, while the two sides are horizontally and vertically stretched, respectively, therefore, the side will not be grayed out, and only the area specified by the black line is stretched in the middle. The result is that the image is not displayed.
Ii. How to create "Point 9"
Method 1: Use the draw9patch tool to draw the image. The procedure is as follows:

1. Install the tool
First, you need to install Java on your computer in the default directory of the system. Students without installing Java can search on Google: jdk-6u20-windows-i586

Address: http://www.filecrop.com/jdk-6u20-windows-i586.html

Or:

Then, use the andriod Simulator-Android-SDK-windows to open the "draw9patch. Bat" file under the SDK/tools directory. The loading window is displayed:

2. Import and edit
Drag a PNG Image to this window.
For example, the editing page is automatically displayed. The figure shows the content and function comments of each region.

Preview the view on the right and find that the image edge is in normal stretch state.
Click the left button on the image edge to draw a black line, that is, the part of the image to be stretched. For example, four black lines are commented.

If you fail to draw multiple parts, you can press the Shift key and click the left mouse button to erase them ).
As you can see, the three stretching results have been perfectly displayed, and we have achieved the desired stretching effect. Suppose this is a form with displayed text, then the text display area, the program will also control the corresponding range of the black line.

The following images, including non-regular images, can be scaled horizontally and vertically by clicking "9. PNG.

[Other draw9patch. Bat functions]
② Show lock: display areas that cannot be painted
② Show patches: preview the extended cells in this drawing area (pink represents an extended area) yixieshi
③ Show patches: highlighted area (purple area) in the preview View)
④ Show bad patches: adds a red border around the gongge area, which may produce manual traces when the image is extended. If you eliminate all bad cells, the visual consistency of the extended view will be maintained.
3. Save and Output
Click file-save on the top left to save the file. An image with the suffix "* .9.png" is automatically generated. A black line of 1px is added to the upper and lower sides of the image.

 

References:

About "Point 9"