Bishop Bo, you make an iOS image stretch that looks like a 9patch effect.

The following picture, originally designed to do the button background:

Button.png, Size: 24x60

Now we use it as the button background, the button size is 150x50:

C code

2. Get the dimensions of the view
4. Cgsize viewsize = self.view.bounds.size;
8. Initialize button
10. UIButton *button = [[UIButton alloc] init];
12. Set Dimensions
14. Button.bounds = CGRectMake (0, 0, 150, 50);
16. Set Location
18. Button.center = Cgpointmake (Viewsize.width * 0.5f, Viewsize.height * 0.5f);
22. Loading pictures
24. UIImage *image = [UIImage imagenamed:@"button"];
26. Set a background picture
28. [Button Setbackgroundimage:image Forstate:uicontrolstatenormal];
32. Add button
34. [Self.view Addsubview:button];

Get view size cgsize viewsize = self.view.bounds.size;//Initialize button UIButton *button = [[UIButton alloc] init];//set Dimensions Button.boun ds = CGRectMake (0, 0, 150, 50);//Set Position Button.center = Cgpointmake (Viewsize.width * 0.5f, Viewsize.height * 0.5f);//Load Picture UI Image *image = [UIImage imagenamed:@ "button"];//set background picture [button Setbackgroundimage:image Forstate:uicontrolstatenormal ];//Add button [Self.view Addsubview:button];

Run:

As you can see, the effect is very poor. The reason is very simple, because the original size is 24x60, and now the entire picture is stretched to 150x50, the more serious is the 4 corners of the picture.

Some people may immediately think of a solution, you call the artist to enlarge the picture is not good, how to stretch all right. Yes, it's a solution, but it's not recommended. The reason is simple: 1. The picture is large, resulting in the installation package is also large, loaded into memory is also large; 2. There is a better solution.

Look at a piece, in fact, the picture will become ugly, completely because the 4 corners are stretched, the middle of the stretching does not significantly smear the appearance. So to think that the small picture will not become ugly when stretched, when the picture is stretched, we just stretch the picture in the middle of a rectangular area, do not stretch the edge portion.

For example, only stretched rectangular areas, the upper and lower edges are not stretched:

iOS provides a very useful API to help us achieve the above features. To iOS 6.0, iOS offers 3 solutions for image stretching, which are described in more detail next.

First, before IOS 5.0

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.

Using this method of UIImage, you can return an extruded UIImage object by setting the end cap width

Java code

1. -(UIImage *) Stretchableimagewithleftcapwidth: (Nsinteger) leftcapwidth topcapheight: (Nsinteger) topcapheight;

-(UIImage *) Stretchableimagewithleftcapwidth: (Nsinteger) leftcapwidth topcapheight: (Nsinteger) topcapheight;

This method has only 2 parameters, the Leftcapwidth represents the left end cover width, and the topcapheight represents the top cover height. The system will automatically calculate the right end cover width (rightcapwidth) and the bottom cover height (bottomcapheight), the algorithm is as follows:

Java code

1. width for picture widths
2. Rightcapwidth = Width-leftcapwidth- 1;
4. Height for picture Heights
5. Bottomcapheight = height-topcapheight- 1

width for picture rightcapwidth = width-leftcapwidth-1;//height bottomcapheight = height-topcapheight-1

After calculation, you will find that the middle stretch area is only 1x1

Java code

1. Stretchwidth is the width of the middle stretchable area
2. Stretchwidth = Width-leftcapwidth-rightcapwidth = 1;
4. Stretchheight is the height of the middle stretchable area
5. Stretchheight = Height-topcapheight-bottomcapheight = 1;

Stretchwidth is the width of the middle stretchable area stretchwidth = Width-leftcapwidth-rightcapwidth = 1;    Stretchheight is the height of the middle stretchable area stretchheight = Height-topcapheight-bottomcapheight = 1;

Therefore, using this method will only stretch the image in the middle of the 1x1 area, and will not affect the edges and corners.

The following shows the use of the method:

Java code

