iOS picture stretching tips

Looking at the mobile market, a mobile app, in order to long-term mobile market foothold, at least to include the following elements: Practical features, a strong user experience, gorgeous and concise appearance. Gorgeous appearance behind, without the hard work of the design, but if developers do not know how to properly display these design good pictures, will spoil the design, fall short.

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

2. Button.png, Size: 24x60
6. Now we use it as the button background, the button size is 150x50:
10. (void) Viewdidload
14. 2{
18. 3[superviewdidload];
22. 4//get the dimensions of the view
26. 5cgsizeviewsize=self.view.bounds.size;
30. 6
34. 7//Initialize button
38. 8uibutton*button=[[uibuttonalloc]init];
42. 9//Setting Dimensions
46. 10button.bounds=cgrectmake (0,0,150,50);
50. 11//Setting Location
54. 12button.center=cgpointmake (viewsize.width*0.5f,viewsize.height*0.5f);
58. 13
62. 14//Loading Pictures
66. 15uiimage*image=[uiimageimagenamed:@ "button"];
70. 16//setting a background image
74. 17[buttonsetbackgroundimage:imageforstate:uicontrolstatenormal];
78. 18
82. 19//Add button
86. 20[self.viewaddsubview:button];
90. 21}

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. By iOS6.0, iOS offers 3 image stretching solutions, which are described in detail in the next step.

First, before iOS5.0

There is a concept called End caps (endcap) 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

2. (uiimage*) Stretchableimagewithleftcapwidth: (Nsinteger) Leftcapwidthtopcapheight: (Nsinteger) topCapHeight;
6. 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:
10. 1//width for picture width
14. 2rightcapwidth=width-leftcapwidth-1;
18. 3
22. 4//height for picture height
26. 5bottomcapheight=height-topcapheight-1
30. After calculation, you will find that the middle stretch area is only 1x1
34. 1//stretchwidth is the width of the middle stretchable area
38. 2stretchwidth=width-leftcapwidth-rightcapwidth=1;
42. 3
46. 4//stretchheight is the height of the middle stretchable area
50. 5stretchheight=height-topcapheight-bottomcapheight=1;
54. Therefore, using this method will only stretch the image in the middle of the 1x1 area, and will not affect the edges and corners.
58. The following shows the use of the method:
62. 1//Left cover width
66. 2nsintegerleftcapwidth=image.size.width*0.5f;
70. 3//Top Cover Height
74. 4nsintegertopcapheight=image.size.height*0.5f;
78. 5//re-assigning values
82. 6image=[imagestretchableimagewithleftcapwidth:leftcapwidthtopcapheight: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 the iOS5.0 comes out.

2. This method only stretches the 1x1 area.

Second, iOS5.0

In iOS5.0, UIImage has a new way to deal with the drawing problem of the picture.

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

Copy Code

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

1. 1cgfloattop=25;//Top Cover Height
3. 2cgfloatbottom=25;//Bottom Cover Height
5. 3cgfloatleft=10;//Left cover width
7. 4cgfloatright=10;//right End cover width
9. 5uiedgeinsetsinsets=uiedgeinsetsmake (Top,left,bottom,right);
11. 6//scaling and re-assigning values
13. 7image=[imageresizableimagewithcapinsets:insets];

Operating effect:


Third, iOS6.0

1. In iOS6.0, UIImage also provides a way to process picture stretching
3. -(uiimage*) Resizableimagewithcapinsets: (uiedgeinsets) Capinsetsresizingmode: (Uiimageresizingmode) ResizingMode
5. Comparing the methods in iOS5.0, only one more Uiimageresizingmode parameter is used to specify the pattern of the extrusion:
7. Uiimageresizingmodestretch: Stretch mode to fill a picture by stretching the rectangular area specified by the Uiedgeinsets
9. Uiimageresizingmodetile: Tile mode, fills the picture by repeating the rectangular area specified uiedgeinsets
11. 1cgfloattop=25;//Top Cover Height
13. 2cgfloatbottom=25;//Bottom Cover Height
15. 3cgfloatleft=10;//Left cover width
17. 4cgfloatright=10;//right End cover width
19. 5uiedgeinsetsinsets=uiedgeinsetsmake (Top,left,bottom,right);
21. 6//specified as stretch mode, re-assigned after scaling
23. 7image=[imageresizableimagewithcapinsets:insetsresizingmode:uiimageresizingmodestretch];

Copy Code

Operating effect:

iOS picture stretching tips