前言
当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）
