Andorid. The use and production of 9.png images

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

TextView is defined 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 image looks like this:

The effect of the final TextView is as follows:

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

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

The picture above exposes two problems:

1. Our original picture is the top-down green gradually fades, and the right and the bottom side have shadows. When the background image is stretched to a size, the picture is distorted: the Four corners of the message box are blurred, the shadows are blurred, the shades are blurry, the green is not clear, and the gradient effect is largely invisible.

2. The text has gone beyond the picture's message box range, disorganized.

This problem occurs because the entire background map is fully stretched, and the width and height ratio of the stretched image is different from the width and height of the original picture. If you stretch only the area in the original Picture rectangle message box, you can resolve the above problem.

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

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

1. First, the. 9.png format picture itself is a. png image, but the image is suffixed with. 9 as the file name.
2. We can convert a. png image to a. 9.png picture,. 9.png images are more than normal. png images have a 1px border on the outermost edge of the picture, and we can define the extruded area of the image and the content area of the picture on the outer 1px border.

We edit the original background map to get the following picture of the file named Message.9.png:

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

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

We can take a closer look at the above message.9.png this picture, you can find the image of the outermost four sides have black dots, black lines, specifically:

1. You can set one or more points in the top 1px border of the picture to black, in this case we used a black line segment that defines the area in the picture that can be stretched horizontally. You can also set one or more points in the leftmost 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. The cross-stretched pixel points intersect with the vertically stretched pixel points to define the extruded rectangular area of the picture, which allows you to stretch a portion of the image.

2. We can selectively set the black line on the bottom and right side of the picture, and use these black segments to define the content area of the picture. When the pattern in our image is irregular, it is important to define the content area of the image, and the text in the TextView will be placed in the content area. Sets the bottom 1px border of the picture to a black line segment that defines the horizontal content area of the picture. Sets the rightmost 1px border of the picture to a black line segment that defines the vertical content area of the picture. A rectangular area consisting of a horizontal segment and a longitudinal segment makes up the content area. If you do not define the content area of the picture, the content area of the picture is the entire picture area.

3. The pixels in the outer four sides of the 9.png 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, Android/sdk/tools directory has a lot of useful tools, we can use the Draw9patch tool in this directory to edit. png images.

Use the following steps:

The

1. can be displayed through the command line or directly by double-clicking the Draw9patch to display the GUI interface.

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

3. With a mouse click to set the outermost pixel to black, this way you can set the stretch area of the picture and the content area of the picture. Shift-click the black pixel to reset the black pixel to transparent. The edits on the left are displayed in real time in the right area. There are three pictures in the right-hand preview area, the first picture represents a preview of the stretch in the vertical direction, the second picture shows a preview of the stretch in the horizontal direction, and the third picture shows a preview of the stretch in both horizontal and vertical directions.

4. Is the panel that controls the parameters on the bottom side of the interface.
   

   • Zoom
     Adjusts the zoom to the left editing area by adjusting zoom.

   • Patch scale
     Adjusts the scale of the right-side preview area by adjusting patch scales.

   • Show Lock
     As we mentioned earlier, we can only edit the outer 1px border of the picture, if Show lock is checked, then when we place the mouse on the left side of the editing area, the non-editable area will be shaded with red stripes, as shown below:
     

   • Show content
     When we tick show content, the image in the right-hand preview area shows the area in blue.

   • Show Patches
     When show patches is checked, the stretch area in the edit area on the left is highlighted in pink.

   • Show bad patches
     when we set a contiguous number of pixels on top or left side, it is possible to cause distortion when multiple pixel colors are interpolated when the picture is stretched, and if that happens, it will appear in red.

I hope this article is helpful to everyone using. 9.png!

Related reading:
My Android Blog Finishing summary

Andorid. The use and production of 9.png images