Several ways to stretch pictures in iOS

If the following picture is used to make the background image of the button, the original size is ( 128 * 112 )

button background picture. png

We use the code to set this image as the background image of the button, if we set the width height of the created button to: ( W=200, H=50 ) The code is as follows:

//Viewcontroller.miOS Picture stretching summary//Created by Sunshine on 15/6/29.Copyright (c) 2015 Yotrolz. All rights reserved.//#import"ViewController.h"@interfaceViewcontroller ()@end@implementationviewcontroller-(void) Viewdidload {[Super Viewdidload];Create a buttonUIButton *BTN = [UIButton Buttonwithtype:Uibuttontypecustom];Set the button's frame btn.frame = cgrectmake (100, 300, 200, 50); //load picture uiimage *image = [ UIImage imagenamed:@ "Chat_send_nor"]; //set button background image [Btn setbackgroundimage:image forstate: UIControlStateNormal]; //Add a button to the controller's view [self.view ADDSUBVIEW:BTN];} -(void) didreceivememorywarning {[super Didreceivememorywarning]; //Dispose of any of the resources that can be recreated.}  @end             

This is what you find the results of running completely unexpected (rubbing without limit),

Run 1.png

Cause Analysis: Is the original size W=128 * H=112 of the picture stretched into W=200, H=50 ;
Solution:
1. Find the artist mm redo a 较大 picture, so that the package will be larger in the future, occupy more space; if we want to change the button frequently frame , you want to let mm Kill your rhythm ~ ~, obviously not feasible;
2. Apple provides us with an API for image stretching, which we can implement directly using code, is not very bull X;

Take advantage of Apple's API to stretch your images (there are currently four found):
One, way one (before iOS5):
For example: Set,,, the topCapHeight leftCapWidth black area of the picture is the extent of the bottomCapHeight lerightCapWidth image stretching, that is, the edges will not be stretched.
We can set the following methods:

Official API Description
-Stretchableimagewithleftcapwidth:topcapheight: (IOS 5.0)
Creates and returns a new image object with the specified cap values.

Note: This method has only 2 parameters, which leftCapWidth represent the width of the left cover and the height of the topCapHeight upper cover. 系统会自动计算The right end cover width rightCapWidth and bottom cover height bottomCapHeight , the algorithm is as follows:

// 系统会自动计算rightCapWidthrightCapWidth = image.width - leftCapWidth - 1;  // 系统会自动计算bottomCapHeightbottomCapHeight = image.height - topCapHeight - 1

In this way, in fact, we can only stretch the image 1 * 1 , so how to stretch it will not affect the appearance of the picture;
The specific code is as follows:

 //load picture uiimage *image = [uiimage imagenamed:@ "Chat_send_nor"]; //set the left End cover width nsinteger leftcapwidth = Image.size.width * 0.5; //set the top end cap height nsinteger topcapheight = Image.size.height * 0.5; uiimage *newimage = [Image stretchableimagewithleftcapwidth:leftcapwidth TopCapHeight: Topcapheight]; //set button background image [Btn setbackgroundimage:newimage forstate: UIControlStateNormal];               

Operating effect:

Run 2.png

Way two: (iOS5)
Use the following method:

// 官方API说明- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets NS_AVAILABLE_IOS(5_0); // create a resizable version of this image. the interior is tiled when drawn.

typedef struct UIEdgeInsets {    CGFloat top, left, bottom, right;      // specify amount to inset (positive) for each of the edges. values can be negative to ‘outset‘} UIEdgeInsets;

Note: UIEdgeInsets in CGFloat top, left, bottom, right is used to set the upper end cover, the left cover, the bottom cover, the right side cover size ( 逆时针方向 );

The specific code is as follows:

    Loading picturesUIImage *image = [UIImage imagenamed:@ "Chat_send_nor"];Set the value of the end capCGFloat top = Image. Size. Height *0.5;CGFloat left = image. Size. Width * 0.5; CGFloat bottom = image. Size. Height * 0.5; CGFloat right = Image. Size. Width * 0.5; uiedgeinsets edgeinsets = uiedgeinsetsmake (top, left, bottom, right); //Stretch picture UIImage *newimage = [Image resizableimagewithcapinsets:edgeinsets]; //Set the background image of the button [btn setbackgroundimage:newimage forstate:uicontrolstatenormal];     

Operating effect:

Run 3.png

Way three: (IOS6)
Use the following method:

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode NS_AVAILABLE_IOS(6_0); // the interior is resized according to the resizingMode

Description: One more parameter than the method in IOS5 resizingMode

typedef NS_ENUM(NSInteger, UIImageResizingMode) {    UIImageResizingModeTile, // 平铺模式，通过重复显示UIEdgeInsets指定的矩形区域来填充图片 UIImageResizingModeStretch, // 拉伸模式，通过拉伸UIEdgeInsets指定的矩形区域来填充图片};

The specific code is as follows:

    Loading picturesUIImage *image = [UIImage imagenamed:@ "Chat_send_nor"];Set the value of the end capCGFloat top = Image. Size. Height *0.5;CGFloat left = image. Size. Width *0.5;CGFloat bottom = image. Size. Height * 0.5; CGFloat right = Image. Size. Width * 0.5; //Set the value of the end cap uiedgeinsets edgeinsets = uiedgeinsetsmake (top, left, bottom, right); //Set the mode of stretching uiimageresizingmode mode = Uiimageresizingmodestretch; //Stretch picture UIImage *newimage = [Image resizableimagewithcapinsets:edgeinsets Resizingmode:mode]; //Set the background image of the button [btn setbackgroundimage:newimage forstate:uicontrolstatenormal];     

Operating effect:

Run 4.png

Mode 4: (The simplest way)

Set the slicing property. png

After setting. png

is not so easy~~

Operating effect:

Running Effect 5.png

Note: All of the above methods of stretching a picture by code are 返回 stretched 新图片 .

Wen/yotrolz (author of Jane's book)
Original link: http://www.jianshu.com/p/c9cbbdaa9b02
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".

Several ways to stretch pictures in iOS