SVProgressHUD的使用详解

竹林风

下载地址：https://github.com/SVProgressHUD/SVProgressHUD

SVProgressHUD是iOS上的一款loading轻量级美观的加载框

目录结构：



使用

显示

• showWithStatus 显示加载，并显示文本
• showProgress      显示加载，并展示当前进度条
• showInfoWithStatus 显示使用Info状态的图片的加载框来替代菊花或者进度条
• showSuccessWithStatus 显示success状态的图片（一个勾）的加载框来替代菊花或者进度条
• showErrorWithStatus 显示error状态的图片（一个x）的加载框来替代菊花或者进度条
  

除此之外你也可以设置自己的图片，使用+ (void)showImage: (UIImage*)image status: (NSString*)status;


消失

• dismiss 直接关闭一个加载Hub
• dismissWithDelay 延迟关闭一个Hub
• dismissWithCompletion 关闭Hub带一个完成的Block
• dismissWithDelay:completion 延迟关闭Hub并带一个完成的Block
  

以上方法只需用SVRrogressHUD调用方法名即可。


原理详解

显示过程

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

[Objective-C] 纯文本查看 复制代码

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

在内部实现了一个单例，这显示了为什么可以在内方法中可以快速的显示一个Hud

[Objective-C] 纯文本查看 复制代码

+ (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;
}

之后使用这个单例pyltgo完成Hud的显示，那showProgress这个方法做什么呢？

[Objective-C] 纯文本查看 复制代码

- (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会寻找提供Hud显示的Window,并且将自己添加到上面，使用方法：

[Objective-C] 纯文本查看 复制代码

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上面显示Hud就没办法。找到window之后，生成菊花或者进度条View,然后设置label，计算出大小，然后完成显示。

动画的控制


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


动画绘制

[Objective-C] 纯文本查看 复制代码

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驱动的进度条动画

[Objective-C] 纯文本查看 复制代码

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的动画来进行消失
  

Amy

强烈支持楼主ing……

站长苏飞

我只是路过打酱油的。

liu

我只是路过打酱油的。

惜

感恩无私的分享与奉献

范范

楼主加油，我们都看好你哦。