iOS: 首次使用App时,显示半透明新手指引

简介:

在很多的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]; //移除手势
}
复制代码

 

参考资料:

http://www.jianshu.com/p/00d4fe5a3c1a

http://www.jianshu.com/p/b83aefdc9519

 

欢迎关注我的github:https://github.com/xiayuanquan

 

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/5714352.html ,如需转载请自行联系原作者
相关文章
|
2月前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
161 3
|
2月前
|
iOS开发 开发者
一键制作 iOS 上架 App Store 描述文件教程
一键制作 iOS 上架 App Store 描述文件教程
|
2月前
uni-app 185iOS端兼容处理
uni-app 185iOS端兼容处理
43 1
|
2月前
|
Android开发 iOS开发 开发者
App备案-iOS云管理式证书 Distribution Managed 公钥及证书SHA-1指纹的获取方法
App备案-iOS云管理式证书 Distribution Managed 公钥及证书SHA-1指纹的获取方法
241 0
|
2月前
如何解决iOS16系统app首次启动总是弹出允许粘贴提示框问题
如何解决iOS16系统app首次启动总是弹出允许粘贴提示框问题
37 0
如何解决iOS16系统app首次启动总是弹出允许粘贴提示框问题
|
2月前
|
大数据 测试技术 数据库
ios app性能分析
ios app性能分析
21 2
|
2月前
|
移动开发 网络协议 Linux
We discovered one or more bugs in your app when reviewed on iPhone and iPad running iOS 14.1
We discovered one or more bugs in your app when reviewed on iPhone and iPad running iOS 14.1
37 0
|
2月前
|
定位技术 开发工具 iOS开发
ios9定位服务的app进入后台三分钟收不到经纬度,应用被挂起问题及解决方案
ios9定位服务的app进入后台三分钟收不到经纬度,应用被挂起问题及解决方案
26 0
|
2月前
|
iOS开发 网络架构 UED
ios app的分类与本质,感想
ios app的分类与本质,感想
26 0
|
2月前
|
iOS开发 开发者
【教程】uni-app iOS 打包解决 profile 文件与私钥证书不匹配问题
【教程】uni-app iOS 打包解决 profile 文件与私钥证书不匹配问题