Android Nine point PNG (Nine-patch) Production and application

You may not have heard of the term nine-patch, which is a specially processed PNG image that can specify which areas can be stretched and which are not.

Now I'm going to teach you how to make a nine-point PNG image.

------------------------------------------Nine_patch Production--------------------------------------------------

Material:

First we try to set a background image for TextView without a nine-point PNG, the XML parameter is as follows:

    < TextView         Android:layout_width = "Match_parent"         android:layout_height= "Wrap_content"        android:background= "@drawable/ Green "/>

The final effect is as follows:

As you can see, because the width of the picture is not enough to fill the width of the entire screen, the entire picture is stretched evenly.

This effect is very poor, the user is certainly not tolerated, then we can use the Nine-patch image to improve.

In the Android SDK directory, there is a tools folder where you find the Draw9patch.bat file in this folder.

After double-clicking, drag the picture into the window and load the picture in:

We can draw a segment on the four border of the picture (left), the part of the segment represents the area of the current picture stretching, and the stretched effect can be viewed in the window (right).

The edge of the picture is covered by a black line of the range is the picture needs to stretch the range, when the upper and lower left and right to set a range, will form a nine Gongge layout, which is the origin of the Nine-patch name.

If you accidentally draw the wrong, Press and hold shift+ the left mouse button to clear the markup section .

The principle of picture stretching: preserving details, stretching straight lines

Save the picture, the image will automatically add a. 9.png suffix, the final effect of the image is this:

What kind of black line is the last image generated? Don't get excited, it's a special marker for marking the stretch area, and without these black lines, the image is just like a normal PNG.

Wait, is that a normal PNG with a black marker line that can act as a nine-patch diagram?

In addition to marking the line, to let Android recognize that this is a nine-patch picture, you have to have a special declaration (. 9.png) , be careful not to change the file's suffix name .

image naming specification: Picture Style + Creator + number (to ensure that the compiler does not conflict with the editor)

< TextView         Android:layout_width = "Match_parent"         android:layout_height= "Wrap_content"        android:background= "@drawable/ Green_woider_01 "        android:gravity=" center "        android:text=" Hello, Cortana "        android:textcolor=" #333 "        android:textsize=" 18DP "  />

Re-run the program to see the effect:

It's a great effect, isn't it? So when the picture needs to be stretched, it can only stretch the specified area, the program is also a great improvement in appearance.

With this knowledge reserve, try the following interface:

Original address: http://www.cnblogs.com/woider/p/5121700.html

Original address: http://www.cnblogs.com/woider/p/5121700.html

Android Nine point PNG (Nine-patch) Production and application