iOS 图片拉伸之images.xcassets slicing

记录我得孤陋寡闻

当我们拿到一张切图用来展示时,大部分时候都是要被拉伸的,但是又要保证某些区域不被拉伸,除了纯代码控制拉伸区域,还可以借助于images.xcassets slicing,类似Android的 点9图。

前提:

此方法也有局限性,这里只介绍使用,实际应用需要灵活处理,酌情参考。

Show Slicing

1. 首先介绍图片切片,其功能区域如下:

1.1 Slicing
Show Overview
Show Slicing
1.2 Center (默认 Tiles)
  • Tiles:平铺
  • Stretches:拉伸
center

2. 我们点击图片上Start Slicing 开始图片切片,会发现有三个按钮,对应右下角Slicing -> Slices,即设置:横向拉伸,纵向拉伸,横向+纵向拉伸

Start Slicing

3. Horizontal

此处换深背景,方便介绍各区域
点击横向拉伸按钮后,Xcode会比较智能的将圆角区域排除拉伸区域,拉伸区域如下:

4. Vertical

同理,点击纵向拉伸按钮后,拉伸区域如下:

5. Horizontal and Vertical

如图一中,红圈区域是不支持拉伸区域,阴影部分可以被拉伸。

图一

错误示例:当图片如图二中有占满纵向的线,这样我们设置纵向拉伸就会导致图片的线变形,因为拉伸区域无法避开图片上的内容。

图二

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 背景 图片拉伸这件事情大家应该经常做了,除了可以代码拉伸外,使用xib也可以自定义图片的拉伸。然而,最近被问到拉伸...
    今天写明天改阅读 1,653评论 0 1
  • 没有设置拉伸区域之前图片是介个样子的~ 开始设置拉伸区域:1.在Assets.xcassets中找到你要设置的图片...
    huhuhuhu123阅读 1,968评论 0 0
  • 今天群里有人问了个问题,做聊天功能用xib如何拉伸气泡图片。最后的如何解决已经不重要了,我从中看到一个iOS7出的...
    guaker阅读 4,496评论 2 8
  • 一、需求背景在项目开发中,在UI切图不全的情况下,我们可以通过放大缩小图片某个区域适配各种机型防止背景图片变形。i...
    楚简约阅读 7,016评论 1 13
  • Xcode Slicing图片拉伸的图文详解 如图是一个横纵向都加了slicing的图片 这里主要讲下Slicin...
    南城琉璃月阅读 3,449评论 2 12