图片的切片拉伸（iOS Slicing与Android中点9图）

一 前言

在项目开发中，在UI切图不全的情况下，我们可以通过放大缩小图片某个区域适配各种机型防止背景图片变形。iOS可以通过UIImage的方法resizableImageWithCapInsets切片设置图片的可拉伸区域，也可以通过slicing（基于OS7以上的 并且用Media.xcassets管理图片）可视化的制定图片的可扩展和不可变区域 。类似于Android中的点9图片。当然，你不怕麻烦可以在图层上画出来各种情况下的背景。

二.Androd中的点9图

点9图示一种可伸缩的位图，如果你某个View用了点9图做background，Android会根据点9图的设置来自动为你调整、适应内容。点9图是标准的PNG格式图像，被一圈1像素宽的边缘包围，并且保存的时候扩展名一定要是“.9.png”，还要保在“res/drawable/”目录。（最外围的一圈像素必须要么是纯黑色，要么是透明，一点点的半透明的像素都不可以有，比如说99%的黑色或者是1%的投影都不可以有）

Paste_Image.png

三.iOS中的切片缩放

iOS的图片Slicing，同等于Android中的点9图片。iOS可以通过UIImage的方法resizableImageWithCapInsets切片设置图片的可拉伸区域，也可以通过slicing（基于OS7以上的 并且用Media.xcassets管理图片）可视化的制定图片的可扩展和不可变区域

代码实现：

   UIImage *image = [UIImage imageNamed:@"004"];
   CGFloat top = 10; 
   CGFloat left = 10; 
   CGFloat bottom = 10; 
   CGFloat right = 10; 
   /// 顶端、左端、底部、右端分别预留距离
   UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);
   //注意：拉伸之后一定要赋值回去 
  image = [image  resizableImageWithCapInsets:insets 
   resizingMode:UIImageResizingModeStretch]; 
   //UIImageResizingModeStretch：`拉伸`模式，通过`拉伸`Insets指定的矩形区域来填充图片 
   //UIImageResizingModeTile：`平铺`模式，通过`重复显示`Insets指定的矩形区域来填充图片

通过 Xcode Slicing： (xcode的slicing功能是UIImage的- resizableImageWithCapInsets:resizingMode:可视化操作)

打开项目中Images.xcassets文件，找到你想操作的图片，点击XCode右下方

Paste_Image.png

此时图片上会展示出 Start Slicing 按钮，点击按钮，根据需求选择水平、垂直、水平与垂直不通Slicing方式

Paste_Image.png

此时图片水平和垂直分别出现三条线，可以理解成，中间的两条线可以先不用管，默认让它分别贴着下边线和右边线，另外的四条线交叉中间那个矩形区域就是用来拉伸或者平铺的，只有四个角上的内容不会变（实际意义上：以垂直方向为例，中间到左面那条线是图片填充像素，中间条到右面是隐藏填充区域。矩形左边那块是用来重复的，右边那块是用来覆盖的，但有的时候不起作用，原因不详）

Paste_Image.png