Image Slicing
功能是在WWDC 2013中Xcode 5 中新增的,类似于安卓里面的Create 9-Patch file
。现在用的最多的场景就是聊天功能中,聊天内容的背景框图片可以随文字多少自动变换高度。
代码等同于:- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
接下来,我们用一张颜色鲜明的图来看看Slicing到底是如何作用的。进入Assets
,选中图片,点击右下角的Show Slicing
,在图片上出现三个可操作按钮。如下图。
先看水平方向。点击之后如下图,图片上出现三根线,Inspector
面板中也有Slicing
对应的设置。
-
左边线表示左边的区域不能被重复
-
右边线表示右边的区域不能被重复
-
中间线和左边线之间的区域被重复
-
中间线和右边线之间的区域舍弃掉(舍弃的部分会有白色蒙板)
同理,从垂直方向上看也一样。左边和右边分别对应上边和下边。如果同时有水平和垂直方向,那么重复区域取交集,不能被重复部分选并集,舍弃掉的部分视觉上可直接看到。
-
slices
是 拉伸的方向,其中有四个选项。不同选项下方对应的insert
也不一样。 -
center
是 重复部分的填充方式-
Tiles
:平铺 -
Stretches
:拉伸
-
-
center
下的width
和height
分别代表可重复部分的宽和高,只有上下左右同时裁剪的时候才会有。在只有水平方向时,只有width
;在只有垂直方向时,只有height
。