在很多的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. TeX中的引号(UVa272)

    问题: 在Tex中,做双引号的" `` ",右双引号是"  '' "(两个回车左边的).输入一篇包含双引号的文章,你的任务是把它转换成TeX的格式. 样例输入: ...

  2. Xcode10升级项目报错library not found for -lstdc++.6.0.9

    在升级Xcode10后运行项目会发出报了一个错“library not found for -libstdc++.6.0.9”,很简单,就是因为xocde10后这个libstd++.6.0.9库已经不 ...

  3. 使用afl-dyninst fuzz无源码的二进制程序

    转:http://ele7enxxh.com/Use-AFL-dyninst-To-Fuzz-Blackbox-Binaries.html 使用afl-dyninst fuzz无源码的二进制程序 通常 ...

  4. 「WC2016」论战捆竹竿

    「WC2016」论战捆竹竿 前置知识 参考资料:<论战捆竹竿解题报告-王鉴浩>,<字符串算法选讲-金策>. Border&Period 若前缀 \(pre(s,x)​\ ...

  5. CodeForces - 1017C The Phone Number

    题面在这里! 一开始有一种构造猜想,可以把答案降到 sqrt(N) 级别. 考虑把 {1,2,...,n} 分成 sqrt(N) 段,每一段是连续的sqrt(N)个数.然后我们倒着把每一段数放上. 比 ...

  6. BZOJ1002輪狀病毒 暴搜 + 找規律 + 高精度

    @[暴搜, 找規律, 高精度] Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个\(n\)轮状基由圆环上\(n\)个不同的基原子和圆心处一个核原子构成的,2个 ...

  7. [转]应用服务器ApacheSocketUnixthread

    HttpClient容易忽视的细节——连接关闭 博客分类: java   HttpClient client = new HttpClient(); HttpMethod method = new G ...

  8. Codeforces Round #202 (Div. 1) D. Turtles DP

    D. Turtles Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/547/problem/B ...

  9. 2015 UESTC 搜索专题K题 秋实大哥の恋爱物语 kmp

    秋实大哥の恋爱物语 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/61 De ...

  10. Vue学习记录-初探Vue

    写在开头 2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面. 从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative ...