SVProgressHUD层级分析

image.png

image.png

截屏2021-08-31 上午12.02.57.png

SVIndefiniteAnimatedView 是无限旋转的菊花视图
SVProgressAnimatedView 是进度条视图
SVRadialGradientLayer 是渐变模式下渐变的背景Layer

使用
显示
SVProgressHUD提供了显示加载图便利方法，而且几乎全是类方法，在开发中能方便的使用。如

showWithStatus 显示加载，并显示文本
showProgress 显示加载，并展示当前进度条
showInfoWithStatus 显示使用Info状态的图片的加载框来替代菊花或者进度条
showSuccessWithStatus 显示success状态的图片（一个勾）的加载框来替代菊花或者进度条
showErrorWithStatus 显示error状态的图片（一个x）的加载框来替代菊花或者进度条
除此之外你也可以设置自己的图片，使用+ (void)showImage:(UIImage*)image status:(NSString*)status;

消失
SVProgressHUD提供了几种方式来显示一个Loding框

dismiss 直接关闭一个加载Hub
dismissWithDelay 延迟关闭一个Hub
dismissWithCompletion 关闭Hub带一个完成的Block
dismissWithDelay:completion 延迟关闭Hub并带一个完成的Block
可以看出SVProgressHUD提供了简单明了的API，使用便利的类方法让我们快速在代码中使用

深入源码
显示过程
SVProgressHUD 比较简单易懂
在众多的类方法下面，也实现相应的实例方法

//简单版本
- (void)setStatus:(NSString*)status;
- (void)setFadeOutTimer:(NSTimer*)timer;

- (void)registerNotifications;
- (NSDictionary*)notificationUserInfo;

- (void)positionHUD:(NSNotification*)notification;
- (void)moveToPoint:(CGPoint)newCenter rotateAngle:(CGFloat)angle;

- (void)overlayViewDidReceiveTouchEvent:(id)sender forEvent:(UIEvent*)event;

- (void)showProgress:(float)progress status:(NSString*)status;
- (void)showImage:(UIImage*)image status:(NSString*)status duration:(NSTimeInterval)duration;
- (void)showStatus:(NSString*)status;

- (void)dismiss;
- (void)dismissWithDelay:(NSTimeInterval)delay completion:(SVProgressHUDDismissCompletion)completion;
@end

如何将Hub展示到屏幕上，首先我们从showWithStatus方法往里看。
内部实现

+ (void)showWithStatus:(NSString*)status {
    [self sharedView];
    [self showProgress:SVProgressHUDUndefinedProgress status:status];
}

在内部实现了一个单例，这也不难理解为什么可以在内方法中快速的显示一个Hub

