[For Beginners] usage of the Android image Repair Tool Draw9patch (with the ubuntu quick screenshot method), draw9patchubuntu

[For Beginners] usage of the Android image Repair Tool Draw9patch (with ubuntu shortcut), draw9patchubuntu

Article if there is value, welcome to reprint, reprint please write the source http://www.cnblogs.com/rossoneri/p/4024090.html

When the objective is to be set, the material diagram is subject to a certain question. Later, I will give a lecture on the usage of the image format .9.png and draw 9-patch under android, which is clear and useful, so I should record it.

I will not talk about the introduction of 9-patch, a lot of online. The following describes the role of the android project based on my experience.

First, let's look at the project resource list:

All right, this folder contains my project resources.

No, the image here has a regular pattern: All images suffixed with .9.png are black, and .png images are normal.

Open it in the image browser and check again:

This is a normal image (enlarged a lot)

This is a 9.png image.

The 9.png image contains black lines.

Why? I didn't understand it before. I still use it anyway ~

But when I was doing something today, I set the previous resource map used by the background in the new button. Then the font in the button is not completely displayed, and I was surprised, I want to know how this figure is going.

Well, the problematic graph will not be cut. Of course this is not the point.

The draw 9-patch tool is not described. Open it directly. The path is in the tools Folder under androidSDK.

My path is/home/rosoneri/documentation/Android/android-sdk-linux/tools (under ubuntu)

After you use terminal to open the file, add the executable permission chmod + x.

Then you can open it directly.

After opening, you can see the program:

Then we drag a 9.png image into it, and it becomes like this:

Well, we can see clearly that there are four black lines around it, and each pixel is displayed in one pixel. The left side of the image is the current image, and the right side is according to the current settings: vertical stretch, horizontal stretch, vertical stretch. If show content is selected, there is a square inside the right side:

This square indicates the display range of text in the image. For example, if the image is used on the button, the text set on the button will be filled in this square. If the square is too small, text cannot be completely displayed. This is what I encountered.

Well, the focus is on what the four black lines on the left are.

It's too late to go to bed first ~

 

Oh, let's talk about ubuntu. First, you can press the PrtSc key directly. Of course, this captures the entire screen.

Another method is ctrl + shift + PrtSc. This is free, but you only need to paste the screenshot in the image editor.

I recommend shift + PrtSc, free. After the screenshot is finished, the SAVE dialog box is displayed, which is very convenient (ubuntu14.04)

 

 

Continue with the four lines

Let's talk about the lines 5 and 6.

We can see that the image is divided into nine parts, and the four parts of orange, 1, 2, and 3, 4 are four corners, which are fixed and unchanged. That is to say, whether the control or the figure is vertical or horizontal or vertical, the four corners after the stretch will always be the same as the four corners currently seen. So what is he stretching? Is the green area in the figure.

First look at the black line 5, 5 is located at the top of the image, there is a green area with the same width at the bottom of it, this area is used for horizontal stretching, each time there is horizontal stretching, is to change this region. Note that the width of the black line is not used to determine the width of the stretched area, but to adjust the width of the sides. Why? Because the area in the middle is originally used for stretching, what is the purpose of distinguishing the width? So how to change the black line length? Click the left mouse button on the top of the page to show it. Right-click the button to erase it. Of course, when you draw a line, pay attention to several pixel points before painting, to ensure the symmetry between the left and right.

The same applies to black line 6.

Let's look at the last two lines. 2.

These two lines are the display area of the content on the control. 1 controls the height and 2 controls the width. However, this figure will be stretched, so we still need to understand it like this. 1 is to control the distance between the content display area and the top and bottom, and 2 is to think about it.

The problem I encountered was that the control height was relatively low, and the content was relatively large from the top and bottom margins, resulting in incomplete content display.

By the way, I mentioned a show content button, which is actually an area that can be displayed after the image is stretched.

Now that you know this, you can draw your own images to meet your needs. It's just that simple.