在很多的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(, , , 0.8);
UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(sureTapClick:)];
[bgView addGestureRecognizer:tap]; //添加子视图控件
UILabel *textLabel = [[UILabel alloc]initWithFrame:CGRectMake(, , frame.size.width-, )];
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/-,,, )];;
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(, , frame.size.width-, ) cornerRadius:] 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

iOS: 首次使用App时,显示半透明新手指引的更多相关文章

  1. iOS App中第一次运行添加半透明新手指引

    实现方式: 在当前View上一个蒙层,然后找出需要标记的地方圈为白色,那些箭头和提示文字都是UI做出来的图上自带的. 代码: 判断是第一次运行APP后进入页面调用 -(void)newGuide { ...

  2. 【原】就IOS发布app时如何保护文本资源的一个方法

    近期的一个app是本地的,数据源来自于本地的一个.json文件,里面的数据是这个app的灵魂.近期快发布该app了,很担心发布后的.ipa包被竞争者解开然后信息发生泄漏.我的处理策略是:打包的时候放的 ...

  3. 开源整理:Android App新手指引开源控件

    开源整理:Android App新手指引开源控件 一个App第一次与用户接触或者发生大版本更新时,常常会用户进行新手引导,而一个好的新手指引,往往能够方便新用户快速了解操作你的应用功能.新手指引的重要 ...

  4. 转载: 开源整理:Android App新手指引开源控件

    http://blog.coderclock.com/2017/05/22/android/open-source-android-app-guide-view-library/ 开源整理:Andro ...

  5. vue隐藏APP启动时显示的{{}}

    vue隐藏APP启动时显示的{{}} vue组件在编译好之前会显示{{msg}},在官网上找到这个

  6. [iOS 开发] app无法访问本地相册,且不显示在设置 -隐私 - 照片中

    近几天在使用iOS8的Photos Framework访问本地相册时,app即不会弹出是否允许访问提示框,也无法显示在iPhone的设置-隐私-照片的访问列表中,代码如下: PHAuthorizati ...

  7. ios 仿新浪微博 UINavigationController 向左滑动时显示上一个控制器的View.

    仿新浪微博 UINavigationController 向左滑动时显示上一个控制器的View. 实现原理,UINavigationController 的 self.view显示时把当前显示的vie ...

  8. 使用HTML5构建iOS原生APP(2)

    本文转载至 http://ju.outofmemory.cn/entry/18807 有时候我们在内嵌的webview中希望点击一个链接之后,触发iOS原生事件,而不是webview内页面跳转(因为w ...

  9. IOS开发之自动布局显示网络请求内容

    在上一篇博客中详细的介绍了IOS开发中的相对布局和绝对布局,随着手机屏幕尺寸的改变,在App开发中为了适应不同尺寸的手机屏幕,用自动布局来完成我们想要实现的功能和效果显得尤为重要.本人更喜欢使用相对布 ...

随机推荐

  1. 使用递归计算n的阶乘n!

    计算n! 观察公式2可以直接使用递归求解 C++代码如下: #include <iostream> using namespace std; unsigned func(unsigned ...

  2. 06 java 基础:java 循环 递归

    1 递归实现 1 + 2 +3 +4 +5 + .... +100 public static int addSum(int num){ if(num == 1) return 1; return n ...

  3. Java 中的值传递和引用传递问题

    Java 中的值传递和引用传递问题 public class Operation { int data = 50; void change(int data) { data = data + 100; ...

  4. 超简教程:Xgboost在Window上的安装(免编译)

    Xboost在windows安装需要自己编译,编译的过程比较麻烦,而且需要复杂的软件环境.为了免去编译,我这里把编译好的文件上传到网盘供大家下载安装.有了编译好的文件,xgboost的安装变得超级简单 ...

  5. CodeForces 785C Anton and Fairy Tale

    二分. 如果$n≤m$,显然只能$n$天. 如果$n>m$,至少可以$m$天,剩余还可以支撑多少天,可以二分计算得到,也可以推公式.二分计算的话可能爆$long$ $long$,上了个$Java ...

  6. Spring Cloud Config 使用总结

    Spring Cloud Config 使用总结 源码 https://github.com/ChangMuChen/Spring-Boot/tree/master/studies/sourcecod ...

  7. springMVC

    SpringMVC架构流程: 1.用户发送请求至前端控制器DispatcherServlet2.DispatcherServlet收到请求调用HandlerMapping处理器映射器.3.处理器映射器 ...

  8. TCP的那些事-2

    这篇文章是下篇,所以如果你对TCP不熟悉的话,还请你先看看上篇<TCP的那些事儿(上)> 上篇中,我们介绍了TCP的协议头.状态机.数据重传中的东西.但是TCP要解决一个很大的事,那就是要 ...

  9. 趴一趴京东的Ajax动态价格页面

    AJAX,异步加载技术!!! 之前在网上看过很多朋友有一种疑问,为什么在看京东网页的源代码里面看不到价格或则折扣一类的数据,而在网页上正常显示却能看到?...之前我也没有想到是AJAX,因为我写写爬虫 ...

  10. NYOJ 298 点的变换 矩阵乘法

    http://acm.nyist.net/JudgeOnline/problem.php?pid=298 最好还是自己手推一下矩阵式子..不算太难..但是有一些小知识.... 首先当然是矩阵的细节.. ...