前言

当APP增加一个新功能时，很可能产品会要求添加一个引导图来引导用户使用。简单的引导图无非添加个按钮点击之后引导图消失，但是复杂的引导图就不容易实现了，比如我在做直播时遇到的需求：

直播引导图

如图所示，要满足以下的需求：

• 点击区域1，能弹出本场排行榜，区域1的宽度随豌豆数变化
• 点击区域2，能弹出对应观众的个人资料

这个时候，好的处理方式就是可以在引导图的区域1和2处打一个透明的洞，并在用户点击的时候响应的是引导图下面的事件。下面分两步来处理这个问题。

打洞

以下的代码可以保证BEMaskViewForGuide的实例局部透明

.h

#import <UIKit/UIKit.h>
#import "UIView+STHitTest.h"

@interface BEMaskViewForGuide : UIView

@property (nonatomic, strong) UIColor *maskColor;

- (void)addTransparentRect:(CGRect)rect;

- (void)addTransparentRoundedRect:(CGRect)rect
                     cornerRadius:(CGFloat)cornerRadius;

- (void)addTransparentRoundedRect:(CGRect)rect
                byRoundingCorners:(UIRectCorner)corners
                      cornerRadii:(CGSize)cornerRadii;

- (void)addTransparentOvalRect:(CGRect)rect;

- (void)reset;

@end

.m

#import "BEMaskViewForGuide.h"

@interface BEMaskViewForGuide ()

@property (nonatomic, weak) CAShapeLayer *fillLayer;

@property (nonatomic, strong) UIBezierPath *overlayPath;

@property (nonatomic, strong) NSMutableArray *transparentPaths;

@end

@implementation BEMaskViewForGuide

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self setUp];
    }
    
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self setUp];
    }
    
    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    
    [self refreshMask];
}

#pragma mark - Public Methods

- (void)reset {
    [self.transparentPaths removeAllObjects];
    
    [self refreshMask];
}

- (void)addTransparentPath:(UIBezierPath *)transparentPath {
    [self.overlayPath appendPath:transparentPath];
    
    [self.transparentPaths addObject:transparentPath];
    
    self.fillLayer.path = self.overlayPath.CGPath;
}

- (void)addTransparentRect:(CGRect)rect {
    UIBezierPath *transparentPath = [UIBezierPath bezierPathWithRect:rect];
    
    [self addTransparentPath:transparentPath];
}

- (void)addTransparentRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius {
    UIBezierPath *transparentPath = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:cornerRadius];
    
    [self addTransparentPath:transparentPath];
}

- (void)addTransparentRoundedRect:(CGRect)rect
                byRoundingCorners:(UIRectCorner)corners
                      cornerRadii:(CGSize)cornerRadii {
    UIBezierPath *transparentPath = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:cornerRadii];
    
    [self addTransparentPath:transparentPath];
}

- (void)addTransparentOvalRect:(CGRect)rect {
    UIBezierPath *transparentPath = [UIBezierPath bezierPathWithOvalInRect:rect];
    
    [self addTransparentPath:transparentPath];
}

#pragma mark - Private Methods

- (void)setUp {
    self.backgroundColor = [UIColor clearColor];
    self.maskColor = [UIColor blackColor];
    
    self.fillLayer.path = self.overlayPath.CGPath;
    self.fillLayer.fillRule = kCAFillRuleEvenOdd;
    self.fillLayer.fillColor = self.maskColor.CGColor;
}

- (UIBezierPath *)generateOverlayPath {
    UIBezierPath *overlayPath = [UIBezierPath bezierPathWithRect:self.bounds];
    [overlayPath setUsesEvenOddFillRule:YES];
    
    return overlayPath;
}

- (void)refreshMask {
    
    UIBezierPath *path = [self generateOverlayPath];
    for (UIBezierPath *transparentPath in self.transparentPaths) {
        [path appendPath:transparentPath];
    }
    
    self.overlayPath = path;
    
    self.fillLayer.frame = self.bounds;
    self.fillLayer.path = self.overlayPath.CGPath;
    self.fillLayer.fillColor = self.maskColor.CGColor;
}

#pragma mark - Setter and Getter Methods

- (UIBezierPath *)overlayPath {
    if (!_overlayPath) {
        _overlayPath = [self generateOverlayPath];
    }
    
    return _overlayPath;
}

- (CAShapeLayer *)fillLayer {
    if (!_fillLayer) {
        CAShapeLayer *fillLayer = [CAShapeLayer layer];
        fillLayer.frame = self.bounds;
        [self.layer addSublayer:fillLayer];
        
        _fillLayer = fillLayer;
    }
    
    return _fillLayer;
}

- (NSMutableArray *)transparentPaths {
    if (!_transparentPaths) {
        _transparentPaths = [NSMutableArray array];
    }
    
    return _transparentPaths;
}

- (void)setMaskColor:(UIColor *)maskColor {
    _maskColor = maskColor;
    
    [self refreshMask];
}

@end

事件穿透

以下代码来保证BEMaskViewForGuide的实例局部事件穿透

.h

#import <UIKit/UIKit.h>

/**
 * @abstract hitTestBlock
 *
 * @param 其余参数 参考UIView hitTest:withEvent:
 * @param returnSuper 是否返回Super的值。如果*returnSuper=YES,则代表会返回 super hitTest:withEvent:, 否则则按照block的返回值(即使是nil)
 *
 * @discussion 切记，千万不要在这个block中调用self hitTest:withPoint,否则则会造成递归调用。这个方法就是hitTest:withEvent的一个代替。
 */
