The use and fabrication of 9.png images in Android _android

We have a textview, the contents of which can be changed through the code dynamically, we want to use a picture as a textview background, to achieve similar to the mobile phone QQ bubble text effect.

The TextView definition is as follows:

<textview android:text= "@string/hello_world"
    android:layout_width= "wrap_content"
    android:layout_ height= "Wrap_content"
    android:gravity= "center"
    android:background= "@drawable/original"/>

The background picture looks like this:

The results of the final TextView are as follows:

The dotted line above is the outer contour of the TextView, we define the width and height of the TextView as Wrap_content, and set the gravity to center, but we still do not achieve our ideal state. The text in TextView is centered relative to the entire picture, but the effect we want is to center the text in a green rectangular area.

The text in the previous illustration is shorter, and the problem is not obvious. When we set the text in TextView to have a certain length, the problem is more pronounced, as follows:

The above picture exposes two problems:

Our original picture is green from top to bottom, and the right and lower sides have shadows. When the background image is stretched to the size of the image, the picture is distorted: the Four corners of the message box are ambiguous, the shadows are blurred, the shades are ugly, the green is not clear, and the gradient effect is basically invisible.

The text has gone beyond the picture's message box and is cluttered.

The reason for this problem is that the entire background picture is fully stretched and the width and height of the stretched picture is different from the width of the original picture. If you stretch only the area in the original picture's rectangular message box, you can resolve the problem.

To solve these problems, we can use the. 9.png format picture in Android, that is, Nine-patch.

Below is a description of the. 9.png Format Picture:

First of all, the. 9.png format picture itself is a. png format picture, but the picture has a. 9 suffix for the filename. We can convert a. png picture to A. 9.png picture,. The 9.png picture is more than normal. png pictures have a 1px border on the outermost edge of the picture, where we can define the stretch area of the picture and the content area of the picture on the outermost 1px border.

We edit the original background image to get a picture of the file named Message.9.png as follows:

When we use the. 9.png picture as the background of the TextView, the effect is as follows:

As we can see from the above picture, all the text is centered in the rectangular area of the message box, and the image is not distorted, keeping the texture of the original image.

We can take a closer look at the above message.9.png this picture, you can find that the outermost edge of the picture is black dots, black lines, specifically:

You can set one or more points in the top 1px border of the picture to black, in this case we use a black segment that defines the area in the picture that can be stretched horizontally. You can also set one or more points in the left 1px border of the picture to black, in this case we only use a black pixel that defines the area in the picture that can be stretched vertically. Cross-drawing pixel intersection with longitudinal stretching pixel points defines a rectangular area in the picture that can be stretched, which enables you to stretch a part of the picture.

We can selectively set black segments on the bottom and right sides of the picture, and use these black segments to define the content area of the picture. When the style in our picture is irregular, it is important to define the content area of the picture, and the text in the TextView will be placed in the content area. Sets a black segment on the bottom 1px border of the picture, which defines the horizontal content area of the picture. Sets a black line segment for the rightmost 1px border of the picture, which defines the portrait content area of the picture. A rectangular area consisting of a horizontal segment and a longitudinal segment is composed of the content area. If you don't define the content area of the picture, the content area of the picture is the entire picture area.

.9.png the pixels in the most lateral quad are either pure transparent, pure white, or pure black, and do not set other colors and transparency.

We can use Photoshop to edit an existing. png into. 9.png. In fact, Android itself also provides editing. 9.png tools, the Android/sdk/tools directory has a lot of practical tools, we can use the Draw9patch tool in this directory to edit. PNG pictures.

Use the following steps:

The GUI interface can be displayed through the command line, or by double-clicking the start Draw9patch directly.

After you open Draw 9-patch, you can drag a. png picture directly onto the GUI interface, or you can open the. png picture by using the Open 9-patch menu item in the File menu. The left side is the picture editing area and the right side is the preview area. You can set a black point for the outermost four border of the picture in the editing area, as shown in the following illustration:

With a mouse click, you can set the outermost pixel to black, which allows you to set the stretch area of the picture and the content area of the picture. Hold down the SHIFT key and then click Black pixels to reset the black pixels to transparent. The edits on the left are displayed in real time in the right area. There are three pictures in the right preview area, the first picture represents a preview of the vertical stretch, the second picture represents a horizontal stretch of the preview effect, and the third picture represents a preview effect that stretches both horizontally and vertically.

The bottom side of the interface is the panel that controls the parameters.

Zoom
Adjust the zoom to adjust the zoom ratio of the left edit area.

Patch Scale
You can adjust the zoom ratio of the right preview area by adjusting the patch scale.

Show Lock
As we mentioned earlier, we can only edit the outermost 1px border of the picture, if show lock is selected, then when we put the mouse over the left edit area, the Non-editable region is covered with red stripes, and the effect is as follows:

Show content
When we tick the show content, the picture in the right preview area shows the content area in blue.

Show Patches
When show patches is selected, the stretch area in the left edit area will be highlighted in pink.

Show Bad Patches
When we set the stretch area on top or left side to set a contiguous number of pixels, it is possible to cause the picture to be interpolated during stretching with multiple pixel colors causing distortion, if this happens in red.

I hope this article for everyone to use. 9.png Help!