UIImage图片拉伸平铺(resizableImage)

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

素材准备

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

图片拉伸API分析

– (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)则是双向平铺或拉伸。 

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

 

拉伸方法设置

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;

 

拉伸效果图

 

注:

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图片的理解