记录我得孤陋寡闻
当我们拿到一张切图用来展示时,大部分时候都是要被拉伸的,但是又要保证某些区域不被拉伸,除了纯代码控制拉伸区域,还可以借助于images.xcassets slicing
,类似Android的 点9图。
前提:
此方法也有局限性,这里只介绍使用,实际应用需要灵活处理,酌情参考。
Show Slicing
1. 首先介绍图片切片,其功能区域如下:
1.1 Slicing
1.2 Center (默认 Tiles)
- Tiles:平铺
- Stretches:拉伸
2. 我们点击图片上Start Slicing
开始图片切片,会发现有三个按钮,对应右下角Slicing -> Slices,即设置:横向拉伸,纵向拉伸,横向+纵向拉伸
3. Horizontal
此处换深背景,方便介绍各区域
点击横向拉伸按钮后,Xcode会比较智能的将圆角区域排除拉伸区域,拉伸区域如下:
4. Vertical
同理,点击纵向拉伸按钮后,拉伸区域如下:
5. Horizontal and Vertical
如图一中,红圈区域是不支持拉伸区域,阴影部分可以被拉伸。
错误示例:当图片如图二中有占满纵向的线,这样我们设置纵向拉伸就会导致图片的线变形,因为拉伸区域无法避开图片上的内容。