iOS图片拉伸大全

苹果为了节省打包文件(ipa)的存储空间,在iOS5就推出了图片拉伸,但是初衷是好的,如果程序猿不会用,那一切都是白搭

1.正常图片

UI妹纸给的图片
2.如果这样设置,由于按钮的尺寸比图片的尺寸大,所以显示的样子是

你是不是立即想到找UI妹纸切个大的图片?
3.图片拉伸,拉伸分为两种
先来分析图片拉伸原理,中间的红色区域就是拉伸的区域

图片拉伸原理,红色区域为拉伸区域
- 3.1.第一种是图形化界面,
  - 3.1.1有storyboard(UIImageView能拉伸)
    
    利用图形化界面拉伸UIImageView
  - 3.1.2 UIButton(不能使用这种方式拉伸)
3.2.第二种拉伸方式切片(Show Slicing)

选中要拉伸的图片

点击Start Slicing(开始切片)

选择要切片的方向

选择要拉伸的范围,以及要隐藏的范围

设置切片的属性

最终效果图

4.接下来用代码拉伸
- 4.1 stretchableImageWithLeftCapWidth:topCapHeight:

 // 1.设置登录按钮的背景图片
   UIImage *image = self.loginBtn.currentBackgroundImage;
    // 返回一张可拉伸的图片
    // 这个方法只能拉伸1x1的区域
    // Width: x轴哪里拉伸(不拉伸区域)
    // Height: 从y轴哪里拉伸(不拉伸区域)
   image = [image stretchableImageWithLeftCapWidth:image.size.width / 2 topCapHeight:image.size.height / 2];
    [self.loginBtn setBackgroundImage:image forState:UIControlStateNormal];
注意: 此方法在iOS5.0过期

系统会根据传入的两个参数自动计算出拉伸的范围
算法如下:

// stretchWidth为中间可拉伸区域的宽度  
stretchWidth = width - leftCapWidth - rightCapWidth = 1;    
// stretchHeight为中间可拉伸区域的高度  
stretchHeight = height - topCapHeight - bottomCapHeight = 1;

4.2.-(UIImage*)resizableImageWithCapInsets:(UIEdgeInsets)capInsets(在iOS5.0出的方法)
这个方法只接收一个UIEdgeInsets类型的参数，可以通过设置UIEdgeInsets的left、right、top、bottom来分别指定左端盖宽度、右端盖宽度、顶端盖高度、底端盖高度

CGFloat top = 100; // 顶端盖高度  
CGFloat bottom = 100 ; // 底端盖高度  
CGFloat left = 1; // 左端盖宽度  
CGFloat right = 1; // 右端盖宽度  
UIEdgeInsets capInsets = UIEdgeInsetsMake(top, left, bottom, right);  
// 重新赋值  
image = [image resizableImageWithCapInsets: capInsets];

4.3-(UIImage*)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode(iOS6.0之后的方法)
- capInsets参数和上面的参数相同
- resizingMode:
  
  官方文档说的很清楚
- UIImageResizingModeTile:平铺模式,通过重复显示UIEdgeInsets指定的矩形区域来填充图片
- UIImageResizingModeStretch:拉伸模式,通过拉伸UIEdgeInsets指定的矩形区域来填充图片

参考文章:http://blog.csdn.net/q199109106q/article/details/8615661

iOS图片拉伸大全

推荐阅读更多精彩内容