MBProgressHUD 소스 분석

iOS 개발을 한 학생들은 MBProgressHUD라는 제3자 구조를 사용하거나 이해해야 한다. 대외 인터페이스가 간결하기 때문에 몇 마디의 코드 전송 유형만 있으면 HUD 기능을 실현할 수 있다.그럼 그 내부가 어떻게 이루어졌는지 우리 함께 봅시다!

MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:self.navigationController.view animated:YES];
dispatch_async(dispatch_get_global_queue(QOS_CLASS_USER_INITIATED, 0), ^{

    // Do something useful in the background
    [self doSomeWork];

    // IMPORTANT - Dispatch back to the main thread. Always access UI
    // classes (including MBProgressHUD) on the main thread.
    dispatch_async(dispatch_get_main_queue(), ^{
        [hud hideAnimated:YES];
    });
});

MBProgressHUD is an iOS drop-in class that displays a translucent HUD with an indicator and/or labels while work is being done in a background thread. The HUD is meant as a replacement for the undocumented, private UIKit UIProgressHUD with some additional features
MBProgressHUD는 두 개의 파일만 있습니다.h와.m.먼저 헤더 파일에 몇 가지 매거 유형을 추가했는데 그것이 바로 MBProgressHUDMode, MBProgressHUDAnimation, MBProgressHUDBAckgroundStyle이다. 각각 HUD의 현실 스타일, 애니메이션 유형과 배경 스타일이다.MBProgressHUD는 UIView에서 상속됩니다.showHUDAddedTo 방법을 호출할 때,common Init 방법에서 대응하는 View층을 초기화합니다.그리고 시스템 버전 번호 >=8.0과 MBProgressHUDBAckgroundStyle 불러오기에 따라 ** UIVisualEffectView**를 사용하여 배경 허화 모유리 효과 구현

MBProgressHUDBackgroundStyle style = self.style;
if (style == MBProgressHUDBackgroundStyleBlur) {
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 80000 || TARGET_OS_TV
    if (kCFCoreFoundationVersionNumber >= kCFCoreFoundationVersionNumber_iOS_8_0) {
        UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
        UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
        [self addSubview:effectView];
        effectView.frame = self.bounds;
        effectView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
        self.backgroundColor = self.color;
        self.layer.allowsGroupOpacity = NO;
        self.effectView = effectView;
    } 

주의해야 할 것은 초기화ZelView는 UIInterpolating Motion Effect를 사용합니다. 이것은 iOS7 이후 시차 효과를 증가시키는 API입니다. 이것은 홈 페이지를 열 때 좌우로 뒤집으면 배경이 바뀌는 효과입니다.

    CGFloat effectOffset = 10.f;
    UIInterpolatingMotionEffect *effectX = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.x" type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
    effectX.maximumRelativeValue = @(effectOffset);
    effectX.minimumRelativeValue = @(-effectOffset);

    UIInterpolatingMotionEffect *effectY = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.y" type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
    effectY.maximumRelativeValue = @(effectOffset);
    effectY.minimumRelativeValue = @(-effectOffset);

    UIMotionEffectGroup *group = [[UIMotionEffectGroup alloc] init];
    group.motionEffects = @[effectX, effectY];

    [bezelView addMotionEffect:group];

그 다음에 MBProgressHUDMode 형식에 따라 indicator를 self에 추가합니다.BezelView에서 MBRoundProgressView, MBBarProgressView 등 UIView의 하위 클래스를 맞춤형으로 제작하였는데 모두

- (void)drawRect:(CGRect)rect ;

Quartz2D를 사용하여 드로잉
MBRoundProgressView
drawRect 방법에서는 원 또는 원형이 사용됩니다.

- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
BOOL isPreiOS7 = kCFCoreFoundationVersionNumber < kCFCoreFoundationVersionNumber_iOS_7_0;
//     
if (_annular) {
    
    //     
    CGFloat lineWidth = isPreiOS7 ? 5.f : 2.f;
    UIBezierPath *processBackgroundPath = [UIBezierPath bezierPath];
    processBackgroundPath.lineWidth = lineWidth;
    processBackgroundPath.lineCapStyle = kCGLineCapButt;    //      
    CGPoint center = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
    CGFloat radius = (self.bounds.size.width - lineWidth)/2;
    CGFloat startAngle = - ((float)M_PI / 2); // 90°
    CGFloat endAngle = (2 * (float)M_PI) + startAngle;
    //       currentPoint          
    [processBackgroundPath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    [_backgroundTintColor set];
    [processBackgroundPath stroke];
    //      
    UIBezierPath *processPath = [UIBezierPath bezierPath];
    processPath.lineCapStyle = isPreiOS7 ? kCGLineCapRound : kCGLineCapSquare;
    processPath.lineWidth = lineWidth;
    endAngle = (self.progress * 2 * (float)M_PI) + startAngle;
    [processPath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    [_progressTintColor set];
    [processPath stroke];
} else {
    // Draw background
    CGFloat lineWidth = 2.f;
    CGRect allRect = self.bounds;
    CGRect circleRect = CGRectInset(allRect, lineWidth/2.f, lineWidth/2.f);
    CGPoint center = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
    [_progressTintColor setStroke];
    [_backgroundTintColor setFill];
    CGContextSetLineWidth(context, lineWidth);
    if (isPreiOS7) {
        CGContextFillEllipseInRect(context, circleRect);
    }
    CGContextStrokeEllipseInRect(context, circleRect);
    // 90 degrees
    CGFloat startAngle = - ((float)M_PI / 2.f);
    // Draw progress
    if (isPreiOS7) {
        CGFloat radius = (CGRectGetWidth(self.bounds) / 2.f) - lineWidth;
        CGFloat endAngle = (self.progress * 2.f * (float)M_PI) + startAngle;
        [_progressTintColor setFill];
        //           
        CGContextMoveToPoint(context, center.x, center.y);
        CGContextAddArc(context, center.x, center.y, radius, startAngle, endAngle, 0);
        CGContextClosePath(context);//    
        CGContextFillPath(context);//    
    } else {
        UIBezierPath *processPath = [UIBezierPath bezierPath];
        processPath.lineCapStyle = kCGLineCapButt;
        processPath.lineWidth = lineWidth * 2.f;
        CGFloat radius = (CGRectGetWidth(self.bounds) / 2.f) - (processPath.lineWidth / 2.f);
        CGFloat endAngle = (self.progress * 2.f * (float)M_PI) + startAngle;
        [processPath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
        // Ensure that we don't get color overlaping when _progressTintColor alpha < 1.f.
        CGContextSetBlendMode(context, kCGBlendModeCopy);
        [_progressTintColor set];
        [processPath stroke];
    }
 }
}

MBBarProgressView

- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetLineWidth(context, 2);
//      
CGContextSetStrokeColorWithColor(context,[_lineColor CGColor]);
//      
CGContextSetFillColorWithColor(context, [_progressRemainingColor CGColor]);

//     
CGFloat 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);

// Draw border
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);
CGContextStrokePath(context);

CGContextSetFillColorWithColor(context, [_progressColor CGColor]);
radius = radius - 2;
CGFloat amount = self.progress * rect.size.width;

//  Progress       
if (amount >= radius + 4 && amount <= (rect.size.width - radius - 4)) {
    CGContextMoveToPoint(context, 4, rect.size.height/2);
    CGContextAddArcToPoint(context, 4, 4, radius + 4, 4, radius);
    CGContextAddLineToPoint(context, amount, 4);
    CGContextAddLineToPoint(context, amount, radius + 4);
    
    CGContextMoveToPoint(context, 4, rect.size.height/2);
    CGContextAddArcToPoint(context, 4, rect.size.height - 4, radius + 4, rect.size.height - 4, radius);
    CGContextAddLineToPoint(context, amount, rect.size.height - 4);
    CGContextAddLineToPoint(context, amount, radius + 4);
    
    CGContextFillPath(context);
}

//  Progress     
else if (amount > radius + 4) {
    CGFloat x = amount - (rect.size.width - radius - 4);

    CGContextMoveToPoint(context, 4, rect.size.height/2);
    CGContextAddArcToPoint(context, 4, 4, radius + 4, 4, radius);
    CGContextAddLineToPoint(context, rect.size.width - radius - 4, 4);
    CGFloat angle = -acos(x/radius);
    if (isnan(angle)) angle = 0;
    CGContextAddArc(context, rect.size.width - radius - 4, rect.size.height/2, radius, M_PI, angle, 0);
    CGContextAddLineToPoint(context, amount, rect.size.height/2);

    CGContextMoveToPoint(context, 4, rect.size.height/2);
    CGContextAddArcToPoint(context, 4, rect.size.height - 4, radius + 4, rect.size.height - 4, radius);
    CGContextAddLineToPoint(context, rect.size.width - radius - 4, rect.size.height - 4);
    angle = acos(x/radius);
    if (isnan(angle)) angle = 0;
    CGContextAddArc(context, rect.size.width - radius - 4, rect.size.height/2, radius, -M_PI, angle, 1);
    CGContextAddLineToPoint(context, amount, rect.size.height/2);
    
    CGContextFillPath(context);
}

//  Progress     
else if (amount < radius + 4 && amount > 0) {
    CGContextMoveToPoint(context, 4, rect.size.height/2);
    CGContextAddArcToPoint(context, 4, 4, radius + 4, 4, radius);
    CGContextAddLineToPoint(context, radius + 4, rect.size.height/2);

    CGContextMoveToPoint(context, 4, rect.size.height/2);
    CGContextAddArcToPoint(context, 4, rect.size.height - 4, radius + 4, rect.size.height - 4, radius);
    CGContextAddLineToPoint(context, radius + 4, rect.size.height/2);
    
    CGContextFillPath(context);
 }
}

