Android must know--ninepatch image production

This article for CSDN College free course "Ninepatch picture production from the beginner to proficient" notes, suggest novice first watch the video, organize this note is to facilitate their review, have Ninepatch basic friends can directly see the part four. --"Reprint please specify the source"

I. Introduction of TOOLS

This is a PNG picture, in order to make it easier to watch the larger. The use of Ninepatch images in Android is generally very small pictures, because when the content of the time, the background will automatically stretch to adapt to the content, and if the picture is bigger, less content, the picture will not automatically become smaller, so the PNG image used as a ninepatch picture is generally relatively small.

Open the Android Ninepatch image maker ( /tools/draw9patch.batin theandroid SDK directory), and open the image above, as follows:

After opening the picture, in position 1, you can see the picture around 1 laps of 1 pixels of Transparent point, this is where we want to make ninepatch picture production.
1. Location 1: Edit area.
In this area, you can set the "Stretch area" and "content area" of the picture. Note: "Stretch area" means which area can be stretched, and "content area", such as a button, Textview,button text, the area where the text is located is the content area. Also like a linearlayout, the contents of this layout are displayed in the content area.
2. Position 2: Stretch preview area.
This is a preview of 3 scenarios where vertical stretching, horizontal stretching, and vertical horizontal stretching are simulated. It is known that the "Zoom" is 100%, that is, the original image of the size of the editing area is the original size, and then look at the stretch preview area, vertical stretching, the line width of the upper and lower sides is pulled higher by one times, because "Pathch scale" set is 2x, that is, stretching twice times the original, The height after the vertical stretching is twice times the original, the horizontal stretch is the original twice times the width, both sides are stretched after the width is twice times the original. From the know, the horizontal stretch, the left and right two edges of the line width is one times wider than the original, and the two sides are stretched on the preview figure that 4 edges of the line width is 1 time times wider than the original.
3. Location 3:zoom-Edit area display size adjustment, if the editing area is too small to edit, you can adjust the edit area to enlarge
4. Position 4:patch Scale-stretch multiple, adjust the stretch multiple can easily see the effect of different multiples of stretching
5. Position 5:show Lock-Displays the locked area, which is a non-editable area
6. Position 6:show patches– Show Stretch area
7. Position 7:show content– Display content area
8. Position 8: Display use prompt information

Second, practical tools

1. Make the edit area view display larger, as follows:

2. To make it easier to see the effects of stretching, adjust the stretching ratio a little bit:

3. Display non-editable regions, such as when the mouse moved to the picture will be displayed in the non-editable area, that is, the area in the red box, the most out of the reality of the red box is not, here plus a red box just for the sake of viewing, from the visible red box by a pixel-sized transparent line around, this line is the area we

4. Show the area that will be stretched, such as the pink area below which will be stretched, other places will not be stretched, that is, no matter how stretched, the change is only the pink area, the other areas of the shape of something will not change:

Note: For the area that will be stretched many people say so, in fact, should use a more accurate saying is "pink area including the pink area of the left and right parts of the part are stretched, the other is not to be stretched part, I add some border after the following:

The middle pink area, and the 4 blue box areas around it are stretched areas, and the other 4 red box areas remain unchanged. A total of 9 areas are seen from this figure, so the picture is called Ninepatch.
5. Display the content area, such as the blue area in the content area, such as a textview setting the following diagram as the background, the text display area is the following blue area:

6. Draw a shortcut to the black line

For example, move the mouse to the gray area of the editing area, up, down, left, and right can be, such as moved to the Upper gray area, at this time see two gray lines, pull the two gray lines can draw the black line, as follows:

For example, drag the right line to the left, found that the left side automatically appears a black line, continue to drag to the left is gradually to eliminate this line, if it has been dragged to the leftmost gray lines coincident, then this line is eliminated, such as:

Often the case is that we want to customize the black line, that is, you can start from anywhere to draw a black line, the way is very simple, in the gray place, press the mouse to start dragging, as follows:

