Android Ninepatch picture making

Ninepatch pictures with *.9.png end, and ordinary pictures of the difference is four weeks more than a border  

As shown, the black line on the left represents the area where the picture is stretched vertically, the black line on the top represents the horizontal stretch area, the black line on the right represents the vertical area where the content is drawn, the black line below represents the horizontal area where the content is drawn, the right and bottom lines are optional, and the left and top lines cannot be omitted.

Use the Ninepatch picture to make a background that stretches (shrinks) the background as the content stretches (shrinks). So how to edit the normal PNG image as Ninepatch picture, Android sdk/tools directory provides editor draw9patch.bat, double-click to open, easy to use, mainly has the following options:

< Span style= "font-size:10px" >         Use the Ninepatch image to make a background that stretches (shrinks) the background as the content stretches (shrinks). Then how to edit the normal PNG image as Ninepatch picture, android  Sdk/tools Directory provides an editor draw9patch.bat, double-click to open, easy to use, mainly has the following options:

• ?  zoom: Used to scale the size of the editing area on the left
• ?  patch scale: Used to zoom the size of the preview area to the right
• ?  show Lock: Displays non-editable regions when the mouse is in the picture area
• ?  show Patches: Displays the area of the picture stretch in the editing area (marked with pink)
• ?  show Content: Displays the contents area of the picture in the preview area (marked with light purple)
• ?  show Bad patches: a red border around the stretched area to display areas that may deform the extruded picture, If the content is completely eliminated, the picture is not deformed after stretching, that is, the image display is good regardless of how it is scaled. (The actual experiment found that the Ninepatch editor is based on the color value of the image to distinguish whether it is bad patch, and as long as the chromatic aberration is not too large, do not consider this setting.) )

Example:

Ninepatch is a useful PNG image format that can be scaled with text size in a specific area. As follows:

As you can see, the middle area of the background image is scaled as the text is resized. The background image is a ninepatch picture. Ninepatch pictures can be made using Android's own Draw9patch tool, which is in the tools directory of the SDK installation path. Execute the tool, and then click "File", "Open 9-path" for the original picture to be used to make the Ninepatch picture. Draw lines above and to the left of the canvas to specify the zoom area,
Tick "show patches" to display the painted area, green
To a fixed size area, the red is the zoom area and the text is placed in red
Regional. When you are finished, click "File". "Save 9-path" saved
Image, the Draw9patch tool automatically adds a *.9.png suffix to the image.
Copy the prepared images into the res/drawable directory of the project and
Write the code. As follows:

2: Use

In traditional UI development, if the size of the background is different, it is generally necessary to make a picture for each size, which is particularly noticeable in the button. Of course, we can also be a small piece of a small piece of horizontal repeating picture, can also be vertical words. There is a special one in Android called Nine Patch picture (end of 9.png) to solve the background size of the sample, only with a background image.

Using your own tools\draw9patch.bat to open a PNG image, we can draw a pixel-wide black line in the outermost space of the PNG image. On the left is the editing area, in the left side of the graph, the height of the left black line determines the vertical pull when the expansion of the area, that is, when the vertical stretching, only this area of the picture will be stretched. Similarly, the length of the black line on the top of the image determines the extended area when horizontally pulled. The right area is pulled up, from the top under vertical stretching, horizontal stretching, and two-direction lifting. This tool provides the WYSIWYG nine patch PNG editing method.

Save the edited PNG as 9.png to the res/drawable directory of the project directory, if you do not have a black line in 9.png, then eclipse will be an error.

The effect diagram is as follows. We can also understand why called nine patch, the equivalent of a PNG image is divided into 9 parts, respectively, 4 corners, 4 edges, and a middle area, 4 corners are not pulled up, so still can keep the state of the fillet, and 2 horizontal and vertical edges are only horizontal and vertical stretching, So there is no case where the edges will be stretched, only in the middle with the area specified by the black line. The result is that the picture doesn't get distorted

Android Ninepatch picture making