Draw9patch Detailed-Reprint

 Draw9patch Detailed

To find out more about this address, please click here:

Http://user.qzone.qq.com/469241633/infocenter#!app=2&via=QZ. hashrefresh&pos=1341830433

Draw9patch.bat This tool is in tools in the Android SDK directory, first look at the interface after running it:

First, the name of the introduction

Why is it called 9patch? The Chinese meaning of patch is "piece, block" meaning, it is 9 or 9 in Chinese. So imagine that this picture will be divided into 9 pieces, as shown in the film

Second, open source image

If you want to make a 9patch picture, you have to have a picture source, that is, to create a 9patch image of the source image, with the source image, how to use it to open the image for editing it? There are three ways to open:

1. Click "File", "Open 9-patch ..." in the menu bar.

2, the keyboard shortcut key "Ctrl+o" to open

3. Select the source picture file you want to open and drag it into the Draw9patch workspace

Third, the production of 9Patch

After loading the picture, we will see the image of the next to the left and right of a pixel, these small places is to let us work in the place, now to introduce the top and bottom around the four pixels of what is represented:

Above a pixel, here I can use the mouse to click, after clicking, you will see a small black dot,:

This does not seem intuitive or difficult to introduce, first put the following toolbar show patches selected, if shown:

And then the picture in the middle workspace becomes:

In this case, the purple area in the middle is the area of the black dots we painted above, and if we hold SHIFT and then left click on the black dots, we can see that the black dots can be wiped out, and the purple areas of the pair will turn green. What does this purple area stand for? This purple area represents the area being stretched, that is, when we set the image to the background of other components, if the component is larger, the area of the image will be drawn repeatedly, while the rest will be the same, and the result will be displayed on the right side of the workspace, as shown in:

Here only the upper side, the black dot on the upper side, indicates that the horizontal stretch of the part, if not drawn to the left, then the vertical stretch of the area by default for the purple area of the vertical all are stretched.

The left side and the upper side of the meaning of the same, but is to represent the drawing of the vertical area, here is not repeated introduction:

The effect here is that when the background gets bigger, only the middle purple part is stretched.

What's the use of this area on the right and the lower side?

The right and bottom draw are similar to the drawing process on the top and left, but the meaning is not the same, the right side represents the area of the portrait display, and if you do not draw it represents all of the vertical content, when you draw to the right, check Show content in the toolbar below:

Looking at the effect on the right side of the work area, you can see the blue area, which is where the content is displayed:

The same pixel on the lower side also represents the area where the content is displayed, but the difference is the area in which the content is displayed horizontally. For example: This image is 30px wide, we put the following line of the horizontal 20px to 25px painted black dots, then this picture is set to a component background, The paddingleft of this component will be set to 20dp,paddingright will be set to 5DP, if you set these two values in the layout file, the black dot here will not work, the same row of black dots on the right is the same, Just set the Paddingtop and Paddingbottom, here is not more introduction.

Iv. Advanced Application

1, Show bad patches, this is a tool above a button,:

What's the use of this button? When we have finished drawing the top and left side, we can click this button to see if the result of the drawing conforms to the recommended requirements, as shown in the 3 blocks of which the selected block does not meet the requirements:

Here it is based on what to judge the results of this drawing does not meet the requirements? Why do you think these three pieces do not meet the requirements? It is the same as the color of each pixel in the left-hand side of the black dot, for example, the two-pixel color in the middle of the horizontal is slightly different:

This should be carefully read to distinguish, the following part of the color to be deep, the result is that when the background becomes larger when there are two colors to be repeated drawing, the system does not know exactly how to draw these two colors of a little more, so this tool is recommended to stretch the area can only choose a color, such as, then click Show Bad patches has no effect:

2, the lower right corner of the coordinate display

If the results are more demanding, this will work, as shown in:

This is where the current mouse is located in the picture. If there is anything, ask the top and bottom or left and right to the same length or width of the same, so you have to calculate, in the drawing is to see the number shown in this area, to see whether the start and end of the position is calculated from the figure.

Draw9patch Detailed-Reprint