Chapter 工欲善其事 its prerequisite-android SDK tools (7)

1.7 picture stretching without losing true-nine Gongge drawing tool (Draw 9-patch) 1.7.1 What is a "point nine" file

Sometimes, we need to stretch the picture to meet our needs, but once the image is stretched, there is a serious problem-the picture is distorted. So how can you stretch the picture without losing it? Images from the. 9.png format on the Android platform are created to solve this problem. For convenience, here we refer to the picture in. 9.png format as a "point nine" file.

So, let's start by knowing what a point nine file is.

1) The dot nine format picture is a newly created on the Android platform is stretched but not true;

2) point nine format pictures compared to traditional PNG format pictures,. 9 format pictures There is an edge around the picture that is a pixel point, which is used to define the expandable area and content display area of the picture.

The point nine file has the following features:

1 The image in point nine format has the ability to adjust the size of the Android environment adaptively;

2 the image in point nine format allows the developer to define an expandable area where the contents of the expandable area are extended when the image needs to be stretched to fill larger areas than the image itself.

3 a nine-format picture allows the developer to define the content display area for displaying text or other content .

4 the image in point nine format occupies a small resource, generally a few KB or dozens of KB of the picture will become hundreds of bytes, to save traffic and improve loading speed.

1.7. Production of 2-point nine files

the creation of point nine files is a very simple process. Here, let's take an example to see how to use the Draw9-patch tool to make a picture in point nine format.

First, Run the Draw9patch.bat in the Android-sdk\tools directory to start the Draw 9-patch. as shown in 1-37.

Figure 1-37 Starting Draw9-patch

Next, prepare the image footage we need to make, as shown in 1-38.

Figure 1-38 Preparing the footage

then drag the picture we need to make, as shown in the effect 1-39.

Figure 1-39 Importing a picture

on the left is the original area, the right is the stretch preview area, this time we will slide the bottom left corner of the Patchscale to stretch a bit, see the effect, 1-40 shows.

  

Figure 1-40 Raw Extrude

At this time, we can see three kinds of stretching are deformed, the border is very coarse, this is because The default stretch is the overall stretch, but most of the time we just want to stretch the part of the picture, so that we define the stretch area ourselves, we click the left mouse button on the top edge to add the width 4px black line, the effect 1-41 shows.

Figure 1-41 top Edge Processing

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

  

Figure 1-42 left edge processing

this way, the bounding rectangle of the upper and lower edges is no longer stretched, only the area of the 2px height defined by the left edge is stretched.

Finally, we click on file, save the image can be.

Experience Sharing: A nine-format picture four weeks is more than a normal PNG image of a single pixel in the white area, the area can only be seen when the picture is restored and manufactured, when it is not visible after packaging, and the total pixels of the picture will be reduced by 2 pixels, For example, 23x23 pixels in the dot nine format will become 21x21 pixels when the picture is packaged. So we should pay attention to the size when making.

Chapter 工欲善其事 its prerequisite-android SDK tools (7)