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(, , , 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时,显示半透明新手指引的更多相关文章
- iOS App中第一次运行添加半透明新手指引
实现方式: 在当前View上一个蒙层,然后找出需要标记的地方圈为白色,那些箭头和提示文字都是UI做出来的图上自带的. 代码: 判断是第一次运行APP后进入页面调用 -(void)newGuide { ...
- 【原】就IOS发布app时如何保护文本资源的一个方法
近期的一个app是本地的,数据源来自于本地的一个.json文件,里面的数据是这个app的灵魂.近期快发布该app了,很担心发布后的.ipa包被竞争者解开然后信息发生泄漏.我的处理策略是:打包的时候放的 ...
- 开源整理:Android App新手指引开源控件
开源整理:Android App新手指引开源控件 一个App第一次与用户接触或者发生大版本更新时,常常会用户进行新手引导,而一个好的新手指引,往往能够方便新用户快速了解操作你的应用功能.新手指引的重要 ...
- 转载: 开源整理:Android App新手指引开源控件
http://blog.coderclock.com/2017/05/22/android/open-source-android-app-guide-view-library/ 开源整理:Andro ...
- vue隐藏APP启动时显示的{{}}
vue隐藏APP启动时显示的{{}} vue组件在编译好之前会显示{{msg}},在官网上找到这个
- [iOS 开发] app无法访问本地相册,且不显示在设置 -隐私 - 照片中
近几天在使用iOS8的Photos Framework访问本地相册时,app即不会弹出是否允许访问提示框,也无法显示在iPhone的设置-隐私-照片的访问列表中,代码如下: PHAuthorizati ...
- ios 仿新浪微博 UINavigationController 向左滑动时显示上一个控制器的View.
仿新浪微博 UINavigationController 向左滑动时显示上一个控制器的View. 实现原理,UINavigationController 的 self.view显示时把当前显示的vie ...
- 使用HTML5构建iOS原生APP(2)
本文转载至 http://ju.outofmemory.cn/entry/18807 有时候我们在内嵌的webview中希望点击一个链接之后,触发iOS原生事件,而不是webview内页面跳转(因为w ...
- IOS开发之自动布局显示网络请求内容
在上一篇博客中详细的介绍了IOS开发中的相对布局和绝对布局,随着手机屏幕尺寸的改变,在App开发中为了适应不同尺寸的手机屏幕,用自动布局来完成我们想要实现的功能和效果显得尤为重要.本人更喜欢使用相对布 ...
随机推荐
- TeX中的引号(UVa272)
问题: 在Tex中,做双引号的" `` ",右双引号是" '' "(两个回车左边的).输入一篇包含双引号的文章,你的任务是把它转换成TeX的格式. 样例输入: ...
- Xcode10升级项目报错library not found for -lstdc++.6.0.9
在升级Xcode10后运行项目会发出报了一个错“library not found for -libstdc++.6.0.9”,很简单,就是因为xocde10后这个libstd++.6.0.9库已经不 ...
- 使用afl-dyninst fuzz无源码的二进制程序
转:http://ele7enxxh.com/Use-AFL-dyninst-To-Fuzz-Blackbox-Binaries.html 使用afl-dyninst fuzz无源码的二进制程序 通常 ...
- 「WC2016」论战捆竹竿
「WC2016」论战捆竹竿 前置知识 参考资料:<论战捆竹竿解题报告-王鉴浩>,<字符串算法选讲-金策>. Border&Period 若前缀 \(pre(s,x)\ ...
- CodeForces - 1017C The Phone Number
题面在这里! 一开始有一种构造猜想,可以把答案降到 sqrt(N) 级别. 考虑把 {1,2,...,n} 分成 sqrt(N) 段,每一段是连续的sqrt(N)个数.然后我们倒着把每一段数放上. 比 ...
- BZOJ1002輪狀病毒 暴搜 + 找規律 + 高精度
@[暴搜, 找規律, 高精度] Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个\(n\)轮状基由圆环上\(n\)个不同的基原子和圆心处一个核原子构成的,2个 ...
- [转]应用服务器ApacheSocketUnixthread
HttpClient容易忽视的细节——连接关闭 博客分类: java HttpClient client = new HttpClient(); HttpMethod method = new G ...
- 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 ...
- 2015 UESTC 搜索专题K题 秋实大哥の恋爱物语 kmp
秋实大哥の恋爱物语 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/61 De ...
- Vue学习记录-初探Vue
写在开头 2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面. 从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative ...