【问题标题】：How to create bubble chat TableViewCell like in Messenger using XCode's Interface Builder?如何使用 XCode 的 Interface Builder 在 Messenger 中创建气泡聊天 TableViewCell？
【发布时间】：2019-12-28 14:51:50
【问题描述】：
我目前正在尝试为我的应用程序实现聊天，但由于我是 Swift 开发的新手，因此我陷入了必须为其创建 TableView 单元的部分。我能够找到 2 张“聊天气泡”的 png 图像（一张用于接收，一张用于发送）。
我将它们放在Assets 中并将它们加载到ImageView 中。现在我的问题是如何在ImageView 中放置Label 并根据Label 中的文本行数重新调整它。气泡不应超过屏幕宽度的66%。
【问题讨论】：
标签：
swift
xcode
chat
cell
messenger
【解决方案1】：
好的，有几个注意事项：
-
如果您还没有，通过以下方式使您的资产可拉伸（边角没有拉伸，但只有中心）：
- 选择资产并放大，以便更好地细化切片；
- 在 Xcode 菜单中，选择“编辑器”»“显示切片”；
- 点击“开始切片”：
- 点击中间的“水平和垂直拉伸”按钮：
- 将您的指南移动到您想要的位置：
- 现在，当您使用这个新的可拉伸资源添加图像视图并选择“缩放以适合”的“内容模式”时，它将以这样一种方式进行缩放，即中心被拉伸但边缘不被拉伸：
另请参阅 Xcode 文档“Add a resizable area to an image”。
-
在您的单元格中，现在只需添加此图像视图和标签：
- 将标签的前导/尾随/顶部/底部约束定义为从图像视图的边缘插入；
- 将标签的行数定义为零；
- 将图像视图的宽度定义为“>=”容器视图宽度（乘数为 66%）；
- 显然也为它的超级视图定义了气泡的适当前导/尾随/顶部/底部约束；和
- 确保您的单元格使用自动单元格高度。
为了完整起见，另一种方法是创建一个@IBDesignable 视图，您可以在其中使用CAShapeLayer 自己绘制气泡，其path 是cgPath 的UIBezierPath。这就是我在聊天应用程序中所做的。但是这种可拉伸的图像方法也很有效。
顺便说一句，如果您的扬声器和听者气泡的颜色不同，请注意您可能希望为 RTL 语言翻转这些气泡的再现。