一、需求背景
在项目开发中，在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
此时图片水平和垂直分别出现三条线，可以理解成，中间的两条线可以先不用管，默认让它分别贴着下边线和右边线，另外的四条线交叉中间那个矩形区域就是用来拉伸或者平铺的，只有四个角上的内容不会变（实际意义上：以垂直方向为例，中间到左面那条线是图片填充像素，中间条到右面是隐藏填充区域。矩形左边那块是用来重复的，右边那块是用来覆盖的，但有的时候不起作用，原因不详）
可缩放区域.png
再举一个例子, 显示下拉菜单
下拉菜单434x98素材.png
这个意思就是，宽度禁止拉伸。所以把宽度的像素做的很大。这个最大只能显示 434/2 的宽度。也就是只能以这个大小来进行布局。
Vertical.png
拉伸的话，也就只能垂直拉伸。最终的效果。
效果.png
最后说下center参数设置
center.png
center分为两种，一种是切割的，一种是拉伸。第一种，就是你要多少，就取多少。如果你要的少，就会出现底下这情况。图片大小是 217 我要了 100
Tiles.png
另一种是拉伸stretches模式。
stretches.png
我是楚简约，感谢您的阅读，
喜欢就点个赞呗，“❤喜欢”，
鼓励又不花钱，你在看，我就继续写~
非简书用户，可以点右上角的三个“...”，然后"在Safari中打开”，就可以点赞咯~
到此为止.记录下容易忘的细节同大家分享!!!🙂🙂🙂
网友评论