Chapter 1 to do this, you must first use the Android SDK (7) and androidsdk

Chapter 1 to do this, you must first use the Android SDK (7) and androidsdk
1.7 image stretch without distortion-jiugongge plotting tool (Draw 9-Patch) 1.7.1 what is the "" File

Sometimes, we need to stretch images to meet our needs, but some images will produce a very serious problem-image distortion. So how can we stretch images without distortion? Images in the .9.png format on the androidplatform are generated to solve this problem. For convenience, we call the .9.png format as a "" file.

So let's take a look at what a file is.

1) images in the format are a new feature created on the Android platform;

2) compared with traditional png images ,. 9. A Format Image consists of an edge in a circle of pixels around the image. The edge is used to define the expandable exhibition area and content display area of the image.

Point 9 files have the following features:

1) images in format can be adjusted automatically in the Android environment;

2) images in the format allow developers to define scalable areas. The content of the expanded area is extended when an image needs to be extended to fill areas larger than the image itself.

3) Pictures allow developers to define content display areas for displaying text or other content

4) images in the format occupy a small amount of resources. Generally, a picture of several KB or dozens of KB is converted into several hundred bytes, which helps to save traffic and increase loading speed.

1.7.2 File Creation

It is a very simple process to create a file. Here, let's take an example to see how to use a Draw9-Patch tool to make a picture in the format.

First, run Draw9Patch. bat in the Android-sdk \ tools directory to start Draw 9-Patch. 1-37.

Figure 1-37 start the Draw9-Patch

 

Next, prepare the image materials we need to prepare, as shown in figure 1-38.

Figure 1-38 prepare materials

 

Drag the image we want to create, as shown in figure 1-39.

Figure 1-39 import an image

 

The source image area is on the left, and the preview area is stretched on the right. At this time, we will stretch it by sliding the Patchscale in the lower left corner to see the effect, as shown in 1-40.

Figure 1-40 original stretch

 

At this time, we can see that the three kinds of stretching are deformed, and the border is very thick, this is because the default stretch is the overall stretch, but many times we just want to stretch a part of the image, so that, to define the stretch area, click the left mouse button on the outermost side of the top side to add a black line with a width of 4 PX, as shown in figure 1-41.

Figure 1-41 top edge processing

 

We can see that the border in the horizontal direction is no longer stretched. We can add a black line to the outermost side of the left side, as shown in figure 1-42.

Figure 1-42 left side Processing

 

In this way, the upper and lower sides of the border are no longer stretched, but the left side is stretched 2 PX height.

Finally, click File to save the image.

 

Experience Sharing: The image in the format of has a white area with a pixel bit more than the normal png image. This area can be seen only when the image is restored and manufactured, it cannot be seen after packaging, and the total pixels of the image will be reduced by 2 pixels. For example, if an image in the format of 23x23 pixels is packaged, it will become 21x21 pixels. Therefore, we should be aware of the size when making it.