iOS开发新手引导页面，透明遮罩指引页设计方案2018-11-26

首先看一下效果图：
demo地址：https://github.com/Wululu6/WLGuidePageHomeKey.git

20180421152137506.gif

这种遮罩通常作为新手引导页面。通常有镂空的一部分，附有描述，指引用户第一次进入界面该如何操作，只显示一次。
下面给出两种实现思路：
第一种：UI切好整张图片，直接显示到UIWindow上，不推荐使用该方法。

优点：程序实现简单，便捷。

缺点：适配不同机型需要多套图片（Android内心是崩溃的），后期迭代界面改动则要更新图片，UI工作量庞大。

第二种：Demo使用的方法，自己实现一个UIView，通过设置其layer的mask属性来实现镂空区域。

优点：UI只提供描述的图片即可，减少应用大小，灵活适配不同机型。

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

下面贴上核心代码：
控制器，ViewController：

#import "ViewController.h"

#import "WLGuidePageManager.h"



@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor = [UIColor whiteColor];
    
    // 创建控件
    [self creatControl];
    
    [[NSUserDefaults standardUserDefaults] setBool:NO forKey:WLGuidePageHomeKey];
    
}

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    
    // 引导视图
    [self showGuidePage];
    
}

- (void)creatControl
{
    // 底图
    UIImageView *imgView = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    imgView.image = [UIImage imageNamed:@"backImg"];
    imgView.contentMode = UIViewContentModeScaleAspectFill;
    [self.view addSubview:imgView];
}

- (void)showGuidePage {
    
    // 判断是否已显示过
    if (![[NSUserDefaults standardUserDefaults] boolForKey:WLGuidePageHomeKey]) {
        // 显示
        [[WLGuidePageManager shareManager] showGuidePageWithType:WLGuidePageTypeHome completion:^{
            [[WLGuidePageManager shareManager] showGuidePageWithType:WLGuidePageTypeMajor];
        }];
    }
}

封装的指引页管理类，WLGuidePageManager.h：

#import 

#import 

#define WLGuidePageHomeKey @"WLGuidePageHomeKey"
#define WLGuidePageMajorKey @"WLGuidePageMajorKey"

NS_ASSUME_NONNULL_BEGIN

#define KMainW [UIScreen mainScreen].bounds.size.width
#define KMainH [UIScreen mainScreen].bounds.size.height

#define KScreenRate (375 / KMainW)
#define KSuitFloat(float) (float / KScreenRate)
#define KSuitSize(width, height) CGSizeMake(width / KScreenRate, height / KScreenRate)
#define KSuitPoint(x, y) CGPointMake(x / KScreenRate, y / KScreenRate)
#define KSuitRect(x, y, width, heigth) CGRectMake(x / KScreenRate, y / KScreenRate, width / KScreenRate, heigth / KScreenRate)


typedef void(^FinishBlock)(void);


typedef NS_ENUM(NSInteger, WLGuidePageType) {
    WLGuidePageTypeHome = 0,
    WLGuidePageTypeMajor,
};

@interface WLGuidePageManager : NSObject

// 获取单例
+ (instancetype)shareManager;

/**
 显示方法
 
 @param type 指引页类型
 */
- (void)showGuidePageWithType:(WLGuidePageType)type;

/**
 显示方法
 
 @param type 指引页类型
 @param completion 完成时回调
 */
- (void)showGuidePageWithType:(WLGuidePageType)type completion:(FinishBlock)completion;

@end

NS_ASSUME_NONNULL_END

WLGuidePageManager.m：

#import "WLGuidePageManager.h"


@interface WLGuidePageManager ()

@property (nonatomic, copy) FinishBlock finish;
@property (nonatomic, copy) NSString *guidePageKey;
@property (nonatomic, assign) WLGuidePageType guidePageType;

@end


@implementation WLGuidePageManager

+ (instancetype)shareManager {
    static WLGuidePageManager *manager = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        manager = [[WLGuidePageManager alloc] init];
    });
    return manager;
}

- (void)showGuidePageWithType:(WLGuidePageType)type {
    [self creatControlWithType:type completion:NULL];
}

- (void)showGuidePageWithType:(WLGuidePageType)type completion:(FinishBlock)completion {
    [self creatControlWithType:type completion:completion];
}

- (void)creatControlWithType:(WLGuidePageType)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 WLGuidePageTypeHome:
            // 下一个路径，圆形
            [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 = WLGuidePageHomeKey;
            break;
            
        case WLGuidePageTypeMajor:
            // 下一个路径，矩形
            [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 = WLGuidePageMajorKey;
            break;
            
        default:
            break;
    }
    
    // 绘制透明区域
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    [bgView.layer setMask:shapeLayer];
}

- (void)tap:(UITapGestureRecognizer *)recognizer {
    UIView *bgView = recognizer.view;
    [bgView removeFromSuperview];
    [bgView removeGestureRecognizer:recognizer];
    [[bgView subviews] makeObjectsPerformSelector:@selector(removeFromSuperview)];
    bgView = nil;
    [[NSUserDefaults standardUserDefaults] setBool:YES forKey:_guidePageKey];
    
    if (_finish) _finish();
}


@end

写博客的初心是希望大家共同交流成长，博主水平有限难免有偏颇之处，欢迎批评指正。