关键词: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 的像素大小是效率最高的。文档原文
使用