iOS 新手引导页面,透明遮罩指引页(镂空处理)

效果图

这种遮罩通常作为新手引导页面。通常有镂空的一部分,附有描述,指引用户第一次进入界面该如何操作,只显示一次

下面给出两种实现思路

1.UI切好整张图片,直接显示到UIWindow上,不推荐使用该方法。
优点:程序实现简单,便捷。

缺点:适配不同机型需要多套图片(Android内心是崩溃的),后期迭代界面改动则要更新图片,UI工作量庞大。
2.自己实现一个UIView,通过设置其layer的mask属性来实现镂空区域
优点:UI只提供描述的图片即可,减少应用大小,灵活适配不同机型。

缺点:代码较第一种略多,后期迭代界面改动要更新控件frame。

核心代码:

- (void)creatControlWithType:(HKGuidePageType)type completion:(FinishBlock)completion
{
    _finish = completion;
    
    // 遮盖视图
    CGRect frame = [UIScreen mainScreen].bounds;
    UIView *bgView = [[UIView alloc] initWithFrame:frame];
    bgView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.7f];
    [bgView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap:)]];
    [[UIApplication sharedApplication].keyWindow addSubview:bgView];
    
    // 信息提示视图
    UIImageView *imgView = [[UIImageView alloc] init];
    [bgView addSubview:imgView];
    
    // 第一个路径
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:frame];
    switch (type) {
        case HKGuidePageTypeHome:
            // 下一个路径,圆形
            [path appendPath:[UIBezierPath bezierPathWithArcCenter:KSuitPoint(227, 188) radius:KSuitFloat(46) startAngle:0 endAngle:2 * M_PI clockwise:NO]];
            imgView.frame = KSuitRect(220, 40, 100, 100);
            imgView.image = [UIImage imageNamed:@"hi"];
            _guidePageKey = HKGuidePageHomeKey;
            break;
            
        case HKGuidePageTypeMajor:
            // 下一个路径,矩形
            [path appendPath:[[UIBezierPath bezierPathWithRoundedRect:KSuitRect(5, 436, 90, 40) cornerRadius:5] bezierPathByReversingPath]];
            imgView.frame = KSuitRect(100, 320, 120, 120);
            imgView.image = [UIImage imageNamed:@"ly"];
            _guidePageKey = HKGuidePageMajorKey;
            break;
            
        default:
            break;
    }
    
    // 绘制透明区域
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    [bgView.layer setMask:shapeLayer];
}
posted @ 2019-02-27 19:21  淡然微笑_Steven  阅读(3026)  评论(0编辑  收藏  举报