序言
在开发过程中，我们为了让APP看起来更好看，会利用大量的图片，但是为了减少安装包的大小，都会让美工提供一张小图，然后开发人员通过需要去拉伸图片达到展示的效果。
开发场景
假如下面的一张图片，是用来做聊天按钮的背景图片的，原始尺寸是(30 * 29)
image.png
我们将这张图片设置给UIImageView，宽高设置为:(W=200, H=50)代码如下:
- (void)drawImg1 {
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
imgView.image = [UIImage imageNamed:@"img4"];
imgView.center = self.view.center;
[self.view addSubview:imgView];
}
发现运行的结果很丑
image.png
原因分析
是将原是尺寸为(30 * 29)(像素)的图片拉伸成了W=200, H=50(pt)
解决方案
1.找美工重做一张较大的图片,这样的话就会出现软件包将来会变大，占用空间更大;如果我们要经常修改按钮的frame,需要给N多张图,显然不可行；
2.苹果为我们提供了关于图片拉伸的API，我们可以直接利用代码实现。
利用苹果提供的API来拉伸图片(目前发现的有四种):
方式一 (iOS5之前)
stretchableImageWithLeftCapWidth:topCapHeight
说明:这个方法只有2个参数，leftCapWidth代表左端盖宽度，topCapHeight代表上端盖高度。系统会自动计算出右端盖宽度rightCapWidth和底端盖高度bottomCapHeight，算法如下：
// 系统会自动计算rightCapWidth
rightCapWidth = image.width - leftCapWidth - 1;
// 系统会自动计算bottomCapHeight
bottomCapHeight = image.height - topCapHeight - 1
这样一来，其实我们图片的可拉伸范围只有1 * 1，所以再怎么拉伸都不会影响图片的外观;
具体代码如下
// 方式一
- (void)drawImg1 {
UIImage *img = [UIImage imageNamed:@"img4"];
// 设置左边端盖宽度
NSInteger leftCapWidth = img.size.width * 0.5;
// 设置上边端盖高度
NSInteger topCapHeight = img.size.height * 0.5;
UIImage *newImg = [img stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:topCapHeight];
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
imgView.image = newImg;
imgView.center = self.view.center;
[self.view addSubview:imgView];
}
运行结果
image1.png
方式二(iOS5)
// create a resizable version of this image. the interior is tiled when drawn.
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets NS_AVAILABLE_IOS(5_0);
// specify amount to inset (positive) for each of the edges. values can be negative to 'outset'
typedef struct UIEdgeInsets {
CGFloat top, left, bottom, right;
} UIEdgeInsets;
说明：UIEdgeInsets中的top, left, bottom, right就是用来设置上端盖、左端盖、下端盖、右端盖的尺寸
具体代码如下
- (void)drawImg2 {
// 加载图片
UIImage *image = [UIImage imageNamed:@"img4"];
// 设置端盖的值
CGFloat 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);
// 拉伸图片
UIImage *newImg = [image resizableImageWithCapInsets:edgeInsets];
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
imgView.image = newImg;
imgView.center = self.view.center;
[self.view addSubview:imgView];
}
运行结果
image2.png
方式三(iOS6)
// the interior is resized according to the resizingMode
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode NS_AVAILABLE_IOS(6_0);
说明:相比iOS5中的方法多了一个resizingMode参数
typedef NS_ENUM(NSInteger, UIImageResizingMode) {
UIImageResizingModeTile, // 平铺模式，通过重复显示UIEdgeInsets指定的矩形区域来填充图片
UIImageResizingModeStretch, // 拉伸模式，通过拉伸UIEdgeInsets指定的矩形区域来填充图片
};
具体代码如下
- (void)drawImg3 {
// 加载图片
UIImage *image = [UIImage imageNamed:@"img4"];
// 设置端盖的值
CGFloat 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);
// 设置拉伸的模式
UIImageResizingMode mode = UIImageResizingModeTile;
// 拉伸图片
UIImage *newImg = [image resizableImageWithCapInsets:edgeInsets resizingMode:mode];
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
imgView.image = newImg;
imgView.center = self.view.center;
[self.view addSubview:imgView];
}
执行结果
image3.png
方式四（直接设置图片的属性）
image.png
具体代码
// 原始图片
- (void)drawImg {
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
imgView.image = [UIImage imageNamed:@"img4"];
imgView.center = self.view.center;
[self.view addSubview:imgView];
}
运行结果
image.png
备注：上面所有通过代码来拉伸图片的方法都是
返回一个拉伸后的新图片.
本文参考iOS中拉伸图片的几种方式，非常感谢该作者。
- 如有错误，欢迎指正，多多点赞，打赏更佳，您的支持是我写作的动力。
