iOS半透明新手引导 手把手教你做

移动开发
这种类型的新手引导比较常见,用于告诉用户某个按钮的作用,或者提醒用户可以进行某种交互操作。引导样式是在界面上加了一个半透明的引导图,高亮部分就是要突出的区域

一、效果展示

[[142842]]

这种类型的新手引导比较常见,用于告诉用户某个按钮的作用,或者提醒用户可以进行某种交互操作。引导样式是在界面上加了一个半透明的引导图,高亮部分就是要突出的区域

二、怎么做?

方案有很多种,不同的方案有不同的优缺点,这里列举两种常见的方案

1. 方案一:生成整张引导图

(1). 导出引导图

让设计师导出各个尺寸的引导图,引导图只包含指引部分,不包括背景,导出的引导图样式如下:

 

[[142843]]

需要导出iPhone4,iPhone5,iPhone6,iPhone6 plus 共4个尺寸,如果适配iPad,还需要导出iPad的

 

(2). 编码

因为整张图导出了,所以代码部分就简单了,不需要考虑布局问题,直接生成一个imageView放上去,然后给它添加个点击事件即可

代码如下:

  1. - (void)addGuideView { 
  2.     NSString *imageName = nil; 
  3.     if (DEVICE_IS_IPHONE5) { 
  4.         imageName = @"guide-568h"
  5.     } else { 
  6.         imageName = @"guide"
  7.     } 
  8.  
  9.     UIImage *image = [UIImage imageNamed:imageName]; 
  10.     UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; 
  11.     imageView.frame = self.view.bounds; 
  12.     imageView.userInteractionEnabled = YES; 
  13.  
  14.     UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismissGuideView)]; 
  15.     [imageView addGestureRecognizer:tap]; 
  16.  
  17.     [self.view addSubview:imageView]; 

这里需要特别注意:
@3x 的图片需要iOS8以上的系统才能够自动识别出来,如果要向前兼容,则图片名那里需要自行判断设备类型,然后指定对应的图片名称

(3). 优缺点

这种方案的优点是
a. 快速
只要设计师做好效果图以后,把蒙层导出成各种规格即可,90%的工作量都在设计师身上,程序员只需要简单地添加视图和事件即可

b. 维护成本低
当界面发生变化,或者引导图需要调整时,只需要设计师重新生成图片,然后替换就可以了

但这种方案的缺点也很多:
a. 图片占据空间大
每种设备一张图片,图片还是全屏规格的,可能还要适配横屏,明显会增加app安装包的大小

b. 图片无法复用
一张引导图只能用于一个地方,其他地方不可能会用得上

2. 方案二:图片拼接

图片拼接的思路是这样的,通过若干张图片拼成一个遮罩层,然后再在上面放其他元素,如下图所示

 

[[142844]]

(1). 准备图片

 

这里需要准备3张图片
a. 空心的椭圆遮罩层

 

[[142845]]

 

中间是透明,周围是白色的,白色部分可以在遮罩过程中修改成任意的颜色

 

b. 小箭头

 

[[142846]]

c. 确定按钮

 

 

[[142847]]

#p#

(2). 编码

 

这里只介绍部分代码的编写过程

a. 接口
接口的定义:

  • (void)showInView:(UIView )view maskBtn:(UIButton )btn;
    view:引导图的父视图
    btn:被遮罩的按钮

