图片拉伸技巧

图片拉伸

• 在开发过程中，经常会给按钮等设置一些比较好看的背景图片，比如说带有渐变色的。如果美工人员给出的图片是和按钮大小一样的话，那么就会导致下面的问题：

  • 图片资源大导致安装包变大
  • 打开应用占用的内存也变大

• iOS提供了很好用的API帮我们实现上述功能，iOS提供了3个API解决这个问题。

// iOS
image = [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5];
// iOS5
image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(30, 30, 30, 30)];
// iOS6
image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(30, 30, 30, 30) resizingMode:UIImageResizingModeStretch];

• stretchableImageWithLeftCapWidth:topCapHeight:

  • 这个方法会拉伸图片最中间的那个1*1的地方
  • 方法中只需要提供leftCapWith和topCapHeight的大小，程序会自动算出右边和下边

• resizableImageWithCapInsets:

  • 这个方法通过UIEdgeInsets设置上下左右的高度，这样就会将外边保护起来
  • 拉伸的是内部的地方，设置的更加灵活

• resizableImageWithCapInsets:resizingMode:

  • 这个方法和resizableImageWithCapInsets:基本一致，只是多了一个resizingMode的参数
    • UIImageResizingModeStretch：拉伸模式，通过拉伸UIEdgeInsets指定的矩形区域来填充图片
    • UIImageResizingModeTile：平铺模式，通过重复显示UIEdgeInsets指定的矩形区域来填充图片

• 在Xcode中可以设置

  • 在Images.xcassets中选中需要拉伸的图片
  • 按照如下设置：