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.
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:
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]
\