关于Assets中图片的Slicing功能

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下的widthheight分别代表可重复部分的宽和高,只有上下左右同时裁剪的时候才会有。在只有水平方向时,只有width;在只有垂直方向时,只有height
(ps:直接配置上述各种数值和手动拖线的功能是一样的。)
接下来直接拿一张聊天背景框的图片操刀练手一下。背景框图片带四个圆角,首先这四个圆角是不能被重复的,由于是纯色背景图,那么可重复和被舍弃部分就有好几种方案。如下图,提供其中一种slicing方案,1~8都是不可重复的。模拟器上跑起来,不管imageView的高度如何,图片都不会变形或模糊。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一 前言 在项目开发中,在UI切图不全的情况下,我们可以通过放大缩小图片某个区域适配各种机型防止背景图片变形。iO...
    laitys阅读 11,119评论 4 6
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,049评论 25 709
  • 返回一张受保护且被拉伸的图片 应用场景:聊天窗口的气泡 方法一(弃用): iOS 5.0以前使用(弃用)这个方法会...
    林安530阅读 16,067评论 1 36
  • 这是一个桂西北的小县城,宁静而不曾寂寞……有足迹与故事并存。 这地方还有一处美称一一锡都 四川一一位于中国的西南地...
    四夕雪莲阅读 3,085评论 0 1
  • 今天我被一个故事深深感动了。 27岁的女孩瑞思被诊断出患有4期肝病,医生说如果不做移值手术,她可能只有几个月的生命...
    我是沐馨阅读 3,630评论 0 2