Used in IOS. 9 figure

Background

.9 figure from Android. To design a set of graphs that are compatible with Android and iOS, use the. 9 graph to stretch the picture to fit different screens. There is no. 9 diagram concept in iOS, you can only learn about the Android. 9 chart and then simulate the Android method.

What is. 9 pic

That is, before the image suffix, there are. 9 of pictures, such as Pic.9.png, PIC1.9.JGP, and so on, are called. 9 images. And a pixel is added around the original image, where the relevant area is identified by a black line on that pixel.

.9 Effect of the picture

The effect of the. 9 picture is that the image is not distorted when the image is stretched, and the specific area is determined by the left and top black lines in a circle of pixels at the edge of the. 9 chart.

In Android. 9 Figure Introduction

.9 figure is actually in the original picture around the addition of a pixel, the popular point is that the picture is larger than the original image of a circle, the more out of the circle is transparent pixels. The place where we need to draw the black line is where we draw on that lap of transparent pixels.

As shown, a circle of transparent pixels is added around the original diagram. Where: Around are named L, T, R, B.

The area drawn in L: the longitudinal area for stretching.

Plot the area in T: the transverse area for stretching.

Plot the area in R: the vertical range that is used to display the foreground.

The area plotted in B: the horizontal range used to display the foreground.

For example, such as:

The corresponding black lines are added around the diagram.

Stretch areas , such as:

Red Box Area: An area that represents a longitudinal stretch, that is, when the picture needs to be stretched vertically, it specifies only the extruded red area, and the other areas are not stretched vertically.

Green Box Area: An area that represents a horizontal stretch, that is, when the picture needs to be stretched horizontally, it specifies only the extruded green area, and the other areas are not stretched horizontally.

It is clear that the red and green parts intersect both horizontally and vertically.

the display area of the foreground, such as:

Blue Area: Indicates the vertical range that the foreground can display. That is, where the top of the foreground can be displayed and where it can be displayed at the bottom.

Yellow area: Indicates the horizontal range that the foreground can display. That is, where the leftmost side of the foreground can be displayed and where the rightmost can be displayed.

Blue and yellow intersect: Represents the area where the entire foreground can be displayed. An area is rectangular, blue specifies the upper and lower bounds, yellow specifies the left and right borders, and both of course also stipulate a rectangular area.

Picture stretch in iOS:

1. Before iOS5, use-(UIImage *) Stretchableimagewithleftcapwidth: (Nsinteger) leftcapwidth topcapheight: (Nsinteger) Topcapheight; This method stretches the picture.

2. After iOS5, use-(UIImage *) Resizableimagewithcapinsets: (uiedgeinsets) capinsets;

Or-(UIImage *) Resizableimagewithcapinsets: (uiedgeinsets) capinsets Resizingmode: (uiimageresizingmode) ResizingMode ; This method stretches or tiles the picture.

There is a concept called end caps in iOS that specifies which part of the picture does not have to be stretched. For example, the black represents the rectangular area that needs to be stretched, and the edges that do not need to be stretched up or down are called end caps.

As mentioned above, in iOS you want to stretch the picture, you have to determine the area to be stretched, and this area is determined by the values of top, left, bottom, and right four direction, this part of the concept and Android in the. 9 chart is not the same, but the concept of stretching area is not too much.

With these concepts in view, we can simulate Android processing in iOS. 9 drawing mode.

We used a third-party library: Lvninepatchimage. 9 Figure processing. Because a pixel of transparency is added around the original image. Only the alpha value of the black line is 1, the remainder is transparent, and the alpha value is 0. This logical relationship allows you to find the corresponding left and upper black line region position. Then stretch the picture using the stretch method provided by the iOS system.

The main things that the library mainly do are:  

1. Through the class method + (unsigned char*) Getrgbasfromimage: (uiimage*) Image count: (Nsinteger) count; the RGB value of all pixel points to get the picture includes an alpha value.

2. Via method inline static cgfloat getimageaphaatpoint (const unsigned char* rawdata, nsinteger width, nsinteger height, Nsinteg Er pointx, Nsinteger pointy); To find the alpha value of the pixel between pointx to pointy.

If pointy is always 0,pointx from 1 to the width of the picture, you can find all the alpha values of a pixel at the top of the image. When Pointx is always 0,pointy from 1 to the height of the image, it can find all the alpha values of a pixel on the left side of the image.

3. Then traverse the found top and left alpha array values, and when alpha is 1 the contiguous area is where the black line is located.

4. Then call the method + (uiimage*) crop: (CGRect) R image0: (uiimage*) image0; crop the pixel area around the image, leaving only the correct (most primitive) picture in the middle.

5. Finally, based on the location of the black line, the value of top, left, bottom and right end caps is calculated, and the call-(UIImage *) Resizableimagewithcapinsets: (uiedgeinsets) capinsets ; method to stretch or tile a picture.

Reference links

http://blog.csdn.net/shimiso/article/details/41079847

Http://www.cnblogs.com/mjios/archive/2013/02/26/2934280.html

Used in IOS. 9 figure