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