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