Explore the Android 9patch image

Explore the Android 9patch image

1. What is "9 sister" (9patch)?

It is a tool for processing PNG images, which can generate a "*.9.png" image for us;

2. What is "*.9.png"?

The so-called "*.9.png" This is a special image format supported by the Android OS, it can be used to achieve partial stretching, this picture is after the "9 sister" for special treatment, if not processed, the direct use of PNG image will be distorted, stretching abnormal phenomenon.

3. What is it used for?

Speaking of the use, this special format of the PNG, I also read the relevant articles on the Internet but all with a self-adaptive button to give an example! (e.g.) exclusively plagiarism. - -、

(This example we directly ignore, in the back I will instill in the game instance)

This example refers to the font size change on the button, and the PNG image underneath the text automatically adapts to the text.

This seems to indicate that the use of some components of the Android software application is often used;

4. So how do you actually use it in the game? What's the use of it?

.... Of course, as a game I must be "9 sister" to use in our game, otherwise it is not white research, after thinking suddenly thought of some situation, and found that "9 sister" indeed in the game development occupies a certain amount of weight! Below we first familiar with the "9 sister" tool, and then with you for example, stickers to illustrate its use, after all, there is a picture of the truth hehe ~

Start 9 Sister:

In your Android SDK path x:/android sdk/tools, you will find a "draw9patch.bat", yes this is 9 sister, official name Ninepatch;

Prompt to import a PNG image and then actually enter the "9 sister" interface (e.g.): (Figure 1)

Sequence ①: The area around the extruded area that is displayed with a red border that may deform the extruded picture, and if it is completely eliminated, the picture is not deformed after stretching, that is, no matter how the picture is scaled, the display is good. (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.) ）

Sequence ②: The area is an imported picture, as well as an operational area.

Sequence ③: Here Zoom: The bar is to enlarge the import of the map to reduce the operation, where the magnification is only to make the user more convenient to operate, after all, the pixel operation is the cost of the eye, the following patch scale is the sequence of the ④ area of three forms of stretching after a preview operation, You can see the effect of the picture after the action is stretched.

Sequence ④: The area is here from top to bottom, with a preview of the effect of the portrait stretch, a preview of the effect of the transverse stretch, and a preview of the effect of the overall stretch

Sequence ⑤: Here if you tick, then when you put the mouse in the ② area and the current position is not operational area will appear lock of a picture, that is, display non-editable region;

Sequence ⑥: Tick here, then in the ④ area you will see the relative position and effect of the pixel points of the current operation in the stretched preview.

Sequence ⑦: Displays the area of the picture stretch in the editing area;

How to operate:

The left mouse button selects the pixel to be stretched; shift+ the left mouse button to cancel the current pixel point.

Operating Area:

You see the imported PNG image by default around a pixel point, that is, this circle of one pixel point is our operational area. Because the bottom and right operable area is the display area of the specified content, which is an optional area, it can be ignored, but note that the content area cannot have a break, that is, the tag is contiguous and only one place, otherwise. 9.png images will be error-prone when put into a project.

Main attention to the left and top operating areas;

A row of pixels in the top operating area that represents the pixel points that are stretched horizontally;

A row of pixels in the left operating area that represents a vertically stretched pixel point;

Is my action on the picture:

(Fig. 2)

Did you see the black pixels above and to the left? Yes, these are my hands-on, and here's what I want to do with this PNG image stretching, except that the middle area is stretched. The upper middle area is selected as the stretched pixel point selected for transverse stretching, and the left side is stretched vertically;

So now look back (Figure 1) and compare (Figure 2) and see the difference! Obviously, (Fig. 1) We do not have any operation, the default overall stretch, then the effect of stretching is obviously distorted ... and (Fig. 2) We have specified the stretched pixel point so just the middle is stretched, the picture of the lace we keep not stretched so it looks good too many Wahaha,

Then through the "9 sister" can be saved out a "*.9.png" picture, we placed in the Android project Res under the drawable can pull!

Now I can talk to you about the benefits of using "*.9.png":

In our mobile game development process, we are most related to the generated installation files, such as J2ME jar package, Symbian SIS, SISX and our Andrid apk all want to pack the smaller the better, although the current mobile phones tend to be smart, but after all, mobile phone capacity and memory is still limited , as a mobile device developer we are very important to this, then through the "9 sister" processing pictures we can save a lot of memory and capacity.

1. Save time and Energy!

If we have a 50*50 similar to the above lace-up PNG image, then we in the Android or large-resolution machine to use the painting, it is necessary to deal with it, or let the artist's mm to do a new one, then through the "9 Sister" processing get "*.9." PNG"will save the art of the burden.

2. Save memory!

If you do not want to use the code to scale its small image to be used again (because it will be distorted), then you may add more pictures, so that the size of the game pack will increase, a few K-dozens of k, and the use of "9 sister" to deal with the elimination of these problems.

3. Reduce the amount of code!