接口的实现:

  1. (void)showInView:(UIView )view maskBtn:(UIButton )btn { 
  2. self.parentView = view; 
  3. self.maskBtn = btn; 
  4.  
  5. self.alpha = 0
  6. [view addSubview:self]; 
  7. [UIView animateWithDuration:0.2 animations:^{ 
  8.  
  9.   self.alpha = 1
  10. } completion:nil]; 

b. 修改遮罩层
加载空心的椭圆图片后,先对白色区域进行处理,把它改成黑色半透明
UIImage image = [UIImage imageNamed:@"whiteMask"];
image = [image maskImage:[[UIColor blackColor] colorWithAlphaComponent:0.71]];
UIImageView imageView = [[UIImageView alloc] initWithImage:image];

  1. (UIImage )maskImage:(UIColor )maskColor 
  2. CGRect rect = CGRectMake(00, self.size.width, self.size.height); 
  3.  
  4. UIGraphicsBeginImageContext(rect.size); 
  5.  
  6. CGContextRef context = UIGraphicsGetCurrentContext(); 
  7. CGContextTranslateCTM(context, 0, rect.size.height); 
  8. CGContextScaleCTM(context, 1.0, -1.0); 
  9. CGContextClipToMask(context, rect, self.CGImage); 
  10. CGContextSetFillColorWithColor(context, maskColor.CGColor); 
  11. CGContextFillRect(context, rect); 
  12.  
  13. UIImage *smallImage = UIGraphicsGetImageFromCurrentImageContext(); 
  14.  
  15. UIGraphicsEndImageContext(); 
  16.  
  17. return smallImage; 
  • 这里会将图片中白色的部分改成任意的颜色,我们要将空心的椭圆图片变成这样

     

    [[142848]]

     

    c. 生成上下左右4个黑色半透明视图

    分别放在空心椭圆图片的上、下、左、右四个方位

     

    1. (UIView *)topMaskView { 
    2. if (!_topMaskView) { 
    3.  
    4.   UIView *view = [[UIView alloc] init]; 
    5.   view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.71]; 
    6.   _topMaskView = view; 
    7. return _topMaskView; 
    1. (UIView *)bottomMaskView { 
    2. if (!_bottomMaskView) { 
    3.  
    4.   UIView *view = [[UIView alloc] init]; 
    5.   view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.71]; 
    6.   _bottomMaskView = view; 
    7. return _bottomMaskView; 
    1. (UIView *)leftMaskView { 
    2. if (!_leftMaskView) { 
    3.  
    4.   UIView *view = [[UIView alloc] init]; 
    5.   view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.71]; 
    6.   _leftMaskView = view; 
    7. return _leftMaskView; 
    1. (UIView *)rightMaskView { 
    2. if (!_rightMaskView) { 
    3.  
    4.   UIView *view = [[UIView alloc] init]; 
    5.   view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.71]; 
    6.   _rightMaskView = view; 
    7. return _rightMaskView; 

d. 视图布局
这里有几个需要注意的地方:
c-1. 被拼接的视图的 x,y,width,height 的值需要取整,因为浮点数可能会导致衔接部位出现白边,尤其是在iPhone6 plus上,原因是手机的分辨率问题,所以这里***使用整数

c-2. 在 layoutSubviews 函数中进行布局,这里布局的好处是横竖屏适配都能够平滑过渡,而且不需要手动更新

布局代码如下:

  1. (void)layoutSubviews { 
  2. [super layoutSubviews]; 
  3. self.frame = _parentView.bounds; 
  4. _maskBg.frame = self.bounds; 
  5. _btnMaskView.center = [_maskBtn.superview convertPoint:_maskBtn.center toView:_maskBtn.superview]; 
  6.  
  7. CGRect btnMaskRect = _btnMaskView.frame; 
  8. btnMaskRect.size = CGSizeMake(floor(btnMaskRect.size.width), floor(btnMaskRect.size.height)); 
  9. btnMaskRect.origin = CGPointMake(floor(btnMaskRect.origin.x), floor(btnMaskRect.origin.y)); 
  10. _btnMaskView.frame = btnMaskRect; 
  11.  
  12. _topMaskView.left = 0
  13. _topMaskView.top = 0
  14. _topMaskView.height = _btnMaskView.top; 
  15. _topMaskView.width = self.width; 
  16.  
  17. _bottomMaskView.left = 0
  18. _bottomMaskView.top = _btnMaskView.bottom; 
  19. _bottomMaskView.width = self.width; 
  20. _bottomMaskView.height = self.height - _bottomMaskView.top; 
  21.  
  22. _leftMaskView.left = 0
  23. _leftMaskView.top = _btnMaskView.top; 
  24. _leftMaskView.width = _btnMaskView.left; 
  25. _leftMaskView.height = _btnMaskView.height; 
  26.  
  27. _rightMaskView.left = _btnMaskView.right; 
  28. _rightMaskView.top = _btnMaskView.top; 
  29. _rightMaskView.width = self.width - _rightMaskView.left; 
  30. _rightMaskView.height = _btnMaskView.height; 
  31.  
  32. _arrwoView.right = _btnMaskView.left + 24
  33. _arrwoView.bottom = _btnMaskView.top - 8
  34. _tipsLabel.right = _arrwoView.left - 6
  35. _tipsLabel.bottom = _arrwoView.top + 10
  36.  
  37. _okBtn.centerX = self.width/2
  38. _okBtn.bottom = _btnMaskView.top - 80
(3). 优缺点

优点:
a. 节约空间
一般就只需要几个小图,然后就可以组装成一张引导图了

b. 图片可重用
按钮、椭圆图、小箭头这一类的图片可能被其他引导图继续使用

缺点:
a. 编码时间较长
每一个界面元素都需要通过编码来实现,每一次改动也需要调整代码

三、总结

***种方案比较适合小项目,主要是速度快,适合快速迭代
第二种方案适合长期更新的项目,节约app空间
Demo地址:
https://github.com/sunljz/demo/tree/master/GuideDemo

【编辑推荐】

 

  1. iOS开发基础知识:Core Animation(核心动画)
  2. iOS开发的一些奇巧淫技
  3. iOS开发的一些奇巧淫技2
  4. iOS开发知识体系
  5. 关于iOS多线程,你看我就够了

 

【责任编辑:倪明 TEL:(010)68476606】

责任编辑:倪明 来源: 简书
相关推荐

2017-05-18 12:45:35

数据分析数据理解数据

2020-07-23 14:39:28

系统权限设计

2021-04-06 22:48:41

数据集工具Python

2015-07-28 14:27:44

2011-01-10 14:41:26

2011-05-03 15:59:00

黑盒打印机

2021-07-14 09:00:00

JavaFX开发应用

2011-03-28 16:14:38

jQuery

2021-10-03 20:26:56

系统模块标签

2011-02-22 13:46:27

微软SQL.NET

2021-02-26 11:54:38

MyBatis 插件接口

2021-12-28 08:38:26

Linux 中断唤醒系统Linux 系统

2020-10-13 11:21:57

框架自动化开发

2022-03-14 14:47:21

HarmonyOS操作系统鸿蒙

2023-04-26 12:46:43

DockerSpringKubernetes

2022-01-08 20:04:20

拦截系统调用

2022-07-27 08:16:22

搜索引擎Lucene

2022-12-07 08:42:35

2020-07-09 08:59:52

if else模板Service

2024-10-16 11:40:47

点赞
收藏

51CTO技术栈公众号