그런 다음 KVC를 사용하여 진행 상태 표시를 설정합니다. - (void) setProgress: (float) progress {if(progress!= progress) {progress=progress; UIView *indicator = self.indicator; if([indicator respondsToSelector: @selector(setProgress:)] {[(id) indicator setlue: @ self.progress)
다음은 showUsingAnimation 방법에서 CADisplayLink를 사용하여 진도표를 리셋하는 것입니다. 진도표가 매우 빨리 바뀌었기 때문에 실시간 모니터링이 주 라인에 영향을 줄 수 있습니다.

self.progressObjectDisplayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateProgressFromProgressObject)];

리셋 호출KVC 리셋 UI - (void) 업데이트 Progress From Progress Object {self.progress = self.progress Object.fraction Completed;
마지막으로 숨기는 방법입니다. 호출은 유사합니다. 애니메이션 실행이 끝나면done 방법을 호출합니다. 사용자는 리셋 방법을 감청하여 사용자 정의 이벤트를 만들 수 있습니다. Block도delegate, MBProgressHuddelegate, MBProgressHUDCompletion Block도 있습니다.

- (void)done {
// Cancel any scheduled hideDelayed: calls
[self.hideDelayTimer invalidate];
[self setNSProgressDisplayLinkEnabled:NO];

if (self.hasFinished) {
    self.alpha = 0.0f;
    if (self.removeFromSuperViewOnHide) {
        [self removeFromSuperview];
    }
}
MBProgressHUDCompletionBlock completionBlock = self.completionBlock;
if (completionBlock) {
    completionBlock();
}
id delegate = self.delegate;
if ([delegate respondsToSelector:@selector(hudWasHidden:)]) {
    [delegate performSelector:@selector(hudWasHidden:) withObject:self];
 }
}

이것은 제가 CAReplicator Layer와 UIInterpolating Motion Effect로 쓴 loadingView Demo Motion Effect Demo입니다. 서로 교류하고 공부하는 것을 환영합니다!
마지막으로 MBProgressHUD는 하나의 클래스만 사용하면 강력한 HUD 기능(내부에 몇 개의 하위 클래스가 있지만)을 실현했다. 대외적으로 제공된 인터페이스도 간결하고 봉인된 사상과 사용자 정의 보기를 배울 만한 부분이다.