Android must know-create NinePatch images,

Android must know-create NinePatch images,

This article provides notes for the free CSDN course NinePatch image production from entry to mastery. It is recommended that new users watch the video first, so that they can easily review the notes, friends with NinePatch basics can directly watch Part 4. -- [Reprinted, please specify the source]

I. Introduction to tools

This is a PNG image. In Android, NinePatch images are usually very small, because when there is more content, the background will be automatically stretched to adapt to the content, and if the image is larger, there will be less content, the image will not automatically become smaller, so the png image used as a NinePatch image is generally relatively small.

Enable the NinePatch image creation tool (Android SDKDirectory/Tools/draw9patch. bat), And open the above image, as shown below:

After opening the image, at location 1, we can see that there is a 1-pixel transparency around the image. This is where we want to make the NinePatch image.
1. Location 1: editing area.
In this area, set the "stretch area" and "content area" of the image ". Note: "stretch area" indicates which area can be stretched. "content area", such as a Button, TextView, And Button contains text, the text is located in the content area. Another example is Linearlayout. The content displayed in the layout is also the content area.
2. Position 2: stretch the preview area.
This is a preview of three situations: vertical stretching, horizontal stretching, and Vertical Horizontal stretching. We can see that "Zoom" is 100%, that is, the size of the editing area of the source image is the size of the source image. Then we can see that when stretching the preview area vertically, the line width of the upper and lower sides is doubled, because the "Pathch scale" is set to 2x, that is, the stretch is twice the original width, after vertical stretching, the height is twice the original height. After horizontal stretching, the width is twice the original width. After both sides are stretched, the width and height are twice the original height. We can see that after horizontal stretching, the width of the left and right sides is twice the width of the original line, the preview image stretched on both sides shows that the line width of the four sides is doubled from the original width.
3. Position 3: adjust the size of the Zoom-editing area. If the editing area is too small, you can adjust it to enlarge the editing area.
4. Position 4: Patch scale-stretch factor. Adjust the stretch factor to conveniently view the effect of different stretch multiples.
5. position 5: Show lock-display the locked area, that is, the area that cannot be edited
6. Position 6: Show patches-Show stretch area
7. Location 7: Show content-display content area
8. Position 8: displays the usage prompt.

Ii. Practical Tools

1. Increase the editing area view as follows:

2. In order to facilitate viewing the tensile effect, the tensile ratio is also increased:

3. the uneditable area is displayed. For example, when you move the mouse over an image, the uneditable area is displayed, that is, the area in the red box. In reality, the outermost red box does not exist, here, a red box is added for viewing. The red box is surrounded by a pixel-sized transparent line. This line is the area to be edited.

4. display the area to be stretched. The following pink area is the area to be stretched, and the rest is not stretched. That is to say, no matter how you stretch, it is changed to a pink area, the shape of other regions does not change:

Note: This is what many people say about the areas that will be stretched. In fact, a more accurate statement should be used: "the Red areas, including the front and back of the pink area, are stretched, the rest is the part that will not be stretched. I will add some borders and the following is the result:

The middle-pink area, and the four blue boxes at the top and bottom of the area are stretched areas, and the other four red boxes are always unchanged areas. From this figure, we can see that there are 9 areas in total, so such an image is called NinePatch.
5. display the content area, for example, the blue area is the content area. If a TextView sets the following image as the background, the text area is the blue area below:

6. Black Line shortcuts

For example, move the cursor to the gray area of the editing area. You can move the cursor up, down, left, and right. If you move the cursor to the gray area above, you can see two gray lines, pull the two gray lines to draw a black line, as shown below:

For example, if you drag the line on the right to the left, a black line automatically appears on the left. If you drag the line on the left, the black line is gradually removed. If you drag the line to the left, this line is removed, for example:

It is often the case that we want to customize the black line, that is, we can draw a black line from any place, the method is also very simple, in the gray place press the mouse to start dragging, as shown below:

If you drag the black line from a random position to the right. The black lines of the top, bottom, left, and right sides can be painted in a similar way. Of course, you can also click or drag on a transparent line to draw a black line, as shown below:

For example, you can drag the mouse to the right at any position on the transparent line. When you release the mouse, the black line is displayed.
To delete a black line, we mentioned a method to delete the black line. You can also use Shift + Click/drag to delete the line, as shown below:

7. Copy this knowledge point to the Internet

Click this button. If there is a bad stretch, it will display red.
The area around the stretch area is displayed with a red border, which may cause deformation of the stretched image. If the content is completely eliminated, the image is not deformed after the stretch, that is, no matter how you scale the image, the image display is good. (The NinePatch editor is used to identify whether the patch is bad based on the color value of the image. Generally, you do not need to consider this setting if the color difference is not too large .)

3. Create a NinePatch image. 3-1: Create a stretch area.

To help you know the benefits of using NinePatch images, here we will use another image for explanation, as shown below:

This is a rounded corner graph. Therefore, when stretching, the four rounded corners should remain unchanged and change to four straight lines.

Sometimes it is found that the transparent area around the source image is not quite regular after opening the png image. Isn't it just a pixel of space around the original image? In this case, you can pull the Zoom ratio, for example:

Here we want to achieve the line width unchanged when stretching, the four rounded corners unchanged. Many people draw a black line when using NinePatch images. In fact, they cannot understand how to make NinePatch images, for example, to achieve the same width and four corners of the line, you only need to specify two points, as shown below:

From the stretch preview, we can see that the line width is not changed, and the four rounded corners are not changed. With the above theory, it is easy to understand. During Horizontal stretching, the area of the vertical line is stretched, and the two sides of the vertical line are not horizontally stretched, for example, if the red box is horizontally stretched, its left and right sides remain unchanged:

Correspondingly, the vertical stretch refers to the horizontal area of the line. The upper and lower parts of the line are not vertically stretched. For example, the red area in the line is stretched:

3-2 create content area

If the image is just a stretch function, the above knowledge is enough. The content area is optional. If you do not have this requirement, you do not need to create a content area. If this image is used as the background of some containers, such as the background of TextView, what is the position of the text in TextView?
For example, the company requires that the text be aligned by the bottom of the rectangle. How should we make NinePatch images that meet the requirements?
This is based on the usage, as shown below:

For example, if you draw a piece of black money below, the black line defines the area of the red box. Of course, the red box and the blue box in the black line are explained to me. In this way, the content will only appear in the red box, rather than in the blue box on both sides of it. You can also see the effect from the stretch preview graph on the right. After you hook "Show content", you can stretch the preview graph to see the blue area where the text appears.

Next, set the text to align with the bottom of the rectangle. In fact, this is not true, because when the content is smaller than the height of the content area set by NinePatch, the content is smaller than the content area, then, where should the content be displayed in the content area? In this case, adjust it with gravity. NinePatch image editing is as follows:

For example, if a black line is drawn on the right and the black line is down, it defines that the content is located in the vertical direction to the bottom, and the intersection of the bottom and right lines, for example, if a red box with a diagonal line is drawn, the text is displayed in the content area.
In fact, it is wrong to understand the content area in this way, because the image will be stretched, and the correct understanding should be like this: the black line at the bottom and the black line on the right set padding for the content, this is easy to understand. For example, you can use padding to understand the content settings, for example:

Use this background in the TextView of the Android layout. The Code is as follows:

As follows:

We can see that there are some padding on the left and right of the font, while the top of the padding is relatively large in the upper and lower directions. It looks like the text is aligned at the bottom. Therefore, the NinePatch image is well done, and the padding settings of TextView in the layout are saved.

Iv. Learning examples

For more examples of creating NinePatch images, you can view the images in the AndroidSDK directory, for example:sdk\platforms\android-19\data\res\drawable-ldpi, Search for NinePatch images, and then see how the pictures on the official website point these black lines. What is worth learning and why others are doing this? Reading more, which is helpful for understanding how to create NinePatch images. The search results are as follows:

