Graphics stretching problem solutions for IOS application development _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:

Copy Code code as follows:

Get the size of the view
Cgsize viewsize = self.view.bounds.size;

Initialize button
UIButton *button = [[UIButton alloc] init];
Set Dimensions
Button.bounds = CGRectMake (0, 0, 150, 50);
Set Location
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
[Self.view Addsubview: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:
UIButton to achieve background stretching, that is, the picture at both ends do not stretch the middle stretching method has the following two kinds:

The first method is simple and more widely used. The idea is to directly stretch the image that you want to setbackgroundimage, the code is as follows:

Copy Code code as follows:

UIImage *image = [uiimage imagenamed:@ "Image.png"];
image = [Image Stretchableimagewithleftcapwidth:floorf (IMAGE.SIZE.WIDTH/2) Topcapheight:floorf (IMAGE.SIZE.HEIGHT/2 )];

After setting the left end cap, rightcapwidth = Image.size.width-(image.leftcapwidth + 1); This means that a pixel in the middle of the picture is used for stretching. The vertical direction is ditto. After setting, you can automatically stretch the image regardless of what control it is placed in.

Copy Code code as follows:

UIImage *buttonimage = [uiimage imagenamed:@ "Contact.png"];
Buttonimage = [Buttonimage Stretchableimagewithleftcapwidth:floorf (BUTTONIMAGE.SIZE.WIDTH/2) TopCapHeight:floorf ( BUTTONIMAGE.SIZE.HEIGHT/2)];

UIImage *buttonimageselected = [uiimage imagenamed:@ "Contactselected.png"];
Buttonimage = [Buttonimage Stretchableimagewithleftcapwidth:floorf (BUTTONIMAGE.SIZE.WIDTH/2) TopCapHeight:floorf ( BUTTONIMAGE.SIZE.HEIGHT/2)];

UIButton *button = [UIButton buttonwithtype:uibuttontypecustom];
Button.frame = CGRectMake (0, 0, 240, 44);
[Button Setbackgroundimage:buttonimage Forstate:uicontrolstatenormal];
[Button setbackgroundimage:buttonimageselected forstate:uicontrolstatehighlighted];
Button.center = Cgpointmake (160, 240);
[Button settitle:@ "button" forstate:uicontrolstatenormal];
[Button settitle:@ "ButtonClick" forstate:uicontrolstatehighlighted];
[Self.view Addsubview:button];

The second method is to add a uiimageview to the UIButton, stretch the ImageView, and then set the button background to Clearcolor and so on. Put the ImageView into the button and sendtoback to get the effect. The code is as follows:

Copy Code code as follows:

Just imageview the stretched code

Uiimageview *strechtest = [[Uiimageyiview alloc] initwithimage:[uiimage imagenamed:@ "Contact.png"]];
[Strechtest Setcontentstretch:cgrectmake (0.5f, 0.5f, 0.F, 0.F)];
CGRect frame = strechtest.frame;
Frame.size.width + 100;
Strechtest.frame = frame;

Put the ImageView in the button and set to back
UIButton *button = [UIButton buttonwithtype:uibuttontypecustom];
Button1.frame = frame;
Button1.center = Cgpointmake (160, 140);
[Button1 Addsubview:strechtest];
[Button1 Sendsubviewtoback:strechtest];
[button1 Setbackgroundcolor:[uicolor Clearcolor]];
[Button1 settitle:@ "button" forstate:uicontrolstatenormal];
[Button1 settitle:@ "ButtonClick" forstate:uicontrolstatehighlighted];
[Self.view Addsubview:button];

Effect: