版本记录

前言

在我们的app项目中，为了增加和用户很好的交互能力，通常都需要加一些提示图，比如说，当我们需要网络加载数据的时候，首先要监测网络，如果网络断开的时候，我们需要提示用户；还有一个场景就是登陆的时候，需要提示用户正在登录中和登录成功；再比如清除用户的缓存数据成功的时候，也需要进行清除成功的提示的，等等。总之，用的场景很多，好的提示图可以增强和用户的交互体验，试想，如果没有网络，也不提示用户，用户还以为还在登录，过了一会还是上不去，那可能用户就疯掉了，怒删app了。最近做的几个项目中也是对这个要求的也很多，在实际应用中可以自己写，也可以使用第三方框架，比较知名的比如MBProgressHUD和SVProgressHUD，从这一篇开始我就一点一点的介绍它们以及它们的使用方法，希望对大家有所帮助，那我们就开始喽。先给出github地址：
MBProgressHUD github
感兴趣可以先看上一篇
1.提示图显示篇之MBProgressHUD（一）
2.提示图显示篇之MBProgressHUD（二）
3.提示图显示篇之MBProgressHUD（三）

这一篇将对MBProgreeHUD的绘制和显示隐藏进行介绍。

详情

一、绘制

• 1. 背景视图的绘制

当我们设置好MBProgressHUD的属性等因素后，然后我们需要做的就是将它们渲染到屏幕上，就是我们看到的提示图了。

- (void)drawRect:(CGRect)rect 
{
    // 拿到当前的绘图上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    UIGraphicsPushContext(context);

    // 默认中间的HUD外是透明的,可以看到父控件,设置了dimBackground这个属性可以让HUD周围是一个渐变色的背景.
    // 这里用了一个渐变层,颜色是写死的
    if (self.dimBackground) {
        //Gradient colours
        size_t gradLocationsNum = 2;
        CGFloat gradLocations[2] = {0.0f, 1.0f};
        CGFloat gradColors[8] = {0.0f,0.0f,0.0f,0.0f,0.0f,0.0f,0.0f,0.75f};
        CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
        CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, gradColors, gradLocations, gradLocationsNum);
        CGColorSpaceRelease(colorSpace);
        //Gradient center
        CGPoint gradCenter= CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);
        //Gradient radius
        float gradRadius = MIN(self.bounds.size.width , self.bounds.size.height) ;
        //Gradient draw
        CGContextDrawRadialGradient (context, gradient, gradCenter,
                                     0, gradCenter, gradRadius,
                                     kCGGradientDrawsAfterEndLocation);
        CGGradientRelease(gradient);
    }

    // 用户有设置颜色就使用设置的颜色,没有的话默认灰色
    // 从下面代码可以看出,自定义HUD背景颜色是没有透明度的
    if (self.color) {
        CGContextSetFillColorWithColor(context, self.color.CGColor);
    } else {
        CGContextSetGrayFillColor(context, 0.0f, self.opacity);
    }

    CGRect allRect = self.bounds;
    // 画出一个圆角的HUD
    // size在layoutSubviews中被计算出来,是HUD的真实size
    CGRect boxRect = CGRectMake(round((allRect.size.width - size.width) / 2) + self.xOffset,
                                round((allRect.size.height - size.height) / 2) + self.yOffset, size.width, size.height);
    float radius = self.cornerRadius;
    //开始绘制路径
    CGContextBeginPath(context);
    // 起始点
    CGContextMoveToPoint(context, CGRectGetMinX(boxRect) + radius, CGRectGetMinY(boxRect));
    // 依次画出右上角、右下角,左下角,左上角的四分之一圆弧
    // 注意,虽然没有显式地调用CGContextAddLineToPoint函数
    // 但绘制圆弧时每一次的起点都会和上一次的终点连接,生成线段
    CGContextAddArc(context, CGRectGetMaxX(boxRect) - radius, CGRectGetMinY(boxRect) + radius, radius, 3 * (float)M_PI / 2, 0, 0);
    CGContextAddArc(context, CGRectGetMaxX(boxRect) - radius, CGRectGetMaxY(boxRect) - radius, radius, 0, (float)M_PI / 2, 0);
    CGContextAddArc(context, CGRectGetMinX(boxRect) + radius, CGRectGetMaxY(boxRect) - radius, radius, (float)M_PI / 2, (float)M_PI, 0);
    CGContextAddArc(context, CGRectGetMinX(boxRect) + radius, CGRectGetMinY(boxRect) + radius, radius, (float)M_PI, 3 * (float)M_PI / 2, 0);
    CGContextClosePath(context);
    CGContextFillPath(context);

    UIGraphicsPopContext();
}

• 2.indicator的绘制

MBRoundProgressView的绘制

下面说一下圆形指示器的绘制。

当我们绘制路径时,描述的路径如果宽度大于1,描边的时候是向路径宽度是以路径为中点的。举个例子，如果从(0,0)向(100,0)画一条宽度为X的线,那么显示的宽度实际只有X/2，因为还有一半因为超出了绘图区域而没有被绘制。为了防止绘制内容的丢失，半径radius的计算是(self.bounds.size.width - lineWidth)/2，而并不是self.bounds.size.width/2，更不是(self.bounds.size.width -2*lineWidth)/2。

看下面的代码

    // 圆环绘制    
    if (_annular) {
        // iOS7.0以后的圆环描边风格变了,变成了2.f
          // 7.0之前的还是5.f.主要是为了迎合扁平的风格我觉得
        BOOL isPreiOS7 = kCFCoreFoundationVersionNumber < kCFCoreFoundationVersionNumber_iOS_7_0;
        CGFloat lineWidth = isPreiOS7 ? 5.f : 2.f;
        ......
        CGFloat radius = (self.bounds.size.width - lineWidth)/2;
    }

MBBarProgressView的绘制

MBBarProgressView与MBRoundProgressView的绘制类似，都是使用Quartz2D进行绘图。

看下面的代码

   .....
    // Draw background
    float radius = (rect.size.height / 2) - 2;
    CGContextMoveToPoint(context, 2, rect.size.height/2);
    CGContextAddArcToPoint(context, 2, 2, radius + 2, 2, radius);
    //CGContextAddLineToPoint(context, rect.size.width - radius - 2, 2);
    CGContextAddArcToPoint(context, rect.size.width - 2, 2, rect.size.width - 2, rect.size.height / 2, radius);
    CGContextAddArcToPoint(context, rect.size.width - 2, rect.size.height - 2, rect.size.width - radius - 2, rect.size.height - 2, radius);
    //CGContextAddLineToPoint(context, radius + 2, rect.size.height - 2);
    CGContextAddArcToPoint(context, 2, rect.size.height - 2, 2, rect.size.height/2, radius);
    CGContextFillPath(context);

二、视图的显示和隐藏

• 显示

显示的实现代码可以参考下面：

- (void)showWhileExecuting:(SEL)method onTarget:(id)target withObject:(id)object animated:(BOOL)animated 
{
    methodForExecution = method;
      // 对于MRC来说,要保留target和object对象
      // ARC会自动保留这两个对象
      // 不管是ARC还是MRC,都要注意引用循环的问题,因此下面有个-cleanUp方法用来释放强引用
    targetForExecution = MB_RETAIN(target);
    objectForExecution = MB_RETAIN(object);

    self.taskInProgress = YES;
      // detachNewThreadSelector是NSThread的类方法,开启一个子线程执行任务,线程默认start
    [NSThread detachNewThreadSelector:@selector(launchExecution) toTarget:self withObject:nil];
    // Show HUD view
    [self show:animated];
}

- (void)showAnimated:(BOOL)animated whileExecutingBlock:(dispatch_block_t)block onQueue:(dispatch_queue_t)queue
     completionBlock:(MBProgressHUDCompletionBlock)completion 
{
    // 标记任务标识
    self.taskInProgress = YES;
    // 将block先引用起来,在隐藏完之后执行block
    self.completionBlock = completion;
    // 在队列上异步执行,更新UI在主线程进行
    dispatch_async(queue, ^(void) {
        block();
        dispatch_async(dispatch_get_main_queue(), ^(void) {
              // 方法中有隐藏HUD这一更新UI的操作
            [self cleanUp];
        });
    });
    // 在任务执行的过程中进行动画
    [self show:animated];
}

- (void)launchExecution 
{
    // 对于多线程操作建议把线程操作放到@autoreleasepool中
    @autoreleasepool {
      // 忽略警告的编译器指令
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
        // 究其原因,编译期时编译器并不知道methodForExecution是什么
          // ARC的内存管理是建立在规范的命名规则之上的,不知道方法名是什么就不知道如何处理返回值
          // 如果该方法有返回值,就不知道返回值是加入了自动释放池的还是需要ARC释放的对象
          // 因此ARC不对返回值执行任何操作,如果返回值并不是加入自动释放池的对象,这时就内存泄露了
        [targetForExecution performSelector:methodForExecution withObject:objectForExecution];
#pragma clang diagnostic pop

        [self performSelectorOnMainThread:@selector(cleanUp) withObject:nil waitUntilDone:NO];
    }
}

- (void)cleanUp 
{
    // 任务标识重置    
    taskInProgress = NO;
#if !__has_feature(objc_arc)
    [targetForExecution release];
    [objectForExecution release];
#else
    targetForExecution = nil;
    objectForExecution = nil;
#endif
    [self hide:useAnimation];
}

这里，taskInProgress的意思要结合graceTime来看，graceTime是为了防止hud只显示很短时间(一闪而过)的情况，给用户设定的一个属性，如果任务在graceTime内完成，将不会showhud。所以graceTime这个属性离开了赋给hud的任务就没意义了，因此，taskInProgress用来标识是否带有执行的任务。

- (void)handleGraceTimer:(NSTimer *)theTimer 
{
    // 如果没有任务,设置了graceTime也没有意义
    if (taskInProgress) {
        [self showUsingAnimation:useAnimation];
    }
}

值得注意的是，通过showWhileExecuting:onTarget:withObject:animated:等方法时，会自动将taskInProgress置为yes，其他情况(任务所在的线程不是由hud内部所创建的)需手动设置这个属性。

- (void)show:(BOOL)animated 
{
    ......
      // 进行self.graceTime的延时之后,才调用handleGraceTimer:显示hud
      // 如果没到时间就执行完了,那么完成任务调用的done方法会把taskInProgress设为NO,那么就不会显示hud了
    if (self.graceTime > 0.0) {
        NSTimer *newGraceTimer = [NSTimer timerWithTimeInterval:self.graceTime target:self selector:@selector(handleGraceTimer:) userInfo:nil repeats:NO];
        [[NSRunLoop currentRunLoop] addTimer:newGraceTimer forMode:NSRunLoopCommonModes];
        self.graceTimer = newGraceTimer;
    }
   ......
}

• 隐藏

下面是隐藏实现的代码逻辑。

- (void)hide:(BOOL)animated afterDelay:(NSTimeInterval)delay 
{
    [self performSelector:@selector(hideDelayed:) withObject:[NSNumber numberWithBool:animated] afterDelay:delay];
}

- (void)hideDelayed:(NSNumber *)animated 
{
    [self hide:[animated boolValue]];
}

- (void)hide:(BOOL)animated 
{
    NSAssert([NSThread isMainThread], @"MBProgressHUD needs to be accessed on the main thread.");
    useAnimation = animated;
    // 设置一个最短的显示时间
      // showStarted在显示的时候被设置了,用当前的时间算出距离showStarted过了多少时间
      // 得出interv.如果没有达到minShowTimer所要求的时间,就开启定时器等待到指定的最短时间
    if (self.minShowTime > 0.0 && showStarted) {
        NSTimeInterval interv = [[NSDate date] timeIntervalSinceDate:showStarted];
        if (interv < self.minShowTime) {
            self.minShowTimer = [NSTimer scheduledTimerWithTimeInterval:(self.minShowTime - interv) target:self
                                                               selector:@selector(handleMinShowTimer:) userInfo:nil repeats:NO];
            return;
        }
    }
    // ... otherwise hide the HUD immediately
    [self hideUsingAnimation:useAnimation];
}

参考文章和博客

1. 源码笔记---MBProgressHUD

后记

这里主要写的的绘制原理以及显示隐藏的代码实现，后面还会深入的举例说明MBProgressHUD的使用方法，希望对大家有所帮助，谢谢大家~~~

端午快乐！