Some children's shoes to say, I use the same code can achieve (Figure 2) The effect is not distorted, OK, I also know. When I was in the J2ME platform when the RPG is also used to set the visual area and other code to achieve, but if you use ". 9.png" Way is more simple!!!

Not much of the benefits of blowing "9 sister", let's look at how the code implements this format and how it works!

[java:showcolumns] view Plaincopy ········· 10 20 30 40 50 60 70 80 90 100 110 120 130 140 Max

2. Package Com.himi;
4. Import Android.content.Context;
6. Import Android.graphics.Bitmap;
8. Import Android.graphics.BitmapFactory;
10. Import Android.graphics.Canvas;
12. Import Android.graphics.Color;
14. Import Android.graphics.NinePatch;
16. Import Android.graphics.Paint;
18. Import Android.graphics.RectF;
20. Import Android.util.Log;
22. Import Android.view.SurfaceHolder;
24. Import Android.view.SurfaceView;
26. Import Android.view.SurfaceHolder.Callback;
28. Public class Mysurfaceview extends Surfaceview implements Callback, Runnable {
30. private Thread th = new Thread (this);
32. private Surfaceholder SFH;
34. private canvas canvas;
36. Private paint paint;
38. private Bitmap Bmp_old;
40. private Bitmap Bmp_9path;
42. Private Ninepatch NP;
44. Public Mysurfaceview (context context) {
46. super (context);
48. This.setkeepscreenon (true);
50. Bmp_old = Bitmapfactory.decoderesource (Getresources (), r.drawable.himi_old);
52. Bmp_9path = Bitmapfactory.decoderesource (Getresources (), R.drawable.himi_9path);
54. NP = new Ninepatch (Bmp_9path, Bmp_9path.getninepatchchunk (), null);
56. //Create a Ninepatch object instance, the first parameter is bitmap, the second parameter is byte[], here we actually ask to pass in
58. //How to handle stretching method, of course we do not need to pass in, because the ". 9.png" Picture itself has this information data,
60. //That is, we use "9 Sister" tool operation Information! We call Getninepatchchunk () directly with the ". 9.png" image itself .
62. ///The third parameter is the name of the image source, which is an optional parameter, and the direct null~ is ok~
64. SFH = This.getholder ();
66. Sfh.addcallback (this);
68. Paint = new paint ();
70. Paint.setantialias (true);
72. Setfocusable (true);
74. }
76. public void surfacecreated (Surfaceholder holder) {
78. LOG.V ("Himi", "surfacecreated");
80. Th.start ();
82. }
84. /** 
86. * @author Himi
88. */
90. public Void Draw () {
92. Canvas = Sfh.lockcanvas ();
94. Canvas.drawcolor (Color.Black);
96. RECTF rectf_old_two = new RECTF (0, bmp_old.getwidth () * 2, + + bmp_old.getheight () * 2); Remark 1
98. RECTF Rectf_old_third = new RECTF (0, + bmp_old.getheight () * 2, Bmp_old.getwidth () * 3,
100. + bmp_old.getheight () * 2 + bmp_old.getheight () * 3);
102. //--------Below are the normal PNG painting methods-----------
104. Canvas.drawbitmap (Bmp_old, 0, 0, paint);
106. Canvas.drawbitmap (Bmp_old, null, rectf_old_two, paint);
108. Canvas.drawbitmap (Bmp_old, null, Rectf_old_third, paint);
110. RECTF rectf_9path_two = new RECTF (+, + bmp_9path.getwidth () * 2, + Bmp_9path.getheigh  T () * 2);
112. RECTF Rectf_9path_third = new RECTF ( + bmp_9path.getheight () * 2, + bmp_9path.getwidth () * 3,
114. + bmp_9path.getheight () * 2
116. + bmp_9path.getheight () * 3);
118. Canvas.drawbitmap (Bmp_9path, 0, paint);
120. //--------Below is the painting method for the ". 9.png" Image-----------
122. Np.draw (canvas, rectf_9path_two);
124. Np.draw (canvas, Rectf_9path_third);
126. Sfh.unlockcanvasandpost (canvas);
128. }
130. public Void Run () {
132. //TODO auto-generated method stub
134. While (true) {
136. Draw ();
138. try {
140. Thread.Sleep (100);
142. } catch (Exception ex) {
144. }
146. }
148. }
150. public void surfacechanged (Surfaceholder holder, int format, int width, int height) {
152. LOG.V ("Himi", "surfacechanged");
154. }
156. public void surfacedestroyed (Surfaceholder holder) {
158. LOG.V ("Himi", "surfacedestroyed");
160. }
162. }

is in the simulator,

On the left is normal PNG scale different size situation, the right is our 9 sister processed "*.9.png", Wahaha, how the effect is obviously not the same!

Well, come here to knot it, very tired of writing for three hours .... I hope that we will use the "9 sister" Oh,

Explore the Android 9patch image