iOS: 自定义引导气泡的 N 种实现方法

关键词：iOS、引导页、自定义View、气泡、AutoLayout、自动布局、OC、Objective-C、CALayer、CATextLayer、intrinsicContentSize

在上一篇文章 iOS: 引导页 UIScrollView 自动布局(AutoLayout)详解
中介绍了一个开屏引导页的实现，还有一种引导也很常用，就是浮动气泡引导。说白了就是在进入应用界面后为了防止用户一脸懵逼，给关键的按钮啊文字啊，高亮一下，加上一堆小气泡，气泡里再加点文字介绍。这样就能对界面起到一个说明的作用，也能让用户顺着你的思路使用。

气泡引导的关键技术是自定义气泡 View，气泡起到指示说明和承载消息的作用，是由一张图片和一段文字组成的，实现气泡的方法有好几种：

• UIView 组合：直接组合 UILabel 与 UIImageView
• CALayer： 使用 CATextLayer 结合 CALayer 寄宿图
• 单 UILabel：单独使用 UILabel 并使用 CALayer 寄宿图

其中最简单最灵活的实现方式就是第一种组合法，本文以引导气泡功能为例，总结自定义气泡 View （BubbleView）的组合方式的实现方法，并在后面简单介绍和分析一下本猫尝试后两种方法遇到的坑???。

需求

有三个需要引导的按钮，每一个按钮需要显示一个气泡对功能进行说明，一次只显示一个气泡，每按一次屏幕显示下一个气泡。如图：

基础知识：气泡图片如何合适地拉伸

合适地拉伸

气泡的大小需要适应文字内容，比如只有几个字的时候气泡要紧紧包裹文字不能过大：

文字多的时候就要显示成两行或更多：

直接用一张图行不行？

直接用图会产生整张图片拉伸的效果：

拉伸图片的方法

① 使用 UIImage 提供的拉伸方法：

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets;

该方法是直接操作 UIImage 的，根据原始的 UIImage 生成一个拉伸过的 UIImage。

参数 UIEdgeInsets capInsets 表示图片四个方向上的固定区域大小，中间区域就是可以拉伸的范围：

可拉伸区域的大小会影响绘制的效率。官方文档中指出，可拉伸区域只有 1x1 的像素大小是效率最高的。