+ (SVProgressHUD*)sharedView {
    static dispatch_once_t once;
    
    static SVProgressHUD *sharedView;
#if !defined(SV_APP_EXTENSIONS)
    dispatch_once(&once, ^{ sharedView = [[self alloc] initWithFrame:[[[UIApplication sharedApplication] delegate] window].bounds]; });
#else
    dispatch_once(&once, ^{ sharedView = [[self alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; });
#endif
    return sharedView;
}

之后使用这个单例视图来完成Hub的显示，那么showProgress这个方法又做什么呢？首先我们看下简化版代码

- (void)showProgress:(float)progress status:(NSString*)status {
    __weak SVProgressHUD *weakSelf = self;
    [[NSOperationQueue mainQueue] addOperationWithBlock:^{
        __strong SVProgressHUD *strongSelf = weakSelf;
        if(strongSelf){
             //更新视图层级，将SV放到当前window最前面
            [strongSelf updateViewHierachy];
            //判断如果是进度条，使用进度条View
            if(progress >= 0) {                
                // Add ring to HUD and set progress
                [strongSelf.hudView addSubview:strongSelf.ringView];
                [strongSelf.hudView addSubview:strongSelf.backgroundRingView];
                strongSelf.ringView.strokeEnd = progress;
            } else {
                    
                
                // 使用无限旋转的菊花模式
                [strongSelf.hudView addSubview:strongSelf.indefiniteAnimatedView];
            }
            // Show
            [strongSelf showStatus:status];
        }
    }];
}

可以看出，SV为了将显示操作放到主线程使用了[NSOperationQueue mainQueue]来确保在主线程操作UI，
在updateViewHierachy方法中，SV会寻找提供Hub显示的Window，并且将自己添加到上面。使用手法为:

 NSEnumerator *frontToBackWindows = [UIApplication.sharedApplication.windows reverseObjectEnumerator];
        for (UIWindow *window in frontToBackWindows) {
            BOOL windowOnMainScreen = window.screen == UIScreen.mainScreen;
            BOOL windowIsVisible = !window.hidden && window.alpha > 0;
            BOOL windowLevelNormal = window.windowLevel == UIWindowLevelNormal;
            
            if(windowOnMainScreen && windowIsVisible && windowLevelNormal) {
                [window addSubview:self.overlayView];
                break;
            }
        }

找出当前的windowLevelNormal,并且是显示的UI，将自己显示在其之上，但是也有点缺点，就是如果需要在自定义的window上面显示Hub将无能为力。
找到window之后，生成菊花或者进度条View，然后设置label，计算出大小，然后完成显示

动画的绘制
SVIndefiniteAnimatedView是无限旋转的View。其中使用CASharpLayer和LayerMask来完成一个旋转动画，使用一张渐变的图片，设置其mask属性，然后加上旋转动画，来形成一个漂亮的加载动画
动画绘制代码

        UIBezierPath* smoothedPath = [UIBezierPath bezierPathWithArcCenter:arcCenter radius:self.radius startAngle:(CGFloat) (M_PI*3/2) endAngle:(CGFloat) (M_PI/2+M_PI*5) clockwise:YES];
        
        _indefiniteAnimatedLayer = [CAShapeLayer layer];
        _indefiniteAnimatedLayer.contentsScale = [[UIScreen mainScreen] scale];
        _indefiniteAnimatedLayer.frame = CGRectMake(0.0f, 0.0f, arcCenter.x*2, arcCenter.y*2);
        _indefiniteAnimatedLayer.fillColor = [UIColor clearColor].CGColor;
        _indefiniteAnimatedLayer.strokeColor = self.strokeColor.CGColor;
        _indefiniteAnimatedLayer.lineWidth = self.strokeThickness;
        _indefiniteAnimatedLayer.lineCap = kCALineCapRound;
        _indefiniteAnimatedLayer.lineJoin = kCALineJoinBevel;
        _indefiniteAnimatedLayer.path = smoothedPath.CGPath;
        
        CALayer *maskLayer = [CALayer layer];
        
        NSBundle *bundle = [NSBundle bundleForClass:[SVProgressHUD class]];
        NSURL *url = [bundle URLForResource:@"SVProgressHUD" withExtension:@"bundle"];
        NSBundle *imageBundle = [NSBundle bundleWithURL:url];
        
        NSString *path = [imageBundle pathForResource:@"angle-mask" ofType:@"png"];
        
        maskLayer.contents = (__bridge id)[[UIImage imageWithContentsOfFile:path] CGImage];
        maskLayer.frame = _indefiniteAnimatedLayer.bounds;
        _indefiniteAnimatedLayer.mask = maskLayer;
        
        NSTimeInterval animationDuration = 1;
        CAMediaTimingFunction *linearCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
        
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
        animation.fromValue = (id) 0;
        animation.toValue = @(M_PI*2);
        animation.duration = animationDuration;
        animation.timingFunction = linearCurve;
        animation.removedOnCompletion = NO;
        animation.repeatCount = INFINITY;
        animation.fillMode = kCAFillModeForwards;
        animation.autoreverses = NO;
        [_indefiniteAnimatedLayer.mask addAnimation:animation forKey:@"rotate"];
        
        CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
        animationGroup.duration = animationDuration;
        animationGroup.repeatCount = INFINITY;
        animationGroup.removedOnCompletion = NO;
        animationGroup.timingFunction = linearCurve;
        
        CABasicAnimation *strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
        strokeStartAnimation.fromValue = @0.015;
        strokeStartAnimation.toValue = @0.515;
        
        CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        strokeEndAnimation.fromValue = @0.485;
        strokeEndAnimation.toValue = @0.985;
        
        animationGroup.animations = @[strokeStartAnimation, strokeEndAnimation];
        [_indefiniteAnimatedLayer addAnimation:animationGroup forKey:@"progress"];
圆环动画比较简单，原理是使用CAShareLayer，并且设置的endPath来完成一个由progress驱动的进度条动画

 CGPoint arcCenter = CGPointMake(self.radius+self.strokeThickness/2+5, self.radius+self.strokeThickness/2+5);
        UIBezierPath* smoothedPath = [UIBezierPath bezierPathWithArcCenter:arcCenter radius:self.radius startAngle:(CGFloat)-M_PI_2 endAngle:(CGFloat) (M_PI + M_PI_2) clockwise:YES];
        
        _ringAnimatedLayer = [CAShapeLayer layer];
        _ringAnimatedLayer.contentsScale = [[UIScreen mainScreen] scale];
        _ringAnimatedLayer.frame = CGRectMake(0.0f, 0.0f, arcCenter.x*2, arcCenter.y*2);
        _ringAnimatedLayer.fillColor = [UIColor clearColor].CGColor;
        _ringAnimatedLayer.strokeColor = self.strokeColor.CGColor;
        _ringAnimatedLayer.lineWidth = self.strokeThickness;
        _ringAnimatedLayer.lineCap = kCALineCapRound;
        _ringAnimatedLayer.lineJoin = kCALineJoinBevel;
        _ringAnimatedLayer.path = smoothedPath.CGPath;

消失过程
消失调用的是dismissWithDelay:completion方法
消失过程和显示过程相反，大致是

在mainQueue中添加一个Block的operation（在主线程更改UI）
将自己从SuperView中删除，
如果指定了延迟，那么设置一个timer
在消失中如果指定动画，那么加一个fade的动画来进行消失
小结
SV将View添加到Window上
SV使用NSOperationQueue 来确保自己在主线程修改UI
SV的动画使用layer来绘制
优点：API简单明了，调用方便
缺点：默认在APP的UIWindow，不好定制