iOS: 首次使用App时,显示半透明新手指引-阿里云开发者社区

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

2017-10-12 2403

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

在很多的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(50, 50, 50, 0.8);
    UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(sureTapClick:)];
    [bgView addGestureRecognizer:tap];
    
    //添加子视图控件
    UILabel *textLabel = [[UILabel alloc]initWithFrame:CGRectMake(5, 320, frame.size.width-10, 50)];
    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/2-30,115,100, 200)];;
    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(5, 64, frame.size.width-10, 50) cornerRadius:8] 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]; //移除手势
}