Article source: blog.csdn.net/lizzy115/ar…

1. PNG format.

The definition of the PNG format will not be discussed much here. But.9.PNG is the standard PNG format, with an extra 1px border around the outer edge that defines the expandable and static areas of the image. In particular, the cross part of the left and top borders is stretchable, and the unselected part is static. The cross between the right and bottom borders is the content section. This parameter is optional, as shown below.

On Android, images in 9.png format without background can be customized without distortion, such as the system Button is a typical example.

In fact, both left and top, right and bottom divide the image into 9 pieces (the corners are unzoomable, the other four are zoomable), hence the name 9.png.

2. Use draw9patch. jar to create a 9.

Now that we have seen how the 9.png format works, we will use The Draw9Patch provided by Google (run the Draw9patch. bat in the Android-SDK-Windows \tools directory) to create the.PNG image.

Step 1: Prepare images to stretch.



It’s a very small image and I want it to be the background and the middle part of the text to be filled in.

Step 2: Make a.9.PNG image.

Open Draw9Patch and drag the image in as follows:



The default stretch is the whole stretch. In fact, we don’t want to stretch the border part. Ok, let’s define the stretch area ourselves, as shown below:

Then click File and export as Content.9.png. Step 3: Use the.9.png image in the layout file. Create a new project and Draw9Patch. The default main Activity is draw9PatchActivity.java:

?

123456 @Override``public  void  onCreate(Bundle savedInstanceState)``{````super .onCreate(savedInstanceState); ````setContentView(R.layout.main); ` `}

PNG file to /res/drawable, open /res/layout main. XML, and declare as follows:

?

12345678910111213141516 <? xml  version = "1.0"  encoding = "utf-8" ? > ` ` < LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"````android:orientation = "vertical"````android:layout_width = "fill_parent"````android:layout_height = "fill_parent"````android:background = "#777"````android:padding = "8dip"````>````< TextView````android:layout_width = "fill_parent"````android:layout_height = "wrap_content"````android:text = "Text: NinePatchDrawable graphic is A stretchable bitmap image."```` Android :background = "@drawable/content"````android:textColor = "# 000" ` ` ` ` / > ` ` < / LinearLayout >

As shown in figure,



Let’s change the text,

?

12345678910111213141516 <? xml  version = "1.0"  encoding = "utf-8" ? > ` ` < LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"````android:orientation = "vertical"````android:layout_width = "fill_parent"````android:layout_height = "fill_parent"````android:background = "#777"````android:padding = "8dip"````>``< TextView````android:layout_width = "fill_parent"````android:layout_height = "wrap_content"````android:text = NinePatchDrawable graphic is A stretchable bitmap image, which Android will automatically resize to accommodate the contents of the View in which you have placed it as the background. A NinePatch drawable is a standard PNG image that includes an extra 1-pixel-wide border."````android:background = "@drawable/content"````android:textColor = "# 000" ` ` ` ` / > ` ` < / LinearLayout >

As shown in figure,

As you can see, the border is very clear. Below is a comparison of the unused.9.png image, and it’s not what we want either:

At this point, we have almost mastered the art of making.9 PNG images. For the sake of comprehensiveness and depth of knowledge, let’s continue.

3.Use draw9patch. jar to create the definition content area of the 9.png image.

If you think the text and the margins are too close together, ok, we use the right and bottom lines to define the content area to increase the inner margins.



We define a small content area, and the rest automatically acts as a border to make the inner margins appear large, as shown below.



It’s very easy to get into the habit of saying android:padding=”10dip” in <TextView> in order to increase the margin. I’m warning you not to do this because you won’t be able to predict what you’re going to see, and because it’s confusing, Since setting the content area is defining the padding, I said they are similar in the previous section. I personally find it more elegant and concise to set the padding through the content area than to define the padding in the layout XML!

Other instructions for the Draw9Patch tool will not be covered again, because there is too much to say, please refer to the official documentation to save space.

4. Advanced techniques for making.9 PNG.

For beginners of Draw9Patch, this can be considered an advanced technique, which is:The stretch area may not be continuous, it may be more than one piece, and it is proportional to the length of the custom border line.

The direct illustration above:

5. How to process 9.png images in SDK. SDK specifically defines and processes 9.png. Here we just do a simple process analysis. When Bitmap reads image stream data, NinePatchChunk(9Patch data block) will be used to judge the image. NinePatchDrawable, NinePatchDrawable, NinePatch, NinePatch

?

123 setNinePatchState( new  NinePatchState(````new  NinePatch(bitmap, bitmap.getNinePatchChunk(),  "XML 9-patch" ),````padding, dither), r);

If the NinePatch test is successful, call the local method and draw the final image:

?

123 nativeDraw(canvas.mNativeCanvas, location,````mBitmap.ni(), mChunk, paint ! = null  ? paint.mNativePaint :  0 ,````canvas.mDensity, mBitmap.mDensity);

9.PNG images are widely used in Android.

Unzip any ROM and find the framework_res.apk file, which contains a large number of 9.png files.

Button:  

Unlock:  

The drop-down box:  

Title bar:

Toast:

Search, keyboard, zoom in and out controls, time addition and subtraction, I won’t list them all.

7. In the end, I would like to offer some illustrations for readers to learn from:

 

Picture 1 my work



Picture 2 drop-down button

 

Picture 3 background of the head of the article

 

Picture 4 System head background

9. PNG production introductionThe editor

.9. PNG image making

Draw9patch. bat in the Tools directory of the Java JDK and Android SDK

The production process

First, we will prepare an image to be stretched, and then open draw9patch.bat and drag the image to draw9Patch for editing. I believe you have already seen the black bar in the second image. This bar is generated by clicking the left mouse button. The black bar at the top represents the area of the image that can be stretched horizontally. The black bar on the left represents the area where the image can be stretched vertically, the area covered by the black bar on the right represents the area where the image can be displayed vertically, and the area covered by the black bar on the bottom represents the area where the image can be displayed horizontally.

Remove.9. PNG black line

Example1 \res\drawable-hdpi: example1\res\drawable-hdpi: xUltimate-d9pc-x86 Then hit xUltimate-d9pc.exe, run it, wait a second or two, click and you’re done removing the black line.

9 images in the done\example1\res\drawable-hdpi directory, copy the image and it is ready to use. [1]

\