美文网首页iOS
iOS 图片拉伸之images.xcassets slicing

iOS 图片拉伸之images.xcassets slicing

作者: Dezi | 来源:发表于2022-10-20 18:39 被阅读0次

记录我得孤陋寡闻

当我们拿到一张切图用来展示时,大部分时候都是要被拉伸的,但是又要保证某些区域不被拉伸,除了纯代码控制拉伸区域,还可以借助于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

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

图一

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

图二

相关文章

网友评论

    本文标题:iOS 图片拉伸之images.xcassets slicing

    本文链接:https://www.haomeiwen.com/subject/njbuzrtx.html