iOS开发- 自定义遮罩视图(引导, 功能说明)源码+解析

青旅半醒 2022-08-05 13:17 276阅读 0赞

# iOS开发- 自定义遮罩视图(引导, 功能说明)源码+解析 #

我们平时使用App的时候, 经常在第一次使用的时候, 会有类似”新手教程”之类的东西, 来引导我们应该如何使用这个App。

但是这个”新手教程”不同于常规的引导页(引导页指第一次打开App时候, 弹出的那种介绍视图。 他是静态的, 不需要与用户交互, 可以直接一页页翻, 或者直接跳过。)所谓的”新手教程”, 就是按照App的提示, 一步步跟着完成。

那这个“新手教程”有什么好处呢?

1.  指导用户了解操作。 比如, 如何调节音量, 如何设置焦距…
2.  限制用户填充必要信息, 完成必要操作。

现在大家应该都明白这到底是一个什么东西了。为实现这样的功能, 一般是采用遮罩层效果, 今天花了点时间, 封装好了这样一个功能。 同时把源码分享到我的Github, 需要的可以自己下载。

下载链接: [YLZHoledView][]

同时, 还写了一个demo, 效果如下:  
![1428397249_4997.gif][]

我封装好的这个文件(YLZHoledView), 主要实现了如下功能:  
1. 添加多种样式聚光灯效果。(圆形, 矩形, 圆角矩形, 自定义视图)  
2. 点击该区域支持delegate回调  
3. UIView 中的控件事件穿透。(demo中的按钮, 是在遮罩层下方, 但是正确响应点击事件, 这就是事件穿透)

好了, 大体介绍就到这里, 下面简单解释下核心代码:

## delegate回调 ##

`YLZHoledView.h`

@class YLZHoledView;
    @protocol YLZHoledViewDelegate <NSObject>
    
    - (void)holedView:(YLZHoledView *)holedView didSelectHoleAtIndex:(NSUInteger)index;
    
    @end

`YLZHoledView.m`

#pragma mark - Tap Gesture
    
     - (void)tapGestureDetectedForGesture:(UITapGestureRecognizer *)gesture
     {
         if ([self.holeViewDelegate respondsToSelector:@selector(holedView:didSelectHoleAtIndex:)]) {
             CGPoint touchLocation = [gesture locationInView:self];
             [self.holeViewDelegate holedView:self didSelectHoleAtIndex:[self holeViewIndexForAtPoint:touchLocation]];
         }
     }

这里先在自定义的View中添加手势, 然后在  
`- (NSUInteger)holeViewIndexForAtPoint:(CGPoint)touchLocation` 中判断点击范围是否属于遮罩层中添加的视图, 再发送委托。

然后在我们的实现类中, 也就是实现这个委托的地方, 就可以通过index来做相关的操作。 我demo里面只是简单的打印。

## 聚光灯效果 ##

我这里封装了几种常见的类型。(圆形, 矩形, 圆角矩形, 自定义视图)

typedef NS_ENUM(NSInteger, YLZHoleType)
     {
         YLZHoleTypeCirle,
         YLZHoleTypeRect,
         YLZHoleTypeRoundedRect,
         YLZHoleTypeCustomRect
     };

然后重写  
`- (void)drawRect:(CGRect)rect`  
通过类型判断, 来重写对应的效果。

比如, 圆形的代码:

if (hole.holeType == YLZHoleTypeRoundedRect) {
                 YLZRoundedRectHole *rectHole = (YLZRoundedRectHole *)hole;
                 CGRect holeRectIntersection = CGRectIntersection( rectHole.holeRect, self.frame);
                 UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:holeRectIntersection
                                                                       cornerRadius:rectHole.holeCornerRadius];
    
                 CGContextSetFillColorWithColor(UIGraphicsGetCurrentContext(), [[UIColor clearColor] CGColor]);
                 CGContextAddPath(UIGraphicsGetCurrentContext(), bezierPath.CGPath);
                 CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeClear);
                 CGContextFillPath(UIGraphicsGetCurrentContext());
    
    }

## 事件穿透 ##

在这之前, 提一个方法。

`- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event;`  
// recursively calls -pointInside:withEvent:. point is in the receiver’s coordinate system

只要实现了最顶层的 UIView 的 hitTest 方法，在某些情况返回下层的某个按钮实例，即相当于把那个按钮的事件透出来了，比如在点击落在该按钮上时，不管这个按钮在 UIView 下多少层都可以把它挖出来。

所以, 重写hitTest方法即可。

#pragma mark - UIView Overrides
      - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
     {
         UIView *hitView = [super hitTest:point withEvent:event];
    
         if (hitView == self)
         {
             for (UIView *focus in self.focusView) {
                 if (CGRectContainsPoint(focus.frame, point))
                 {
                     return focus;
                 }
             }
         }
    
         return hitView;
     }

[YLZHoledView]: https://github.com/colin1994/HoledViewTest
[1428397249_4997.gif]: https://img-my.csdn.net/uploads/201504/07/1428397249_4997.gif