MBProgressHUD源碼解析

做過iOS開發的同學應該都使用過或者了解MBProgressHUD這個第三方框架，由于它對外接口簡潔，只需要幾句代碼傳入類型就可以實現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方法時，先會在commonInit方法里面把對應的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;
    }

值得注意的是在初始化_bezelView用到了UIInterpolatingMotionEffect，這是iOS7以后增加視差效果的API，這個就是當你打開Home頁時左右翻轉，背景會跟著偏移的效果。

    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的子類，都是在<pre>- (void)drawRect:(CGRect)rect ;</pre>使用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 setValue:@(self.progress) forKey:@"progress"];
}
}
}

接下來就是顯示了，在showUsingAnimation方法中，使用CADisplayLink去刷新進度條，因為進度條改變的非常快，實時監控它可能會影響主線程。

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

調用刷新使用KVC刷新UI
- (void)updateProgressFromProgressObject {
self.progress = self.progressObject.fractionCompleted;
}

最后就是隱藏的方法了，調用是相類似的，在動畫執行完成會調用done方法,用戶可以自己去監聽回調方法做自定義一些事件，有block也有delegate，MBProgressHUDDelegate，MBProgressHUDCompletionBlock

- (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<MBProgressHUDDelegate> delegate = self.delegate;
if ([delegate respondsToSelector:@selector(hudWasHidden:)]) {
    [delegate performSelector:@selector(hudWasHidden:) withObject:self];
 }
}

這是我用CAReplicatorLayer 和UIInterpolatingMotionEffect寫的一個loadingView Demo MotionEffectDemo，歡迎大家互相交流學習！

寫在最后 MBProgressHUD僅僅使用了一個類就實現了強大的HUD功能（雖然內部有幾個子類），對外提供的接口也很簡潔，封裝的思想和自定義視圖的地方是值得學習的

最后編輯于：2017.12.07 04:47:49

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 230,106評論 6贊 542
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 99,441評論 3贊 429
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 178,211評論 0贊 383
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,736評論 1贊 317
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,475評論 6贊 412
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,834評論 1贊 328
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,829評論 3贊 446
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 43,009評論 0贊 290
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,559評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 41,306評論 3贊 358
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,516評論 1贊 374
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 39,038評論 5贊 363
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,728評論 3贊 348
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 35,132評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,443評論 1贊 295
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,249評論 3贊 399
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,484評論 2贊 379

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

MBProgressHUD源碼解析

MBProgressHUD源碼解析

MBRoundProgressView

MBBarProgressView

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

MBProgressHUD源碼解析

MBRoundProgressView

MBBarProgressView

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频