zoukankan      html  css  js  c++  java
  • 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];
    }
    
  • 相关阅读:
    20180925-2 功能测试
    【PL/SQL编程】循环语句
    【PL/SQL编程】条件语句
    【PL/SQL编程】变量和常量
    【PL/SQL编程】数据类型说明
    【PL/SQL编程】注释说明
    【PL/SQL编程】SQL与PL/SQL的区别
    【SQL查询】查询结果翻译成其他值_decode
    【SQL查询】日期的转换_to_date/to_char
    【SQL查询】视图_view
  • 原文地址:https://www.cnblogs.com/StevenHuSir/p/10446053.html
Copyright © 2011-2022 走看看