在很多的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. Hadoop案例(一)之日志清洗

    日志清洗案例 一. 简单解析版 1)需求 去除日志中字段长度小于等于11的日志. 2)输入数据 /Sep/::: +] "-" "Mozilla/4.0 (compati ...

  2. 小甲鱼Python笔记(类)

    类和对象 类的构造方法 def __init__(): 1 class People: 2 def __init__(self,name): 3 self.name = name 注意:在构造方法中的 ...

  3. Asp.net MVC CSS/Javascript Bundle 配置文件

    Asp.net mvc 中使用 Web Optimization 可以合并.压缩JS和CSS文件,但是每次修改都要改代码 ~/App_Start/BundleConfig.cs ,遂有了将它挪到配置文 ...

  4. Vijos1448 校门外的树 [树状数组]

    题目传送门 校门外的树 描述 校门外有很多树,有苹果树,香蕉树,有会扔石头的,有可以吃掉补充体力的……如今学校决定在某个时刻在某一段种上一种树,保证任一时刻不会出现两段相同种类的树,现有两个操作:K= ...

  5. Python加密模块-pycryptodome

    这个模块可以避开Pycrypto安装时带来的一系列包依赖问题. 安装命令: pip install pycryptodome 使用实例: from Crypto.Cipher import AES k ...

  6. 2017/11/21 Leetcode 日记

    2017/11/21 Leetcode 日记 496. Next Greater Element I You are given two arrays (without duplicates) num ...

  7. BZOJ2434 NOI2011阿狸的打字机

    询问x这个串在y中出现的次数. fail数组有一个性质就是一旦a的fail指向b那么b所代表的字串一定是a的后缀. 所以我们看fail树(即按fail反向建树)中x的子树有多少y的结点即可. 这个操作 ...

  8. 【欧拉函数】BZOJ4173-数学

    [题目大意] [思路] 基本是popoqqq大爷的题解,稍微添加了几句自己的注释,方便理解 同理,如果n%k+m%k<k等价于0 =∑([(n+m)/k]-[n/k]-[m/k])×φ(k) … ...

  9. [CodeForces-513E2]Subarray Cuts

    题目大意: 给你一个数列,从中选出k个互不重叠的非空子串,定义s[i]为第i个子串的和,求|s[1]-s[2]|+|s[2]-s[3]|+...+|s[k-1]-s[k]|的最大值. 思路: 考虑将绝 ...

  10. [MVC4]Data Annotations Extensions:无法使用EmailAddress等验证特性的解决方法

    本文地址:http://www.cnblogs.com/egger/p/3404159.html  欢迎转载 ,请保留此链接๑•́ ₃•̀๑! 数据注解(Data Annotations) Web应用 ...