1. If you use ps to open this image:
Zoom in:

From this picture, we can see that there are two black spots on the left and above. What is his intention? Through the above learning analysis, this is to set the stretch area around the plus sign in the middle of the graph, that is, no matter how stretched, the plus sign in the middle of the graph will not become larger, deformed, that is, it will not change. The following figure shows that the minus sign in the middle is not stretched:

2.

3. If you cannot understand the intention of a NinePatch image, you can copy it to your Android project and use it to see what the effect is to know its intention. If you have a NinePatch image like this:

You can't imagine the effect of using it? This is what people think. If you don't look at other people's pictures, you won't know how to make NinePatch pictures like others, so you need to read more pictures. For example, the NinePatch pictures applied have the following effects:

4. Check the following two NinePatch images:

It is a transparent gray horizontal line, and a black vertical line, there is no need to make NinePatch ah, why?
Use this line to see what the effect is as follows:

It's a classic line, so when we need to use this line, why should we make it ourselves and use it directly:android:background="@android:drawable/menu_separator"In this case, you must note that the line may have different effects in different versions.

5.

This is the white area in the middle, and the glow is not stretched. The text content only appears in the white area.

6.

This is to keep the right arrow from being stretched.

7.

It looks like an ellipse, and the effect is:

8. What are the intentions of these NinePatch images?

A: This picture is also brilliant. The Magnifier will never be stretched. Horizontal stretching is the one on the right of the top. The key is vertical stretching. This is the one on the left, this point is stretched, and this point is transparent. Therefore, vertical stretching does not affect the shape of the colored image below.

9. Let's take a look at this one. I can't imagine what the results will be after use. I can only use it in an intuitive way:

The background used as TextView is:

10.

This isScrollbar_handle_vertical.9.png, Used inImageViewFollowed:

The two sides of the NinePatch image clearly show a relatively high transparency. Why is the color of the edge relatively deep?
11. There is such a small NinePatch image:

Btn_default_transparent_normal.9.png
The effect after use is: (beautiful !)

12. What are the intentions of this transparent NinePatch image:

The effect is as follows:

After reading the results, you can understand the intention, that is, the paddingLeft image is set, and the effect after calling the View width is as follows:

People who do not understand the principle think that the following points are the content area. They will think that the content should be displayed on the right of the image. Actually, it is not, the following point sets padding, that is, paddingLeft is a fixed moment, for example:

If this is the case, paddingRight is 0, so we add text while keeping the length unchanged, as shown below:

Haha, it proves that my guess is correct !!
If the value of paddingLeft is set for the NinePatch image, set paddingLeft to 0 in the code to see the effect:

Guess it's right !!! I only want to be right in my mind. Don't guess. I need to prove it in practice !!
13. Let's take a look at the same principle:

Effect:

This achieves the drawableRight effect, and the image is already centered in the text.

14.

It looks like a circle. In fact, it is actually a rounded rectangle, which is really unexpected! The figure is amazing! The image capacity is minimized, saving the apk size!

15. Let's take a look at what is clever about this one?
Divider_horizontal_dark.9.png

I don't know where Gaoming is. But I believe that Google's people will not be so boring, there must be something brilliant.

This is the color of one pixel, and I don't even know what its intention is.
At this point, when I was interviewing with yonyou, a technical officer asked me whether to use images for separation lines or directly using Shape images in ListView, the Technical Officer later said that the use of images is good, because the image rendering mechanism of Android is not good enough. If you directly use Shape, the efficiency will be relatively low and memory consumption will be relatively high. This explains how to use images as much as possible instead of using code to draw images.

16.

This is to ensure that the image remains unchanged. If so, you can use wrapcontent when using the image. What are the benefits of doing so? A: To adapt the background image to any widget size, and keep the image size unchanged. The adaptive size is used to make click events more prone, because the probability of a point in the control is higher.

Finally, I would like to thank the video recording teacher again!