Xcode图片素材Slicing处理

2017-04-24 本文已影响490人楚简约

一、需求背景
在项目开发中，在UI切图不全的情况下，我们可以通过放大缩小图片某个区域适配各种机型防止背景图片变形。iOS可以通过UIImage的方法resizableImageWithCapInsets切片设置图片的可拉伸区域，也可以通过slicing（基于OS7以上的并且用Media.xcassets管理图片）可视化的制定图片的可扩展和不可变区域。(而我所遇到的问题是, 设置聊天对话框, 会随着聊天文字内容而横向和纵向的变化)

二.首先讲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:可视化操作)

Slicing.png

在Slicing 设置中有四个选项，分别是 NONE （无拉伸效果） horizontal （水平拉伸）vertical（垂直拉伸）horizontal and vertical （水平垂直都拉伸）

Slice H and V.png

Slicing设置.png

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