博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iOS: 首次使用App时,显示半透明新手指引
阅读量:6630 次
发布时间:2019-06-25

本文共 2465 字,大约阅读时间需要 8 分钟。

在很多的app,我们都会发现这样一个功能:就是app启动后进入主界面时,会有一个半透明的指引图,它会提示用户如何一步步进行操作,快速的熟悉app的使用规则,极大地方便了用户的使用,也加快了app的推广,优点不言而喻。

我主要介绍一下思路:

  首先创建一个半透明的蒙版覆盖在当前整个屏幕上,然后用贝塞尔曲线绘制白色的提示框(矩形或者圆形),接着给出带箭头图标的文字提示,也即在蒙版上添加自定义的子视图控件。当然,最后给整个蒙版添加一个触摸手势,只要轻轻点击就移除蒙版、子视图、手势,恢复正常界面。

注意:新手引导只需要出现一次就够了,可以通过偏好设置来控制器只出现一次。

演示截图如下:

出现指引                    点击指引消失,按照提示操作

   

代码如下:

颜色宏定义

// 颜色RGB#define XYQColorRGB(r, g, b)   [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]#define XYQColorRGBA(r, g, b, a) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:a]

新手指引

#pragma mark - 新手引导- (void)newUserGuide{    // 这里创建指引在这个视图在window上(蒙版、手势)    CGRect frame = [UIScreen mainScreen].bounds;    UIView * bgView = [[UIView alloc]initWithFrame:frame];    bgView.backgroundColor = XYQColorRGBA(50, 50, 50, 0.8);    UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(sureTapClick:)];    [bgView addGestureRecognizer:tap];        //添加子视图控件    UILabel *textLabel = [[UILabel alloc]initWithFrame:CGRectMake(5, 320, frame.size.width-10, 50)];    textLabel.backgroundColor = [UIColor clearColor];    textLabel.text = @"“点击直接聊天,向左侧滑看报告、删除”";    textLabel.textColor = [UIColor whiteColor];    textLabel.textAlignment = NSTextAlignmentCenter;    textLabel.font = fontSize_16;    [bgView addSubview:textLabel];    UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(frame.size.width/2-30,115,100, 200)];;    imageView.image = [UIImage imageNamed:@"CouponBoard_guid"];    [bgView addSubview:imageView];    [[UIApplication sharedApplication].keyWindow addSubview:bgView];        //create path 重点来了(这里需要添加第一个路径)    UIBezierPath *path = [UIBezierPath bezierPathWithRect:frame];    // 这里添加第二个路径  (这个是矩形)    [path appendPath:[[UIBezierPath bezierPathWithRoundedRect:CGRectMake(5, 64, frame.size.width-10, 50) cornerRadius:8] bezierPathByReversingPath]];        //渲染    CAShapeLayer *shapeLayer = [CAShapeLayer layer];    shapeLayer.path = path.CGPath;    [bgView.layer setMask:shapeLayer];    }/** *   新手指引确定 */- (void)sureTapClick:(UITapGestureRecognizer *)tap{    UIView *guidevView = tap.view;    [guidevView removeFromSuperview]; //移除蒙版    [guidevView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];//移除所有子视图    [guidevView removeGestureRecognizer:tap]; //移除手势}

 

参考资料:

 

欢迎关注我的github:

 

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/5714352.html
,如需转载请自行联系原作者
你可能感兴趣的文章
ArcGIS教程:Geostatistical Analyst 应用演示样例
查看>>
winform网络编程之TcpClient类,TcpListener类和UdpClient类
查看>>
CentOS7下的YUM源服务器搭建详解,过程写的很详细(转)
查看>>
AspNetCore-MVC实战系列(三)之个人中心
查看>>
JSON简述
查看>>
Missing 'name' key attribute on element activity at AndroidMan
查看>>
跨平台的WebRTC客户端框架:OpenWebRTC
查看>>
java大数字操作:BigInteger,BigDecimal(浮点型)
查看>>
WebGIS开发技术杂谈
查看>>
cvs的规范以及介绍(转)
查看>>
Android数据加密概述及多种加密方式 聊天记录及账户加密 提供高质量的数据保护...
查看>>
C++运算符优先级
查看>>
Makefile中用宏定义进行条件编译(gcc -D)/在Makefile中进行宏定义-D【转】
查看>>
iOS中 支付宝钱包具体解释/第三方支付 韩俊强的博客
查看>>
solidity代码
查看>>
【转】C++可变参数列表处理宏va_list、va_start、va_end的使用
查看>>
跨站脚本攻击XSS
查看>>
linux ls 命令
查看>>
Win10 IoT C#开发 4 - UART 串口通信
查看>>
UWP入门(一) -- 先写几个简单控件简单熟悉下(别看这个)
查看>>