前言
當APP增加一個新功能時介陶，很可能產(chǎn)品會要求添加一個引導圖來引導用戶使用。簡單的引導圖無非添加個按鈕點擊之后引導圖消失衬潦，但是復雜的引導圖就不容易實現(xiàn)了斤蔓，比如我在做直播時遇到的需求：
直播引導圖
如圖所示，要滿足以下的需求：
- 點擊區(qū)域1镀岛，能彈出本場排行榜弦牡，區(qū)域1的寬度隨豌豆數(shù)變化
- 點擊區(qū)域2，能彈出對應(yīng)觀眾的個人資料
這個時候漂羊，好的處理方式就是可以在引導圖的區(qū)域1和2處打一個透明的洞驾锰，并在用戶點擊的時候響應(yīng)的是引導圖下面的事件。下面分兩步來處理這個問題走越。
打洞
以下的代碼可以保證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 其余參數(shù) 參考UIView hitTest:withEvent:
* @param returnSuper 是否返回Super的值椭豫。如果*returnSuper=YES,則代表會返回 super hitTest:withEvent:, 否則則按照block的返回值(即使是nil)
*
* @discussion 切記，千萬不要在這個block中調(diào)用self hitTest:withPoint,否則則會造成遞歸調(diào)用旨指。這個方法就是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的實現(xiàn)，則調(diào)用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的實例裸扶，可以設(shè)置顏色
使用方法
//豌豆，頭像打洞搬素，設(shè)置顏色
[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;
};
上一篇：應(yīng)用內(nèi)發(fā)短信/郵件熬尺，messenger摸屠、line、whatsapp分享
下一篇：代碼規(guī)范（Objective-C）