1. Left cover width
2. Nsinteger leftcapwidth = image.size.width * 0.5f;
3. Top cover Height
4. Nsinteger topcapheight = image.size.height * 0.5f;
5. Re-assign Value
6. image = [Image stretchableimagewithleftcapwidth:leftcapwidth Topcapheight:topcapheight];

Left cover width Nsinteger leftcapwidth = image.size.width * 0.5f;//top cover height Nsinteger topcapheight = image.size.height * 0.5f;//re-assign value image = [Image stretchableimagewithleftcapwidth:leftcapwidth Topcapheight:topcapheight];

When this method is called, the original image does not change, resulting in a new stretched uiimage, so the return value should be assigned back to the image variable in line 6th

Operating effect:

Can be found, the picture is very beautiful to show out

Attention:

1. This method expires when iOS 5.0 comes out.

2. This method only stretches the 1x1 area.

Second, IOS 5.0

In iOS 5.0, UIImage also has a new way to handle picture stretching issues

Java code

1. -(UIImage *) Resizableimagewithcapinsets: (uiedgeinsets) capinsets

-(UIImage *) Resizableimagewithcapinsets: (uiedgeinsets) capinsets

This method only receives a uiedgeinsets type parameter, which can be specified by setting the left, right, top and bottom of the uiedgeinsets, respectively, by specifying the width of the left cover, the width of the end cap, the top cover height, the bottom cover height

Java code

1. cgfloat top = 25; //  Top cover height   
2. cgfloat bottom = 25 ; < span class= "comment" >//  bottom cover height   
3. cgfloat left = 10; //  left cover width   
4. cgfloat right  = 10; //  right end cover width   
5. Uiedgeinsets insets = uiedgeinsetsmake (top, left, bottom, right);   
6. //  re-assign    after scaling;
7. image = [image  resizableimagewithcapinsets:insets];  

CGFloat top = 25; Top cover height cgfloat bottom = 25; Bottom cover height cgfloat left = 10; Left cover width cgfloat right = 10; Right end cover width uiedgeinsets insets = Uiedgeinsetsmake (top, left, bottom, right);//re-assign value after scaling image = [Image Resizableimagewithcapin Sets:insets];

Operating effect:

Third, IOS 6.0

In iOS6.0, UIImage also provides a way to process picture stretching

Java code

1. -(UIImage *) Resizableimagewithcapinsets: (uiedgeinsets) capinsets Resizingmode: (uiimageresizingmode) ResizingMode

-(UIImage *) Resizableimagewithcapinsets: (uiedgeinsets) capinsets Resizingmode: (uiimageresizingmode) ResizingMode

Comparing the methods in iOS5.0, only one more Uiimageresizingmode parameter is used to specify the pattern of the extrusion:

• Uiimageresizingmodestretch: Stretch mode to fill a picture by stretching the rectangular area specified by the Uiedgeinsets
• Uiimageresizingmodetile: Tile mode, fills the picture by repeating the uiedgeinsets specified rectangular area

Java code

1. cgfloat top = 25; //  Top cover height   
2. cgfloat bottom = 25 ; < span class= "comment" >//  bottom cover height   
3. cgfloat left = 10; //  left cover width   
4. cgfloat right  = 10; //  right end cover width   
5. Uiedgeinsets insets = uiedgeinsetsmake (top, left, bottom, right);   
6. //  specified as stretch mode, and re-assigns values after scaling   
7. image = [ image resizableimagewithcapinsets:insets resizingmode:uiimageresizingmodestretch];  

CGFloat top = 25; Top cover height cgfloat bottom = 25; Bottom cover height cgfloat left = 10; Left cover width cgfloat right = 10; Right end cover width uiedgeinsets insets = Uiedgeinsetsmake (top, left, bottom, right);//specified as stretch mode, re-assigned value after scaling image = [Image Resizableimagew Ithcapinsets:insets Resizingmode:uiimageresizingmodestretch];

Operating effect:

Bishop Bo, you make an iOS image stretch that looks like a 9patch effect.