张洪Heo
·
SwiftUI如何绘制聊天气泡，自适应内容
💡
原文中文，约4000字，阅读约需10分钟。
📝
内容提要
传统开发使用.9图绘制气泡，但无法实现动画、颜色动画、背景模糊等效果。个人更喜欢用SwiftUI的Shape来绘制气泡。使用SwiftUI绘制圆角矩形部分很简单，小尾巴部分可以用SVG转换工具转换成Shape。添加边框可利用ZStack的互相遮挡关系实现。
🎯
关键要点
-
传统开发使用.9图绘制气泡，但无法实现动画效果、颜色动画和背景模糊等。
-
个人更喜欢使用SwiftUI的Shape来绘制气泡。
-
使用SwiftUI绘制气泡简单，气泡分为上下两个部分：小尾巴和圆角矩形。
-
小尾巴部分可以用SVG转换工具生成，方便绘制。
-
可以通过Sketch等UI软件生成SVG代码。
-
使用SVG转换工具将SVG转换为Shape后即可使用。
-
可以通过自定义Shape实现气泡的绘制。
-
iOS 17及以上版本可以利用ZStack实现气泡的边框效果。
🏷️
标签
➡️
