9 Patch png up or down

Objective:

9 Patch PNG image, with the extension. 9.png, is a standard PNG image that includes an additional 1-pixel boundary, which is described by the boundary to achieve the desired stretch effect. Android introduced this kind of PNG extension format to solve the problem that the same picture is deformed after being stretched, which provides an elegant solution for resource reuse.

Tools:

To preview or edit a 9patch image, use the Draw9patch tool that comes with the Android SDK, which is in the tools directory of the Android SDK.

This article mainly introduces the effect of the top and left four strokes in 9 patch images:

These four strokes can be divided into two categories:

1) used to describe the area that can be stretched----------------------determined by the left and top strokes;

2) The area used to describe the internal spacing-------------------determined by the right and bottom strokes;

Instance:

Here are a few examples that will have a more intuitive understanding of the effects of each stroke.

(1) No stroke

is a PNG without any strokes, and for scaling, it is equivalent to the scale effect of image. Can obviously see the right side of the three small picture, four sides have varying degrees of deformation;

(2) left stroke and top stroke-----(custom stretch area)

Only the left stroke, the picture in the vertical direction as labeled, is divided into three parts, when the picture is stretched vertically, the 1,3 area will be found to remain, 2 areas are stretched, and when the picture is stretched horizontally, the effect is the same as the situation (1).

Only the upper stroke is similar to the left stroke, except that when the picture is stretched, for example, there are also 1, 3 areas to hold, and 2 areas to be stretched.

When the upper stroke and the left stroke exist simultaneously, the most we can do with Android, we'll look at the previous image:

Two strokes, the picture is divided into 9 parts, I think this is the origin of the 9 patch name O (∩_∩) O, from the effect we can see, in the transverse longitudinal stretching process 1,3,7,9 always remain unchanged, which is exactly the same as four fillet in any stretch after no deformation ; 2 and 8 remain in the longitudinal stretch, while the 4,6 is maintained during transverse stretching; 5 is the protagonist who prepares to be stretched at that moment.

(3) Right stroke and bottom stroke

This is actually an optional operation, and the two strokes customize the internal spacing after the stretch effect. This effect appears only when you use a 9patch image for the background of the controls such as layout or TextView. Continue to explain the problem.

In the above figure, the ABCD four length is marked, which is separated by the right stroke and the bottom stroke, and the child control corresponds to the padding of the parent control relative to the upper and lower left and next of the parents when the picture is taken as the background of the parent control.

Examples are as follows:

The ABCD, which is marked on the way, corresponds to the ABCD area one by one, so that we have one more direct 9patch image to set the padding. End..

9 Patch png up or down