iOS 端聊天气泡如何实现拉伸的？

[KillPaul]

UI 设计新人，暂未入职... 所以如果这个问题太小儿科请见谅。

学习时知道安卓端的聊天气泡是用 “.9 ” 切图实现，然而不知道 iOS 端实现的方法，更神奇的是我谷歌居然还没找到满意的答案？？？（否则也不会发帖丢人了）

因为设计的一款应用主色用到了渐变，而且还是 45 度角渐变😊 想给聊天气泡的底色也用这种渐变是不是实现起来很困难？（所以我改成单色的了，是不是很乖）

有大大来告诉求知的我吗？可爱脸

[plutodai]

给 iOS 和安卓一样的.9 图片就行了，iOS 也有类型安卓.9 图片的处理方式

[KillPaul]

@plutodai 这样啊... 好的！谢谢解惑～

[sSsSsSs]

不是渐变的话， 正常 png，就可以了，至于楼上说的.9 图片，我个人没用过。。。

[MarginK]

一样的 9 切片啊。。。。

[KillPaul]

@sSsSsSs 所以就切一张最小的 png 交给开发去实现么

[amon]

我就不信搜 iOS 图片拉伸会没有答案。
stretchableImage 了解一下

[MarginK]

你是已经有渐变图的气泡了还是想自己画？
有的话，如果是斜着的渐变气泡用 9 切片恐怕不行，自己画斜的渐变并不难啊。。。

[finab]

可以看看官方文档
https://developer.apple.com/documentation/uikit/uiimage#1658362

[KillPaul]

@amon
@finab 我可能没表达清楚，只是想问问作为 UI 设计师应该做的是哪些，看了你们的回答是不是只要把聊天气泡的 png 切图提供给开发就行了呢？

[KillPaul]

@MarginK 我是做了斜的渐变气泡 png 图片。所以这种斜的渐变就只能由开发代码去实现了？谢谢

[sSsSsSs]

@KillPaul 对的

[finab]

@KillPaul
文档里就是说怎么做的，相关参数你也可以一并告诉开发（一般 UI 只给个图，开发还得自己推测出来，给个参数显得非常专业）
你看他给的示范图，有箭头的都是拉伸的，没箭头的保持原样

[KillPaul]

@finab 明白了～ 这个给参数是必须的，毕竟比 .9 还要简单一些。

[psychoo]

是不是这个意思？：

我的思路是把渐变的底图给开发，开发用代码实现的，要分 W>=H 和 W<H 两种情况。

[KillPaul]

@psychoo 嗯，我不懂开发，这种类似 PS 里的剪切蒙版方式吧，我也想到过但不知道是不是这样实现的。但是这种情况就得切一张很大的渐变背景图了吧，因为小的图片就算只是渐变放大应该也会虚的，毕竟要考虑到一条很长很长的信息这种情况。我觉得应该还是有用代码实现的方法才对。PS.附上我的设计截图（突然觉得有点丑..）
https://imgur.com/HefpKVe

[KillPaul]

发错格式了。再试试

[shawndev]

Image Slice, 有保留区域也有拉伸区域，拉伸区域和保留区域如果同时用渐变，这个方案会出现渐变速率不匀的现象。可以考虑代码实现。

[psychoo]

@KillPaul #16 我觉得光是 45 度这个设定，就避免不了在很长的信息的时候底图被拉伸得很严重，不妨根据长宽比自动调整角度？
或者你能用“函数”把底图描述出来，这样开发就可以用函数将底图“画”出来（类似矢量图的概念，不过程序小哥可能会发火哈哈）

[KillPaul]

@psychoo 哈哈，我觉得还是老老实实用纯色吧... 我怕被喷死

[MarginK]

@KillPaul 是的，如我所说，如果非要斜着渐变的话 就只能 UI 给个图，代码去填充渐变色了，

当然，与其这样这样的话，还不如纯代码画泡泡算了。。。我没对比过 9 切片相比贝塞尔画图的性能优劣，你可以对比看看哈