在iMessage中创建看起来像聊天气泡的聊天气泡-高级方式

本文是有关创建（iMessage样式）聊天气泡的两篇文章的第二篇。

第一篇文章在这里可用。

在本教程中，我们将介绍创建带有尾巴的聊天气泡的高级方法。

本教程是使用Swift 4.1和Xcode 9.2创建的。 源代码在Github上可用。

本教程将教您如何创建带有尾巴的聊天气泡，看起来像iMessage中的聊天气泡。 但是本文不是关于创建一个成熟的聊天应用程序的。 我将专注于如何以高级方式创建动态大小的气泡。 开始吧！

1. 我们将创建一个UIBezierPath实例，它看起来像一个聊天气泡
2. 并根据我们内容的大小调整此路径的大小
3. 我们将使用boundingRect(with size: CGSize, options: NSStringDrawingOptions = [], attributes: [NSAttributedStringKey : Any]? = nil, context: NSStringDrawingContext?) -> CGRect String实例的boundingRect(with size: CGSize, options: NSStringDrawingOptions = [], attributes: [NSAttributedStringKey : Any]? = nil, context: NSStringDrawingContext?) -> CGRect方法来计算文本内容的boundingRect(with size: CGSize, options: NSStringDrawingOptions = [], attributes: [NSAttributedStringKey : Any]? = nil, context: NSStringDrawingContext?) -> CGRect

我们可以手动创建此路径。 但是更简单的方法是使用PaintCode。 有了这个出色的应用程序，您可以将任何矢量图像转换为本机Swift代码。

我将在上一课中创建的气泡图像保存为SVG，然后将其导入到PaintCode中。

此代码是由PaintCode生成的。 它在SVG图像上绘制了看起来像我们气泡的路径。

不错。 让我们尝试将气泡的高度（现在等于34）更改为variable height 。

对气泡的宽度执行相同操作（现在等于68）。

最后阶段。 添加UILabel的实例，并使用boundingRect(with size: CGSize , options: NSStringDrawingOptions = [], attributes: [NSAttributedStringKey : Any]? = nil, context: NSStringDrawingContext?) -> CGRect根据其文本和字体计算其大小。 boundingRect(with size: CGSize , options: NSStringDrawingOptions = [], attributes: [NSAttributedStringKey : Any]? = nil, context: NSStringDrawingContext?) -> CGRect boundingRect(with size: CGSize , options: NSStringDrawingOptions = [], attributes: [NSAttributedStringKey : Any]? = nil, context: NSStringDrawingContext?) -> CGRect boundingRect(with size: CGSize , options: NSStringDrawingOptions = [], attributes: [NSAttributedStringKey : Any]? = nil, context: NSStringDrawingContext?) -> CGRect 。

在ViewController添加showIncomingMessage()的实现，并在viewWillAppear()添加其调用。

在showIncomingMessage() ，为传入消息添加showIncomingMessage()路径。

将气泡的width和height分别更改为width和height变量。

最后一部分。 添加UIImageView实例，该实例将用于包含图像。 并为incomingMessageLayer的ImageLayer分配imageView图层的mask属性。

干得好！

本文提示我添加小的更新。

如果要将语音气泡实现为UIView实例（而不是CAShapeLayer实例），则可以使用draw(_:)方法。

创建从UIView继承的BubbleView ，并覆盖其draw(_:)实例方法。

还要分别更改showIncomingMessage()和showOutgoingMessage(text: String)实现。

您可以从源代码存储库的bubble_view分支中找到这些更改。

本教程的源代码可在Github上获得。