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这个方法上
- 更新当前的视图层次，这一步几乎是这个控件的核心步骤。
- 在主线程执行添加subview的操作，以及让progressHUD这个view显示出来
- 调整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，最终内存可能会爆掉。
