Use and production of .9.png images in andorid.png

Use and production of .9.png images in andorid.png

We have a TextView in which the content can be dynamically changed through code. We want to use an image as the background of TextView to achieve bubble text effect similar to that in Mobile QQ conversations.

TextView is defined as follows:

The background image is as follows:

The final result of TextView is as follows:

The dotted line in is the outer contour of TextView. We define the width and height of TextView as wrap_content and set gravity to center, but it still does not implement our ideal state. Text in TextView is centered relative to the entire image, but we want to center the text in the green rectangle.

The text in is short, but the problem is not obvious. When we set the text in TextView to a certain length, the problem becomes more prominent, as shown below:

The above picture exposes two problems:

Our original images gradually fade from top to bottom green with shadows on the right and bottom. When the background image is stretched to the size, the image distortion is severe: the four corners of the message box are blurred; the shadows are blurred and enlarged, Which is ugly; the green is not clear, and the gradient effect is basically invisible.

The text is out of the message box range of the image and disorganized.

The reason for the above problem is that the entire background image is fully stretched, and the width proportion of the stretched image is different from that of the original image. If you only stretch the area in the message box of the original image, the above problem can be solved. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Examples/examples + NDQ0rvPwsu1w/examples + examples/KjrM7Sw8e/examples +/examples/samples k3j7mf40/examples/Khow0KPHA + examples/Examples = "write image description here" src = "http://www.bkjia.com/uploads/allimg/160107/0414223048-3.png" title = "\"/>

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

We can see that all the text is centered in the rectangle of the message box, and the image is not distorted, keeping the texture of the original image.

We can carefully observe the message.9.png image on the top, and find that the outermost layer of the image contains black spots and black lines. Specifically:

You can set one or more vertices in the top 1px border of the image to black. In this example, we use a black line segment, these black points define areas in the image that can be horizontally stretched. You can also set one or more dots in the 1px border on the left to black. In this example, we only use one black pixel, these black points define areas in the image that can be stretched vertically. The intersection between the point of horizontal stretch and the point of vertical stretch defines the area of the rectangle that can be stretched in the image, thus stretching part of the area in the image.

We can selectively set black line segments for the bottom and right sides of the image, and use these black lines to define the content area of the image. When the style in the image is irregular, it is very important to define the content area of the image. Text in TextView will be placed in the content area. Sets a black line segment for the 1px border at the bottom of the image, which defines the horizontal content area of the image. Sets a black line segment for the 1px border on the rightmost side of the image, which defines the vertical content area of the image. A rectangular area composed of a horizontal line segment and a vertical line segment forms a content area. If the image content area is not defined, the image content area is the entire image area.

.9.png pixels on the outermost side are either pure transparent, pure white, or pure black. Do not set other colors or transparency.

We can use photoshopto edit an existing .png to .9.png. In fact, Android also provides the editing tool .9.png. Android/sdk/toolsdirectory contains many other tools. You can use the draw9patchtool in this directory to edit .png images.

The procedure is as follows:

You can use the command line or double-click to start draw9patch to display the GUI.

After you Open Draw 9-patch.pdf, you can drag a .png image directly to the GUI, or Open the .png image using the "Open 9-patch# menu" in the File menu. The left side is the image editing area, and the right side is the preview area. In the editing area, you can set a Black Point for the four outer borders of the image, as shown in:

By clicking the mouse, you can set the pixels in the outermost layer to black. In this way, you can set the stretch area and content area of the image. Press Shift and click black pixels to set the black pixels to transparent. The editing on the left is displayed in the right area in real time. There are three images in the preview area on the right. The first image indicates vertical stretch preview, and the second image indicates horizontal stretch preview, the third image represents a preview of the horizontal and vertical stretching at the same time.

On the lower side of the interface is the control parameter panel.

Zoom
You can adjust the Zoom ratio of the left-side editing area by adjusting Zoom.

Patch scale
You can adjust the scale of the preview area on the right by adjusting the Patch scale.

Show lock
As we mentioned earlier, we can only edit the 1px border of the outermost layer of the image. If Show lock is selected, when we move the cursor to the editing area on the left, the uneditable area will be covered with red stripes, as shown in the following figure:

Show content
When Show content is selected, the image in the preview area on the right shows the content area in blue.

Show patches
When Show patches is selected, the stretch area in the left-side editing area is highlighted in pink.

Show bad patches
When we set multiple consecutive pixels in the top or left side of the stretch area, it may cause distortion caused by interpolation of multiple pixel colors during the stretch, if this happens, it will be displayed in red.

Hope this article is helpful for everyone to use .9.png!