iOS之彻底弄懂resizableImageWithCapInsets

搞过Android屏幕适配的人应该都听说过.9png，是为了解决不同屏幕下，图片拉伸不失真的一种图片格式。使用.9png格式的图片，可以指定拉伸区域和不可拉伸区域，比如带圆角的按钮，带箭头的对话框等，可以指定圆角或者箭头不拉伸，而只拉伸可以重复的“长方形”区域，关于.9png，请参考

.9png 写道

http://isux.tencent.com/android-ui-9-png.html

 

what，Android这么高大上？其实iOS在5.0版本后，也提供了类似的功能，UIImage的

写道

resizableImageWithCapInsets

 方法，iOS6.0以后，又增加了一个增强型的版本

写道

resizableImageWithCapInsets:resizingMode:

 不同之处在于iOS6增加了一个resizingMode用于指定是使用平铺还是拉伸方式处理图片

 

• 参数说明

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets
                            resizingMode:(UIImageResizingMode)resizingMode

 capInsets：指定可以拉伸的区域

 

resizingMode：指定处理模式－－－拉伸或者平铺

什么鬼？不懂？？看官别急，听我慢慢道来

• 代码说明

假如我如下一个对话框图片

 我想保留圆角和箭头部分，然后使图片宽度和高度都扩大一倍
 

 首先［Mark man］来看看圆角的各个位置

 

 知道各个边界了，我们开始编码，注意原图大小是170X50，我这里将_tileImgView（UIImageView）大小设置为了固定的340X100，以便于查看图片变大后的效果。

 

UIImage *img = [UIImage imageNamed:@"msg.jpg"];
    UIEdgeInsets tileSets = {.left = 10, .top = 17, .right = 10, .bottom = 10};
    UIImage *tileImage = [img resizableImageWithCapInsets:tileSets resizingMode:UIImageResizingModeTile];
    _tileImgView.image = tileImage;

 

 

 我们看看效果

 嗯，圆角没有什么问题，但是，等等，为什么出现了三个箭头，瞬间懵比了有没有？

不用说问题肯定出在tileSets（可拉伸区域）这里了，那么到底什么是可拉伸区域啊？

 是如上图所示的阴影部分的矩形区域吗？不是，绝对不是，因为如果这样的话，我们

的图片处理就会很完美了，不会出现三个箭头。那到底是什么呢？其实，参考Android的

.9png，分两部分，横向拉伸区域和纵向区域。

纵向区域＝[top,bottom]

横向区域=[left,right]

具体如下图所示

横向区域：当需要将图片向X方向拉伸时，需要使用[left, right]之间区域去填充需要拉伸的区域，left表示

距离左边界的距离，right表示距离右边界的距离，这两条线之间的区域就是用于填充多出来的需要拉伸的区域

 
 
 纵向填充区域：当需要将图片向Y方向拉伸时，需要使用[top, bottom]之间区域去填充需要拉伸的区域，top表示距离上边界的距离，bottom表示距离下边界的距离，这两条线之间的区域就是用于填充多出来的需要拉伸的区域

 

所以当我们，纵向变大时，由50变为100时，因为拉伸区域是如上图所示的一块长方形长条，所以，纵向上的表现很完美。

 

我们来分析下，横向区域：可拉伸区域大小为170-10(left)-10(right)=150，不可拉伸区域为左边界的10像素圆角和右边界的10像素圆角。

iOS的resizableImageWithCapInsets会如下处理图片等拉伸：在两头保留不可拉伸区域，中间需要拉伸的地方用可拉伸区域来填充

 保留左右各10个像素，中间剩下的320个像素使用可拉伸区域来填充，因为我们采用的是平铺的方式，所以中间会采用170（原图大小）-10（left）－10（right）＝150的可拉伸区域来填充剩下的320个像素

 所以最终的效果是150+150+20＝320，正好出现三个箭头

 

以上只是示意图，请忽略原始比例。

 

如果我们将tileSets改成如下形式呢？

UIImage *img = [UIImage imageNamed:@"msg.jpg"];
    UIEdgeInsets tileSets = {.left = 20, .top = 17, .right = 140, .bottom = 10};
    UIImage *tileImage = [img resizableImageWithCapInsets:tileSets resizingMode:UIImageResizingModeTile];
    _tileImgView.image = tileImage;

 

 我们可拉伸区域只有10个像素（170-20-140）刚刚好是箭头的宽度；需要拉伸的区域有180（340-20-140），

这样算下来，我们程序运行的结果应该是180/10=18，含有18个箭头效果

 知道了原理之后，回到开始的那个问题，如果保留圆角和一个箭头呢？只要箭头不在可拉伸区域里就可以

 

代码如下

 

 

UIImage *img = [UIImage imageNamed:@"msg.jpg"];
    UIEdgeInsets tileSets = {.left = 40, .top = 17, .right = 77, .bottom = 10};
    UIImage *tileImage = [img resizableImageWithCapInsets:tileSets resizingMode:UIImageResizingModeTile];
    _tileImgView.image = tileImage;

 
 我们看看效果

 非常完美，but 等等，貌似使用以下代码，都能达到同样的效果：

UIEdgeInsets tileSets = {.left = 40, .top = 17, .right = 77, .bottom = 10};
    UIEdgeInsets tileSets = {.left = 40, .top = 17, .right = 129, .bottom = 10};
    UIEdgeInsets tileSets = {.left = 32, .top = 17, .right = 10, .bottom = 10};

 该怎么办，怎么办？莫慌，查看Apple的文档可知：

Apple的文档 写道

If resizable areas have a width or height of 1 pixel—that is, a horizontally resizable area is 1 pixel wide, a vertically resizable area is 1 pixel tall, or the center region of the image is 1 x 1 pixel—iOS draws the image by stretching the 1-pixel region. This mode provides the fastest performance (for nonzero cap insets).

 大概意思是，如果采用UIImageResizingModeStretch（拉伸模式），那么拉伸区域保存一个像素长或者宽最好，这样性能最优。至于平铺模式，则没有说明。

 

最后，希望知道的朋友告知我一下，在UIImageResizingModeTile（平铺模式）下，拉伸区域定义多大最好？是不是一个像素，性能最佳？

 

源码如下：