可扩展的聊天气泡 UITableViewCell iOS答案

【问题标题】：Expandable Chat bubble UITableViewCell iOS可扩展的聊天气泡 UITableViewCell iOS
【发布时间】：2012-07-31 12:50:16
【问题描述】：

我目前有一个具有消息传递功能的应用程序。它允许用户互相聊天。目前消息从下往上显示（我可以通过旋转表格和单元格来完成此操作）。现在为了区分发送者和接收者，我使用不同颜色的文本。

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

提前感谢您的帮助。

-EDIT- 我用来生成带有气泡的单元格的代码：

[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;

【问题讨论】：

标签： objective-c ios ipad imessage

【解决方案1】：

我使用 4 个 UIView 创建了一个类似气泡的 iMessage。它在代码和 XIB (UITableViewCell) 中都可用。它是高度可定制的。您可以更改颜色、字体、字体大小、尾部或无尾部等。请在此处查看

https://github.com/kerrygrover/iMessageBubble

【讨论】：

我将它用作模板并在我的项目中根据需要进行自定义，效果很好。核心思想是使用不同的形状重叠来产生尾巴效果。
这个有 swift 版本吗？

【解决方案2】：

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

在tableView 委托方法-tableView:heightForRowAtIndexPath: 中可以设置单元格的高度，利用NSString 方法
-sizeWithFont:constrainedToSize:lineBreakMode: 计算单元格内容（实际聊天消息）的适当高度。

【讨论】：

所以我有一个子类 UITableView 单元格的类。在这里，我根据消息设置单元格的文本以及其他一些内容，例如左对齐或右对齐，并更改文本的颜色。我了解如何设置行的高度。我不明白的是在单元格的背景中绘制 UIImage 。我尝试了类似这样的 self.backgroundView = imageView，其中 self 是 UITableView 单元格，而 imageView 是一个图像视图，其图像设置为聊天气泡 png
我无法让气泡正常工作。我将发布一些我在问题中使用的代码。
用上面的方法搞定了。谢谢。我没有使用 resizableImageWithCapInsets，而是使用了 stretchableImageWithLeftCapWidth:rightCapWidth: 方法。
虽然该方法或多或少的工作原理相同，但它已被弃用。你应该使用我提到的较新的方法，你应该能够达到相同的结果。
哦，还有一个警告：如果性能成为问题，应该使用更复杂的方法，即自定义绘制 UITableView 单元格。这个想法是 UITableViewCell 有一个 contentView。您将自己的视图作为子视图添加到 contentView 中，并在此视图中实现 -drawrect: 方法。对于您的聊天气泡，您会将total 图像分成 9 个较小的图像（左上、上、右上、左中、中、右中等）。在中间图像周围，您将在视图上绘制文本。查找fast tableview drawing 了解更多信息。

【解决方案3】：

将UIImageView 添加到您用来显示文本的任何对象。然后只需将其image 属性设置为您想要的任何图像； UIImageView 将为您自动调整大小。

UIImageView Class Reference

【讨论】：

我正在使用自定义 UITableViewCell，有没有办法可以让 UIImageView 作为单元格的背景并将其大小设置为文本的大小？
是的。您可以将UIImageView 拖到单元格中。至于能否将其大小设置为文本的大小，这取决于您使用什么来显示文本。
我正在以编程方式创建单元格，因此我不能只将 UIImageView 绘制到单元格中。
@Dustin 在这种情况下，图像将被拉伸。并且标注箭头或其他东西将被拉伸并且看起来会很错误。