9.png Image Processing

Http://blog.csdn.net/linghu_java/article/details/7220041

 

 1. PNG format.
The definition of PNG format is not discussed here. However. 9. PNG is indeed a standard PNG format, but an additional 1px border is added in the outermost circle. This 1px border is used to define the scalable and static areas of the image. In particular, the cross part of the left and top borders is the Extensible part, and the unselected part is the static area part. The cross part of the Right and bottom borders is the content part (in disguise, it is equivalent to defining an padding, which is similar to the padding function. I will introduce it separately later). This parameter is optional, for example.
In Android, images in the 9. PNG format have no background, and therefore can be stretched without distortion. For example, the system button is a typical example.

In fact, both left and top, right and bottom divide the image into nine blocks (the four corners cannot be scaled, and the other four blocks can be scaled ), so it is called 9.png.

2. Use draw9patch. jar to create a 9. PNG Image to define the stretch area.
9. PNG format. Below we use the draw9patch provided by Google (run the draw9patch under the Android-SDK-Windows \ tools directory. BAT. 9. PNG image.
Step 1: Prepare the image to be stretched.

A very small image. I want to fill in the content of the article in the middle of the background.
Step 2: Create a. 9. PNG Image.
Open draw9patch and drag the image into it, as shown below:

The default stretch is the overall stretch. In fact, we don't want to stretch the border part. Well, Let's define the stretch area by ourselves, for example:

Click the filepath to export content.9.png.
Step 3: Use the. 9. PNG Image in the layout file.
Create a project draw9patch. The default main activity is draw9patchactivity. Java:

?

123456

@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.main);}

Copy the content.9.png file to the/RES/drawable folder and Open main. XML in the/RES/layout directory. The declaration is 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"><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="Body: A ninepatchdrawable graphic is a stretchable bitmap image ."android:background="@drawable/content"android:textColor="#000"/></LinearLayout>

,

We modify 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"><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="Body: A 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 des an extra 1-pixel-wide border ."android:background="@drawable/content"android:textColor="#000"/></LinearLayout>

,

It can be seen that the border is very clear. The comparison graph of. 9. PNG is not used, and it is not the effect we want:

So far, we have basically made. 9. PNG images. For the comprehensiveness and depth of the knowledge system, we will continue.

3.Use draw9patch. jar to create the definition content area of the 9. PNG image.
Do you think the text and margin are too close? Well, we use the line of right and bottom to define the content area to increase the padding.

We define a very small content area, and other places will automatically act as borders, so that the padding is very large, such,

Here, I would like to note that, in the first place, in order to increase the padding, it is easy to think about inertia, declare Android: padding = "10dip" in <textview>, I advise my friends not to do this here. First, you will not be able to predict your display, and second, this is confusing, because the content area is to confirm the padding, that's why I mentioned them in the previous section. I personally think it is more elegant and concise to set the padding through the content area than to define the padding in the layout XML!
For other usage instructions on the draw9patch tool, I will not talk about it again, because there are too many things to say. To save space, please refer to the official documentation.

4. Advanced Techniques for creating. 9. PNG.
For beginners of draw9patch, this is an advanced technique, that is:Stretch area, which can be non-consecutive, with more than one piece, and is proportional to the length of the custom border line.
Description:

5. How to process the 9. PNG Image in the SDK.
SDK specifically for 9. PNG has been defined and processed. Here we just make a simple process analysis. When bitmap reads the image stream data, it will determine the ninepatchchunk (9patch data block) of the image ), if ninepatchchunk is not empty, it is ninepatchdrawable, and ninepatchdrawable will be handed over to ninepatch for processing:

?

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

If the ninepatch check succeeds, the local method is called to draw the final image:

?

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

6. A large number of 9. PNG images are applied in the Android system.
You can find the framework_res.apk in a large number of 9. PNG files, which are widely used. For example, common examples include:
Button:
Unlock:
Drop-down box:
Title bar:
Toast:
There are also search, keyboard, zoom-in and zoom-in controls, time addition and subtraction, and so on. I will not list them one by one.

7. Finally, we will provide some legends to help readers learn about them:

Illustration 1 my work

View Figure 2 drop-down button

Image 3 background of the article Header

View figure 4 Background of the system Header