If you press the mouse to the right from a random position, drag a broken black line. The black lines on the upper, lower, left, and right sides can be drawn in a similar way. Of course, you can also draw a black line on a transparent line, either directly or by dragging, as follows:

If you're dragging the mouse to the right in a transparent line, press and hold it, and the black line comes out when you release the mouse.
Remove the black line, the front said a way to remove the black line, you can also use SHIFT + tap/Drag to implement, as follows:

7. This knowledge point is copied on the Internet

Click this button and if there is a bad stretch, it will show red.
The area around the extruded area, with a red border, that may deform the extruded picture, is not deformed if the picture is completely removed, that is, no matter how the picture is scaled, the display is good. (The actual test found that the Ninepatch editor is based on the color value of the picture to distinguish whether it is bad patch, generally as long as the chromatic aberration is not too big do not consider this setting.) ）

Third, make Ninepatch picture combat 3-1 make stretching area

For the convenience of knowing the benefits of using the Ninepatch image, here is another picture to use for the solution, as follows:

This is a rounded shape, so when stretching, 4 fillets should remain constant, changing to 4 straight lines.

Sometimes it turns out that the transparent areas around you are not so regular when you open a PNG image, not that it's just a pixel more space around the original? At this point, pull the zoom ratio can be, such as:

Here we want to achieve the width of the line when stretched, four rounded corners unchanged. Many people in the role of Ninepatch pictures are painted a line of black, in fact, they can not understand the production of ninepatch pictures, such as here to reach the width of the line when stretched, Four corners unchanged, just point two points is enough, as follows:

You can see from the stretch preview that the line width has not changed, and that the 4 rounded corners have not changed. With the previous theory it is easy to understand, in the horizontal stretching, stretching is the vertical line of the area, the vertical line will not be stretched horizontally, such as the red box will be horizontally stretched area, its left and right sides of the area will remain unchanged:

Correspondingly, the vertical stretch is the area of the horizontal line, and the upper and lower parts of the line are not stretched vertically, as in the red area of the bar:

3-2 Making content Areas

If the image is just a stretch, the above knowledge is sufficient. Creating content areas is optional, and you don't need to create content areas if you don't have this requirement. If the image is to be used as a background for some containers, such as a background for textview, what should be the position of the text in TextView?
Such as: The company requires this: the need for text is aligned to the bottom of the rectangle, how should be made to meet such requirements of the Ninepatch Picture it?
Here is also used based on the production, as follows:

For example, in the below to draw a money, then this black line defines the red box this area, of course, the red box, the blue box I painted to explain. This will only appear in the red box, not in the blue box on either side of it. You can see the effect from the stretch preview on the right, and the "Show content" tick, then stretch the preview to see the blue areas where the text appears.

Then to set the text by the bottom of the rectangle alignment, in fact, this is not quite right, because when the content is less than the Ninepatch picture set the content area of the height, content is less than the content area, then the content should be displayed in the content area where, it is necessary to coordinate with the gravity to adjust. Ninepatch image editing is as follows:

If you draw a black line on the right, this black line, it defines the vertical position of the content is lower, the bottom and the right of the intersection of the two lines, such as a diagonal red box is the content area, the text will be displayed in this area.
In fact, this understanding of the content area is wrong, because the picture will be stretched, the correct understanding should be: the bottom of the black line and the right of the black line is to give the content set padding, so better understand, such as set of content settings with padding to understand such as:

In the Android layout of the TextView use this background, the code is as follows:

As follows:

Can see the font of the left and right there are some padding, and up and down is the direction of the padding is above the larger, it looks like the text at the bottom of the same. Therefore, Ninepatch pictures do well, even textview in the layout of the padding settings are saved.

Iv. Examples of learning

More Ninepatch pictures of the production examples, you can see the androidsdk directory of pictures, such as: sdk\platforms\android-19\data\res\drawable-ldpi , use Search to find Ninepatch pictures, and then crossing network pictures are how to point these black lines, what is worth learning, why others so point? See more, for understanding the production of ninepatch pictures will be helpful, search results such as:

1. If you open this image with PS:
Amplification:

From this picture you can see the left, the top of the dot two dots, what is his intention? Through the above learning analysis, it is set up the stretching area in the middle of the graphics plus four weeks, that is, no matter how to stretch, the middle of the graphics Plus is not to become larger, deformed, that is, will not change. Also as shown below is to keep the middle minus sign not being stretched:

2.

3. If you don't see the intent of a ninepatch image, you can copy it to your Android project and use it to see what the effect is. If you have a picture of this ninepatch:

You can't imagine what it would be to use it? This is someone else's idea, if you do not see others, you will not know like others to make ninepatch pictures, so to see more, such as the application of Ninepatch picture effect as follows:

4. Look at the following two pictures of Ninepatch:

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

A very classic line, so we need to use this line, why do we have to make it, direct use: android:background="@android:drawable/menu_separator" , this needs to be noted, may be in different versions of this line may show the effect is not the same.

5.

This is the one that retains the glow that is not stretched and stretches in the middle of the white area. Text content also appears only in white areas.

6.

This is to keep the arrow on the right not being stretched.

7.

Looking at an ellipse, the effect after use is:

8. What are the intentions of these ninepatch pictures?

A: This picture is also very clever, the magnifying glass will never be stretched, the horizontal direction of the stretch is the top right side of the point, the key is the vertical stretching, this is the left side of the point, stretching is this point, and this point is transparent, so the vertical stretch will not have the color of the image below the shape of the effect.

9. Look at this again, completely can not imagine what effect will be used, can only be actually used to see the intuitive:

When used as a background for TextView:

10.

This is scrollbar_handle_vertical.9.png, used after ImageView :

Look at the two sides of the picture ninepatch is transparent high ah, can effect why is the color of the edge more deep?
11. There is such a small picture of Ninepatch:

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

12. What is the intention of seeing this transparent ninepatch picture again:

The effect used is:

See the effect to understand its intentions, is the picture is set up paddingleft, such as the cut with the width of the view after the effect:

Do not understand the principle of the person, thought that the following point is the content area, will think the content should be displayed on the right side of the picture, in fact, not, as far as the previous study, the following point is set padding, that is, paddingleft is a fixed moment away, such as:

If that's the case, then the paddingright is 0, so we'll add the text as long as it stays the same, as follows:

Haha, prove my guess is right!!
If the Ninepatch picture is really set the value of Paddingleft, then I set the paddingleft to 0 in the code to see the effect:

Guess is right!!! Study only with the brain to think is not right, do not guess, to use the practice to prove!!
13. Take a look at a diagram using the same principle:

The effect is:

This achieves the drawableright effect, and the picture is already centered with the text.

14.

Look like a round, in fact, he is a rounded rectangle, it is really unexpected ah! The man who made the picture is too good! The size of the picture to achieve the smallest, save the APK sizes Ah!

15. What's the point of seeing this one again?
Divider_horizontal_dark.9.png

I don't know where gaoming is. But believe that Google's people will not be so boring, there must be a smart place.

This one pixel color, even more do not understand its intentions.
At this time I think I was in the interview, a technical officer asked me in the ListView is to use the picture to do the separation line good or direct use of shape graphics, technical officer after the use of the picture is good, because Android graphics rendering mechanism is not good enough, if directly using shape efficiency will be low and consumes more memory. This can be explained as we use the image as much as possible, rather than drawing it directly from the code.

16.

This is for the image of the picture to remain unchanged, if it is only in the use of images with wrapcontent, it will do so what benefits? A: In order to make the background picture fit any size of the control, and keep the graphic size unchanged. The size is adapted to make the Click event more prone, because the probability of a large control point is greater.

Finally thanks again to the teacher who recorded the video!

Android must know--ninepatch image production