在很多的app,我们都会发现这样一个功能:就是app启动后进入主界面时,会有一个半透明的指引图,它会提示用户如何一步步进行操作,快速的熟悉app的使用规则,极大地方便了用户的使用,也加快了app的推广,优点不言而喻。

我主要介绍一下思路:

  首先创建一个半透明的蒙版覆盖在当前整个屏幕上,然后用贝塞尔曲线绘制白色的提示框(矩形或者圆形),接着给出带箭头图标的文字提示,也即在蒙版上添加自定义的子视图控件。当然,最后给整个蒙版添加一个触摸手势,只要轻轻点击就移除蒙版、子视图、手势,恢复正常界面。

注意:新手引导只需要出现一次就够了,可以通过偏好设置来控制器只出现一次。

演示截图如下:

出现指引                    点击指引消失,按照提示操作

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

代码如下:

颜色宏定义

// 颜色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

05-02 21:02