可扩展聊天气泡UITableViewCell iOS

Question

我目前有一个具备消息功能的应用程序，可以让用户彼此聊天。当前，消息从下往上显示（通过旋转表格和单元格实现）。为了区分发送者和接收者，我使用不同颜色的文本。

我想使用气泡图片作为消息的背景，这样应用看起来更像iMessage。我知道有一种方法可以调整图像大小，但是我无法理解。我需要一种特殊类型的图像吗？如果需要，如何调整该图像的大小，使其适合文本并将其放置为背景？

非常感谢您的帮助。

-编辑- 我正在使用的代码生成具有气泡的单元格：

[self.textLabel setFont:[UIFont fontWithName:@"Helvetica" size:20]];
[self.textLabel setNumberOfLines:0];
CGSize size = [message.message sizeWithFont:self.textLabel.font];

    [self.textLabel setFrame:CGRectMake(690.0f - (size.width + 5.0f), 8.0f, size.width + 5.0f, size.height)];
    UIImage *bubble = [[UIImage imageNamed:@"aqua.png"] stretchableImageWithLeftCapWidth:24 topCapHeight:15];
    UIImageView *bubbleView = [[UIImageView alloc] initWithFrame:CGRectMake(704 - (size.width + 25.0f), 2.0f, size.width + 25.0f, size.height + 15.0f)];
    bubbleView.image = bubble;
    self.backgroundColor = [UIColor clearColor];
    self.opaque = NO;
    self.backgroundView = bubbleView;

- Siddharth Dhingra

Answer 1

我使用4个UIView创建了一个类似于iMessage的气泡，并提供了代码和XIB（UITableViewCell）两种方式。它高度可定制，您可以更改颜色、字体、字号、是否有尾巴等等。请在此处查看。

https://github.com/kerrygrover/iMessageBubble

- kerry

---

我将其用作模板，并根据我的项目进行定制，它运行良好。核心思想是使用不同的形状重叠以生成尾部效果。 - Yao Li

这个有 Swift 版本吗？ - Sharanya K M

Answer 2

有几种方式可以实现这个功能。可能最简单的解决方案是使用UIImage 的 -resizableImageWithCapInsets: 方法。您可以为每个聊天消息创建一个表格视图单元格，并在背景上绘制此图像，并使图像在 cap inset 点处拉伸。

在 tableView 代理方法-tableView:heightForRowAtIndexPath: 中，您可以设置单元格的高度，利用NSString 方法-sizeWithFont:constrainedToSize:lineBreakMode:来计算单元格内容（实际聊天消息）的正确高度。

- Wolfgang Schreurs

---

所以我有一个继承自UITableView cell的类。在这里，我设置单元格的文本以及其他一些东西，比如根据消息设置左对齐或右对齐，并更改文本的颜色。我知道如何设置行的高度。我不明白的是如何在单元格的背景中绘制UIImage。我尝试了像这样的代码：self.backgroundView = imageView，其中self是UITableView cell，imageView是一个图像视图，其图像设置为聊天气泡png。 - Siddharth Dhingra

我无法使气泡正常工作。我将在我的问题中发布一些我正在使用的代码。 - Siddharth Dhingra

通过上述方法，我已经理解并解决了问题。感谢您的帮助。与其使用resizableImageWithCapInsets，我使用了stretchableImageWithLeftCapWidth:rightCapWidth:方法。 - Siddharth Dhingra

虽然那种方法基本上是可以工作的，但它已经被弃用了。你应该使用我提到的新方法，这样你应该能够达到相同的结果。 - Wolfgang Schreurs

哦，还有一个警告：如果性能成为问题，应该使用一种更复杂的方法，即自定义绘制UITableView单元格。想法是UITableViewCell拥有contentView。您将自己的视图添加为contentView的子视图，并在此视图中实现“-drawrect:”方法。对于您的聊天气泡，您将把“total”图像分成9个较小的图像（左上，上方，右上，左中，中间，右中等）。在中心图像周围，您将在视图上绘制文本。查找“快速tableview绘制”以获取更多信息。 - Wolfgang Schreurs

Answer 3

将UIImageView添加到您用于显示文本的任何对象中。然后，只需将其image属性设置为所需的图像即可；UIImageView会自动调整大小。

UIImageView类参考

- Dustin

---

我正在使用自定义的UITableViewCell，有没有办法将UIImageView设置为单元格的背景，并将其大小设置为文本的大小？ - Siddharth Dhingra

是的，你可以将一个UIImageView拖入单元格中。至于能否将其大小设置为文本的大小，这取决于你用来显示文本的工具。 - Dustin

我正在以编程方式创建单元格，因此无法将UIImageView直接绘制到单元格中。 - Siddharth Dhingra

@Dustin 在这种情况下，图像将被拉伸。并且标注箭头或其他内容也会随之拉伸，并且看起来会很糟糕。 - Nikita Sharma Sahu