stretchable/resizable UIImage

http://blog.csdn.net/phunxm/article/details/42150469

 

This technique is often used to create variable-width buttons, which retain the same rounded corners but whose center region growsor shrinks as needed. 

The pixel area not covered by the cap in each direction is tiled, left-to-right and top-to-bottom.

 

调用stretchableImage或resizableImage后，返回一个带有缩放封盖属性的UIImage对象（Return a new image object with the specified cap insets）。
当我们对超出图片Size的UIImageView/UIButton进行setImage或setBackgroundImage时，就会按照预设CapInsets属性进行拉伸适配。

================================================================================
-stretchableImageWithLeftCapWidth:topCapHeight:
NS_DEPRECATED_IOS(2_0, 5_0, "Use -resizableImageWithCapInsets:")
================================================================================
【Summary】
Creates and returns a new image object with the specified cap values.
【Discussion】
specifying cap insets such that the interior is a 1x1 area.
【解说】
    它的功能是创建一个内容可拉伸，而边角不拉伸的图片，需要两个参数：

leftCapWidth：horiz. stretchable. 左边不拉伸区域的宽度。
topCapHeight：vert. stretchable. 上面不拉伸区域的高度。

    根据UIKit/UIImage.h对该属性的描述，rightCapWidth=width-leftCapWidth-1，bottomCapHeight=height-topCapWidth-1，因此实际stretchable的interior area是一个点（1x1）。也即坐标为{left+1,top+1}的这个点（one point）会像贴瓷砖那样进行复制(UIImageResizingModeTile：the interior is tiled when drawn)，CapInset封盖的周边外围像素保持不变。
    为视效均匀起见，一般选取图片的中心点（leftCapWidth=width/2,topCapHeight=height/2）进行复制填充。

================================================================================
-resizableImageWithCapInsets:(=resizableImageWithCapInsets: resizingMode:UIImageResizingModeTile)
NS_AVAILABLE_IOS(5_0)
================================================================================
【Summary】
create a resizable version of this image. the interior is tiled when drawn.
【Discussion】
For best performance, use a tiled area that is a 1x1 pixel area in size.
【解说】
    其中UIEdgeInsets参数的格式是(top,left,bottom,right)，从上、左、下、右分别在图片上画了一道线，这样就给一个图片加了一个框，只有在框里面的部分才会被拉伸，框外面的封盖部分则不会改变。
    选取图片的中心点（height/2,width/2,height/2,width/2）进行复制填充时，效果同stretchableImageWithLeftCapWidth:width/2 topCapHeight:height/2，像贴瓷砖一样复制填充(tile/spread/extend)。

================================================================================
-resizableImageWithCapInsets:resizingMode:
NS_AVAILABLE_IOS(6_0)
================================================================================
【Discussion】
This method is exactly the same as its counterpart resizableImageWithCapInsets: except that the resizing mode of the new image object can be explicitly declared. You should only call this method in place of its counterpart if you specifically want your image to be resized with the UIImageResizingModeStretch resizing mode.
【解说】
    UIImageResizingModeTile：平铺模式（=resizableImageWithCapInsets:），通过重复显示UIEdgeInsets指定的矩形区域来填充图片
        当UIEdgeInsetsMake(height/2, width/2, height/2, width/2)时，interior resizable area is one point，像贴瓷砖一样复制填充(tile/spread/extend)。
    UIImageResizingModeStretch：拉伸模式，通过拉伸UIEdgeInsets指定的矩形区域来填充图片
        拉伸UIEdgeInsets排除外围指定的内部矩形区域（interior resizable area is a rectangle）。
        横向拉伸：UIEdgeInsetsMake(0, coreRadius, 0, coreRadius)，例如圆角/横向胶囊按钮贴图。

        纵向拉伸：UIEdgeInsetsMake(coreRadius, 0, coreRadius, 0)，例如类似温度计的圆角/纵向胶囊按钮贴图。

【例程】

    例如，我们要用贴图top_half_bg@2x.png（39x20）和贴图bot_half_bg@2x.png（39x20） 实现如下贴图效果：

    其中分割线上半部由top_half_bg@2x.png贴出顶部圆角效果，分割线下半部由bot_half_bg@2x.png贴出底部圆角效果。其拉伸属性设置代码如下：

   

// 圆角半径为7pixel=3.5point  
#define CORNER_RADIUS 4  
// top_half_bg@2x.png拉伸矩形区域  
#define TOP_STRETCH_CAP_INSETS  UIEdgeInsetsMake(CORNER_RADIUS,CORNER_RADIUS,0,CORNER_RADIUS)  
// bot_half_bg@2x.png拉伸矩形区域  
#define BOT_STRETCH_CAP_INSETS  UIEdgeInsetsMake(0,CORNER_RADIUS,CORNER_RADIUS,CORNER_RADIUS)  
  
UIImage* topBgImage = [UIImage imageNamed:@”top_half_bg.png”];  
topBgImage = [topBgImage resizableImageWithCapInsets:TOP_STRETCH_CAP_INSETS  resizingMode:UIImageResizingModeStretch];  
  
UIImage* botBgImage = [UIImage imageNamed:@”bot_half_bg.png”];  
botBgImage = [botBgImage resizableImageWithCapInsets:BOT_STRETCH_CAP_INSETS  resizingMode:UIImageResizingModeStretch];  

 

_bottomLineView.image = [[UIImage imageNamed:@"comment_count_top_line"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 38, 0, 2)];

 

CGFloat curBottomY = 15;

        if (!_contentBGView) {

            _contentBGView = [UIImageView new];

            _contentBGView.image = [[UIImage imageNamed:@"comment_bg"] resizableImageWithCapInsets:UIEdgeInsetsMake(35, 15, 5, 5)];

            [self.contentView addSubview:_contentBGView];

        }

 

参考：

《iOS图片拉伸技巧》

《[UIImage resizableImageWithCapInsets:]使用注意》