iOS——你会怎么做progressHUD?

progressHUD效果图

ProgressHUD.gif

progressHUD用法

- (void)replaceTabBar{
    SUPCustomTabBar *tabBar = [[SUPCustomTabBar alloc] init];
//    __weak typeof(self) wSelf = self;
    tabBar.pressPlusBtnBlock = ^(void){
        //测试progressHUD
        [SUPProgressHUD show];
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [SUPProgressHUD dismiss];
        });

    };
    [self setValue:tabBar forKey:@"tabBar"];
}

progressHUD实现思路

分析这个需求，需要有一个activityIndicator这样的控件来旋转，表示当前进度，而且还需要在旋转的时候不让点击。由于取消操作是根据业务方决定的，所以需要提供取消旋转的接口。所以这个控件的功能如下：

• activityIndicator用于转圈
• 全屏显示不让点击

先考虑接口部分

@interface SUPProgressHUD : UIView
+(void)show;
+(void)dismiss;
+(void)showWithStatus:(NSString *)status;
@end

三个接口，两个是用于显示，最后一个带status，转圈时下方的文字。

+(void)show{
    //显示进度
    [SUPProgressHUD showWithStatus:nil];
}
+(void)showWithStatus:(NSString *)status{
    [[self sharedView] showWithStatus:status];
}

+(instancetype) sharedView{
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        progressHUD = [[self alloc] initWithFrame:CGRectZero];
    });
    return progressHUD;
}

-(void)showWithStatus:(NSString *)status{
    //1.更新当前的视图层次
    [self updateViewHierachy];
    
    //2.将UI操作放到主线程
    __weak typeof(self) wSelf = self;
    [[NSOperationQueue mainQueue] addOperationWithBlock:^{
        __strong typeof(wSelf) strongSelf = wSelf;
        if (strongSelf) {
            
            [strongSelf.hudView addSubview:self.indicatorView];
            [strongSelf.hudView addSubview:self.statusLabel];
            strongSelf.overlayView.alpha = 0.0;
            strongSelf.statusLabel.text = status;
            [strongSelf.statusLabel sizeToFit];
            strongSelf.hudView.transform = CGAffineTransformScale(strongSelf.hudView.transform, 1.3, 1.3);
            [strongSelf.indicatorView startAnimating];
            [UIView animateWithDuration:SUP_ANIMATE_DURATION animations:^{
                strongSelf.hudView.transform = CGAffineTransformScale(strongSelf.hudView.transform, 1/1.3f, 1/1.3f);
                strongSelf.overlayView.alpha = 1.0;
            }];
            //3.在layoutsubviews中调整布局
            [strongSelf setNeedsDisplay];
        }
    }];
}

关注点放在-(void)showWithStatus:(NSString *)status这个方法上

1. 更新当前的视图层次，这一步几乎是这个控件的核心步骤。
2. 在主线程执行添加subview的操作，以及让progressHUD这个view显示出来
3. 调整overlayview/hudview/indicatorview的布局

SUPProgressHUD视图层次

1.更新当前的视图层次

详见代码加注释

-(void) updateViewHierachy{
    //给overlayView添加父view
    if (!self.overlayView.superview) {
        NSEnumerator *frontToBackWindows = [[UIApplication sharedApplication].windows reverseObjectEnumerator];
        //遍历所有window，目的就是找到正在显示的window，往其上加一层overlayView
        //不同的应用场景，可能会出来多个uiwindow，比如我们很熟悉的键盘或alertview，
        //statusBar就是不同的window
        for (UIWindow *window in frontToBackWindows) {
            BOOL isWindowOnMainScreen = window.screen == [UIScreen mainScreen];
            BOOL isWindowVisible = !window.hidden && window.alpha > 0.001;
            BOOL isWindowNormalLevel = window.windowLevel == UIWindowLevelNormal;
            if (isWindowOnMainScreen && isWindowVisible && isWindowNormalLevel) {
                [window addSubview:self.overlayView];
                break;
            }
        }
    }
    else{
        [self.overlayView.superview bringSubviewToFront:self.overlayView];
    }
    //将hudView加到self上面
    if (!self.hudView.superview) {
        [self addSubview:self.hudView];
    }
    //将self加在overlay上面
    if (!self.superview) {
        [self.overlayView addSubview:self];
    }
}

从这段代码中，可以看到整个progressHUD的视图层次，这就解释了为什么没有通过对当前显示的view进行添加view的操作，而可以在当前界面见到progressHUD，原因就是其遍历了整个application所管理的window，然后找到一个当前正在显示的window，并往其上添加了progressHUD。

2.将UI放到主线程处理

为什么不用GCD，而用NSOperationQueue，其实是个人的习惯问题，你也完全可以用GCD。
这里的UI操作，就是将indicatorView（转圈）和labelView(文字)放在了hudView上，然后执行了一个显示的动画。将hudView.transform的大小放大到1.3，然后缩小到1/1.3的大小，会有一个跳动的效果。

3.布局

布局中所做的操作，简而言之，就是想尽一切办法，将hudview放在整个屏幕中间，调整indicator和statusLabel的位置关系，关键点就是每个view的center属性。

-(void)layoutSubviews{
    [super layoutSubviews];
    
    CGRect indiFrame = self.indicatorView.frame;
    CGRect statusFrame = self.statusLabel.frame;
    CGSize hudSize = CGSizeMake(MAX(indiFrame.size.width, statusFrame.size.width) + 30, indiFrame.size.height + statusFrame.size.height + 30);
    //设置hudView的大小和中心点
    self.hudView.sup_size = hudSize;
    self.hudView.center = self.overlayView.center;
    
    CGFloat indicatorCenterY = self.hudView.sup_height / 2;
    if (self.statusLabel.text.length) {
        indicatorCenterY = self.hudView.sup_height / 2 - 10;
    }
    self.indicatorView.center = CGPointMake(self.hudView.sup_width / 2, indicatorCenterY);
    
    self.statusLabel.center = CGPointMake(self.hudView.sup_width / 2, self.hudView.sup_height - self.statusLabel.sup_height);
}

以上就是[SUPProgressHUD show]这个方法的执行过程。接下来看看[SUPProgressHUD dismiss]的操作。

-(void) dismissView{
    __weak typeof(self) wSelf = self;
    [[NSOperationQueue mainQueue] addOperationWithBlock:^{
        __strong typeof(wSelf) strongSelf = wSelf;
        if (strongSelf) {
            [strongSelf.indicatorView stopAnimating];
            [UIView animateWithDuration:SUP_ANIMATE_DURATION animations:^{
                strongSelf.overlayView.alpha = 0.0;
            } completion:^(BOOL finished) {
                [strongSelf.overlayView removeFromSuperview];
                [strongSelf.hudView removeFromSuperview];
                [strongSelf removeFromSuperview];
                
            }];
        }
    }];
}

这个操作中，最重要的是，removeFromSuperview的操作，一定要执行这一步，要不然progressHUD就会不断地addSubview，最终内存可能会爆掉。