IOS Picture Stretching tips _ios

Looking at the mobile market, a mobile app, to long-term in the mobile market foothold, at least to include the following elements: Practical features, a strong user experience, gorgeous and concise appearance. Behind the gorgeous appearance, the art of hard design, but if the developers do not know how to reasonably display these well-designed pictures, will spoil the design, failed.

For example, the following picture, originally designed to do the button background:

Button.png, Size: 24x60

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

Get the size of view 
cgsize viewsize = self.view.bounds.size; 
 
Initialization button 
UIButton *button = [[UIButton alloc] init]; 
Set dimensions 
button.bounds = CGRectMake (0, 0, N, m); 
Set position 
Button.center = Cgpointmake (Viewsize.width * 0.5f, Viewsize.height * 0.5f); 
 
Load Picture 
uiimage *image = [uiimage imagenamed:@ "button"]; 
Set background picture 
[button Setbackgroundimage:image forstate:uicontrolstatenormal]; 
 
Add a button 

Run Effect chart:

As you can see, the effect is very poor. The reason is very simple, because the original size is 24x60, now the whole picture is stretched to 150x50, more serious is the picture of the 4 corners.
Some people may immediately think of a solution, you call art to make the picture a little bit better, how to stretch all right. Yes, it's a solution, but it's not recommended. The reason is very simple: 1. Large picture, resulting in large installation package, loaded into memory is also large; 2. There are better solutions.
A closer look at the picture, in fact, the picture will become ugly, completely because the 4 corners are stretched, the middle of the stretch does not significantly demonize the appearance. So if you want the small picture to be stretched and not become ugly, when the picture stretches, we just stretch the middle of the picture in a rectangular area, do not stretch the edge of the part.
For example, only stretch the rectangular area of the following figure, the top and bottom edges are not stretched:

iOS provides a very useful API to help us achieve these functions. By the end of iOS 6.0, iOS offers 3 kinds of picture stretching solutions, followed by a detailed description of each of these scenarios.
First, IOS 5.0 ago
There is a concept called end cap in iOS that specifies which part of the picture does not need to be stretched. For example, in the following figure, the black represents the rectangular area that needs to be stretched, and the edges that don't 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 width of the end cover

Copy Code code as follows:

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

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

Width for picture widths 
rightcapwidth = width-leftcapwidth-1; 
 
Height for picture Heights 
bottomcapheight = height-topcapheight-1 

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

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

Therefore, using this method only stretches the 1x1 area in the middle of the picture and does not affect the edges and corners.
The following shows the use of the method:

Left cover width 
nsinteger leftcapwidth = image.size.width * 0.5f; 
Top cover Height 
Nsinteger topcapheight = image.size.height * 0.5f; 
Re-assignment 
image = [Image stretchableimagewithleftcapwidth:leftcapwidth Topcapheight:topcapheight]; 

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

Can be found, the picture is very beautiful to show the
Note:
1. This method expires when iOS 5.0 comes out.
2. This method only stretches the 1x1 area.

Two, IOS 5.0
in iOS 5.0, UIImage has a new way to handle picture stretching.

Copy Code code as follows:

-(UIImage *) Resizableimagewithcapinsets: (uiedgeinsets) capinsets

This method receives only one uiedgeinsets type of parameter, and can specify the left cover width, the right end cover width, the top cover height, and the bottom cover height by setting the Uiedgeinsets's left, right-click, tops, and bottom.

CGFloat top = 25; Top cover Height 
cgfloat bottom = 25;//Bottom cover height 
cgfloat left = 10;//Left cover width 
cgfloat right = 10;//r/N cover width 
uiedgeins ETS insets = Uiedgeinsetsmake (top, left, bottom, right); 
Re-assign values after scaling 

Operation Effect:

Third, IOS 6.0
in iOS6.0, UIImage also provides a way to handle picture stretching

Copy Code code as follows:

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

Comparing the methods in iOS5.0, only one more Uiimageresizingmode parameter is used to specify the mode of stretching:
Uiimageresizingmodestretch: Stretch mode, which fills the picture by stretching the rectangular area specified by uiedgeinsets
Uiimageresizingmodetile: Tile mode to populate the picture by repeatedly displaying the rectangular area specified by uiedgeinsets

CGFloat top = 25; Top cover Height 
cgfloat bottom = 25;//Bottom cover height 
cgfloat left = 10;//Left cover width 
cgfloat right = 10;//r/N cover width 
uiedgeins ETS insets = Uiedgeinsetsmake (top, left, bottom, right); 
Specified as stretch mode, after scaling the value 
image = [Image resizableimagewithcapinsets:insets Resizingmode:uiimageresizingmodestretch]; 

Operation Effect:

The above is the entire content of this article, I hope to be proficient in the iOS picture stretching skills help.