21.UIImage图片拉伸平铺(resizableImage)

在日常开发中很多时候, 想复用之前的图片资源,但是需要进行一些图片调整,若重新切图则会增加资源和安装包大小，且内存大小也会增大。所以今天,就来说一说通过代码如何调控图片拉伸和平铺的技巧。

1.随机截取一段代码作为资源图片(图片像素为200*150)

2.拉伸的方法

– (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode NS_AVAILABLE_IOS(6_0);

UIEdgeInsets，可以通过设置UIEdgeInsets的left、right、top、bottom来分别指定左端盖宽度、右端盖宽度、顶端盖高度、底端盖高度。
UIImageResizingMode枚举:
UIImageResizingModeStretch：拉伸模式，通过拉伸UIEdgeInsets指定的矩形区域来填充图片。
UIImageResizingModeTile：平铺模式，通过重复显示UIEdgeInsets指定的矩形区域来填充图片。

说明:
在很多编程语言中都有resizable image这样的概念，比如android中的NinePatch graphic ，css3中的border image，微软的Nine-Grid Rendering，还有就是iOS中UIImage的resizable image。
可以将resizable image分成9部分，通过它生成大图片的时候遵循以下规则：四个角(1,3,7,9)保持不变，上下(2,8)进行横向平铺或拉伸，左右（4,6）进行纵向的平铺或拉伸，中央(5)则是双向平铺或拉伸。

此9宫格的模型可以使用cap insets来进行描述，cap insets有四个参数，top,left,bottom,right,分别描述9宫格上左下右的大小。

3.拉伸设置

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 50, 300, 500)];[self.view addSubview:imageView];CGFloat top = 37.5; // 顶端盖高度  CGFloat bottom = 50 ; // 底端盖高度  CGFloat left = 37.5; // 左端盖宽度  CGFloat right = 50; // 右端盖宽度  UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);  // 指定为拉伸模式，伸缩后重新赋值  UIImage *image = [UIImage imageNamed:@"a.png"];image = [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch];imageView.image = image;

4.效果图:

注:

1.@2x图片和非retina图片
在retina屏幕下程序会自动寻找@2x图片，如果没有后缀为@2x图片，就会自动拉伸非@2x图片，所以尽量将你的图片都带上@2x后缀，这样就不会造成在使用resizableImageWithCapInsets时因无法找到@2x图片对原图进行拉伸进而再使用resizableImageWithCapInsets进行平铺时造成图片变形问题。

所以需要为拉伸的图片资源必须添加 xx@2x。
2.拉伸的cap insets计算
本 Demo 中图片资源像素大小为200*150, 所以原大小(pt)为100*75。而在 capInsets 参数传入的需要按照图片原大小来计算。最中心的点为pt(50, 37.5)。

比如, 代码中 cap 为(37.5, 50, 37.5, 50), 故取的拉伸部分为最中心的点, 所以才能入上图所示。且当上下左右四个方向,各个方向超过中心点时,视为中心点的值为最大值, 就是说(37.5, 50, 37.5, 50)为各个方向的最大值。
所以,当设置 capInsets 为UIEdgeInsetsMake(20, 30, 40, 50)时,效果如图:

此方法是 iOS6.0之后的方法, iOS5.0还有一个单像素拉伸的方法。可以延伸阅读iOS图片拉伸技巧
参考资料:resizableImageWithCapInsets认知和对@2x图片的理解