typedef UIView * (^STHitTestViewBlock)(CGPoint point, UIEvent *event, BOOL *returnSuper);
typedef BOOL (^STPointInsideBlock)(CGPoint point, UIEvent *event, BOOL *returnSuper);

@interface UIView (STHitTest)

/// althought this is strong ,but i deal it with copy
@property(nonatomic, strong) STHitTestViewBlock hitTestBlock;

@property(nonatomic, strong) STPointInsideBlock pointInsideBlock;

@end

.m

#import "UIView+STHitTest.h"

@implementation UIView (STHitTest)

const static NSString *STHitTestViewBlockKey = @"STHitTestViewBlockKey";
const static NSString *STPointInsideBlockKey = @"STPointInsideBlockKey";

+ (void)load {
    method_exchangeImplementations(class_getInstanceMethod(self, @selector(hitTest:withEvent:)),
                                   class_getInstanceMethod(self, @selector(st_hitTest:withEvent:)));
    method_exchangeImplementations(class_getInstanceMethod(self, @selector(pointInside:withEvent:)),
                                   class_getInstanceMethod(self, @selector(st_pointInside:withEvent:)));
}

- (UIView *)st_hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    NSMutableString *spaces = [NSMutableString stringWithCapacity:20];
    UIView *superView = self.superview;
    while (superView) {
        [spaces appendString:@"----"];
        superView = superView.superview;
    }
//    NSLog(@"%@%@:[hitTest:withEvent:]", spaces, NSStringFromClass(self.class));
    UIView *deliveredView = nil;
    // 如果有hitTestBlock的实现，则调用block
    if (self.hitTestBlock) {
        BOOL returnSuper = NO;
        deliveredView = self.hitTestBlock(point, event, &returnSuper);
        if (returnSuper) {
            deliveredView = [self st_hitTest:point withEvent:event];
        }
    } else {
        deliveredView = [self st_hitTest:point withEvent:event];
    }
    //    NSLog(@"%@%@:[hitTest:withEvent:] Result:%@", spaces, NSStringFromClass(self.class), NSStringFromClass(deliveredView.class));
    return deliveredView;
}

- (BOOL)st_pointInside:(CGPoint)point withEvent:(UIEvent *)event {
    NSMutableString *spaces = [NSMutableString stringWithCapacity:20];
    UIView *superView = self.superview;
    while (superView) {
        [spaces appendString:@"----"];
        superView = superView.superview;
    }
//    NSLog(@"%@%@:[pointInside:withEvent:]", spaces, NSStringFromClass(self.class));
    BOOL pointInside = NO;
    if (self.pointInsideBlock) {
        BOOL returnSuper = NO;
        pointInside =  self.pointInsideBlock(point, event, &returnSuper);
        if (returnSuper) {
            pointInside = [self st_pointInside:point withEvent:event];
        }
    } else {
        pointInside = [self st_pointInside:point withEvent:event];
    }
    return pointInside;
}

- (void)setHitTestBlock:(STHitTestViewBlock)hitTestBlock {
    objc_setAssociatedObject(self, (__bridge const void *)(STHitTestViewBlockKey), hitTestBlock, OBJC_ASSOCIATION_COPY);
}

- (STHitTestViewBlock)hitTestBlock {
    return objc_getAssociatedObject(self, (__bridge const void *)(STHitTestViewBlockKey));
}

- (void)setPointInsideBlock:(STPointInsideBlock)pointInsideBlock {
    objc_setAssociatedObject(self, (__bridge const void *)(STPointInsideBlockKey), pointInsideBlock, OBJC_ASSOCIATION_COPY);
}

- (STPointInsideBlock)pointInsideBlock {
    return objc_getAssociatedObject(self, (__bridge const void *)(STPointInsideBlockKey));
}

@end

实例

如图所示：

xib文件

• 父view（1）保证透明
• 蒙层view（2），也就是BEMaskViewForGuide的实例，可以设置颜色

使用方法

//豌豆，头像打洞，设置颜色
[self.guideView.maskView addTransparentRoundedRect:CGRectMake(4, 67, self.beanBG.width + 8, 28) cornerRadius:14];
    [self.guideView.maskView addTransparentRoundedRect:CGRectMake(SCREEN_WIDTH - 32 - self.headerListView.width - 3, 24, self.headerListView.width + 6, 44) cornerRadius:22];
    self.guideView.maskView.maskColor = [UIColor gjw_colorWithHex:0x1E2327 alpha:0.86];
    WEAKSELF;
    self.guideView.hitTestBlock =  ^UIView*(CGPoint point, UIEvent *event, BOOL *returnSuper){
        
        CGFloat x = point.x;
        CGFloat y = point.y;
        
        //豌豆事件传递
        if (x > 4 && x < weakSelf.beanBG.width + 8 + 4 && y > 67 && y < 67 + 28) {
            
            [weakSelf.guideView removeFromSuperview];
            weakSelf.guideView = nil;
            *returnSuper = NO;
            return nil;//方便，直接让事件传递，无需返回具体的view
        }
        
        //头像事件传递
        if (x > (SCREEN_WIDTH - 32 - weakSelf.headerListView.width - 3)
            && x < (SCREEN_WIDTH - 32 - 3 + 6)
            && y > 24
            && y < (24 + 44)) {
            
            [weakSelf.guideView removeFromSuperview];
            weakSelf.guideView = nil;
            *returnSuper = NO;
            return nil;
        }
        
        *returnSuper = YES;
        return weakSelf.guideView;
    };

上一篇：应用内发短信/邮件，messenger、line、whatsapp分享
下一篇：代码规范（Objective-C）