美文网首页
iOS功能引导展示

iOS功能引导展示

作者: 请叫我魔法师 | 来源:发表于2017-12-09 15:34 被阅读0次

APP首次安装,有些新增的功能或者比较重要的功能,需要引导用户使用。
一般用个黑色半透明背景,显示需要展示功能的位置,添加图片说明,点击按钮下一步或者消失。
先如图:


第一个功能引导.png 第二个.png

首次显示:

- (void)addGuideView {
    
    _guideCount = 1;
    
    bgView = [[UIView alloc] initWithFrame:self.view.bounds];
    bgView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.7];
    [self.view addSubview:bgView];
    
    path1 = [UIBezierPath bezierPathWithRect:self.view.bounds];
    UIBezierPath *path2 = [[UIBezierPath bezierPathWithRoundedRect:_firstCellR cornerRadius:30] bezierPathByReversingPath];
//    两个路径拼接
    [path1 appendPath:path2];
    
//    设置mask遮罩
    maskL = [[CAShapeLayer alloc] init];
    maskL.path = path1.CGPath;
    bgView.layer.mask = maskL;
    
    btn1 = [[UIButton alloc] initWithFrame:CGRectMake(100, _firstCellR.origin.y+60, 200, 100)];
    [btn1 setTitle:@"点我查看下一步" forState:0];
    btn1.backgroundColor = [UIColor purpleColor];
    [btn1 addTarget:self action:@selector(btn1Click:) forControlEvents:64];
    [bgView addSubview:btn1];
}

下一步

- (void)btn1Click:(UIButton *)sender {
    
    //全局变量,记录点击次数
    _guideCount++;
    
    if (_guideCount == 2) {
        
//        重新赋值
        path1 = [UIBezierPath bezierPathWithRect:self.view.bounds];
        UIBezierPath *path3 = [[UIBezierPath bezierPathWithRoundedRect:_secondCellR cornerRadius:0] bezierPathByReversingPath];
        [path1 appendPath:path3];
        maskL.path = path1.CGPath;
        bgView.layer.mask = maskL;
        
//        更改引导信息
        sender.frame = CGRectMake(10, _secondCellR.origin.y+60, 200, 100);
        sender.backgroundColor = [UIColor orangeColor];
        [btn1 setTitle:@"点我引导结束" forState:0];
    }
    
//    最后结束引导,移除view
    if (_guideCount == 3) {
        bgView.hidden = YES;
        [bgView removeFromSuperview];
    }
}

如果是需要展示的内容是在固定的位置,坐标写死就行了,比较省事。我这个里面是展示cell的,所以需要先得到位置后才能展示。

demo

相关文章

网友评论

      本文标题:iOS功能引导展示

      本文链接:https://www.haomeiwen.com/subject/zfauixtx.html