MBProgressHUD是一個顯示提示窗口的三方庫，常用于用戶交互、后臺耗時操作等的提示。通過顯示一個提示框，通知用戶操作或任務的執行狀態；同時，利用動畫效果，降低用戶等待的焦慮心理，增強用戶體驗。
??本篇文章從源碼角度來看一下MBProgressHUD是如何實現的，所用的知識都是比較基礎的，不過還是值得我們學習一下。詳解如下：
1. 類介紹
-
MBProgressHUD
?? 這是MBProgressHUD的主要類，提供豐富的屬性來調整視圖的樣式。 -
MBRoundProgressView
?? 這是提供Determinate視圖顯示的類，有非圓環和圓環視圖兩種方式。 -
MBBarProgressView
?? 這是提供進度條的視圖類。 -
MBBackgroundView
?? 這是MBProgressHUD的背景視圖類，利用UIVisualEffectView提供毛玻璃效果
2. MBProgressHUD類的顯示模式
-
MBProgressHUDModeIndeterminate
Indeterminate -
MBProgressHUDModeDeterminate
Determinate -
MBProgressHUDModeDeterminateHorizontalBar
DeterminateHorizontalBar -
MBProgressHUDModeAnnularDeterminate
AnnularDeterminate -
MBProgressHUDModeCustomView
這是自定義視圖 -
MBProgressHUDModeText
Text
3.動畫模式
-
MBProgressHUDAnimationFade: 漸變模式 -
MBProgressHUDAnimationZoom: Zoom In & Zoom Out -
MBProgressHUDAnimationZoomOut: 消失時帶變小動畫 -
MBProgressHUDAnimationZoomIn: 出現時帶變大動畫
4. 背景樣式
-
MBProgressHUDBackgroundStyleSolidColor: 正常顏色 -
MBProgressHUDBackgroundStyleBlur: 毛玻璃效果
5. 視圖內容
-
@property (strong, nonatomic, readonly) UILabel *label;: 標題 -
@property (strong, nonatomic, readonly) UILabel *detailsLabel;：詳情 -
@property (strong, nonatomic, readonly) UIButton *button: 按鈕（顯示在標題下方） -
@property (strong, nonatomic, nullable) UIView *customView;：用戶自定義視圖 -
@property (strong, nonatomic, readonly) MBBackgroundView *backgroundView;: 整個背景視圖 -
@property (strong, nonatomic, readonly) MBBackgroundView *bezelView;：提示框背景視圖 -
@property (strong, nonatomic, nullable) UIColor *contentColor UI_APPEARANCE_SELECTOR;： 提示框的內容顏色 -
@property (assign, nonatomic) CGPoint offset UI_APPEARANCE_SELECTOR;：提示框相對父視圖中心點的偏移量 -
@property (assign, nonatomic) CGFloat margin UI_APPEARANCE_SELECTOR;：提示框內的內容視圖的邊距 -
@property (assign, nonatomic) CGSize minSize UI_APPEARANCE_SELECTOR;：提示框最小尺寸 -
@property (assign, nonatomic) BOOL removeFromSuperViewOnHide;：隱藏時從父視圖中刪除 -
@property (assign, nonatomic) NSTimeInterval graceTime;：延遲多久后顯示提示框，避免快速執行的任務也顯示提示框，給用戶造成視覺干擾。 -
@property (assign, nonatomic) NSTimeInterval minShowTime;：提示框視圖最少展示的時間
6. 創建和隱藏視圖
- 創建流程
?? 通過+ (instancetype)showHUDAddedTo:(UIView *)view animated:(BOOL)animated類方法創建視圖，也可以通過對象方法創建，不過建議用類方法，不僅創建方便，而且會自動的添加到父視圖，然后進行顯示。其中，創建過程如下：
- (void)commonInit {
// Set default values for properties
_animationType = MBProgressHUDAnimationFade;
_mode = MBProgressHUDModeIndeterminate;
_margin = 20.0f;
_opacity = 1.f;
_defaultMotionEffectsEnabled = YES;
// Default color, depending on the current iOS version
BOOL isLegacy = kCFCoreFoundationVersionNumber < kCFCoreFoundationVersionNumber_iOS_7_0;
_contentColor = isLegacy ? [UIColor whiteColor] : [UIColor colorWithWhite:0.f alpha:0.7f];
// Transparent background
self.opaque = NO;
self.backgroundColor = [UIColor clearColor];
// Make it invisible for now
self.alpha = 0.0f;
self.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
self.layer.allowsGroupOpacity = NO;
[self setupViews];
[self updateIndicators];
[self registerForNotifications];
}
我們可以發現，通過添加子空間后，根據視圖模式調用updateIndicators方法來創建不同的視圖，最后添加了一個狀態欄的通知，用來在橫豎屏時跳轉視圖。其中，在顯示提示框時，會首先判斷graceTime，如過不為0，那么就創建一個定時器倒計時，時間到之后再判斷任務是否結束，如果finished 不為空，就開始顯示提示框。
- (void)showAnimated:(BOOL)animated {
MBMainThreadAssert();
[self.minShowTimer invalidate];
self.useAnimation = animated;
self.finished = NO;
// If the grace time is set, postpone the HUD display
if (self.graceTime > 0.0) {
NSTimer *timer = [NSTimer timerWithTimeInterval:self.graceTime target:self selector:@selector(handleGraceTimer:) userInfo:nil repeats:NO];
[[NSRunLoop currentRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
self.graceTimer = timer;
}
// ... otherwise show the HUD immediately
else {
[self showUsingAnimation:self.useAnimation];
}
}
- (void)handleGraceTimer:(NSTimer *)theTimer {
// Show the HUD only if the task is still running
if (!self.hasFinished) {
[self showUsingAnimation:self.useAnimation];
}
}
- 隱藏視圖
?? 通過+ (BOOL)hideHUDForView:(UIView *)view animated:(BOOL)animated隱藏視圖，其中會根據minShowTime來判斷是否立即隱藏提示框。如果，minShowTime不為0，那么會創建一個定時器，并把定時器加入到common模式的runloop里，等時間到后再把提示框隱藏。
- (void)hideAnimated:(BOOL)animated {
MBMainThreadAssert();
[self.graceTimer invalidate];
self.useAnimation = animated;
self.finished = YES;
// If the minShow time is set, calculate how long the HUD was shown,
// and postpone the hiding operation if necessary
if (self.minShowTime > 0.0 && self.showStarted) {
NSTimeInterval interv = [[NSDate date] timeIntervalSinceDate:self.showStarted];
if (interv < self.minShowTime) {
NSTimer *timer = [NSTimer timerWithTimeInterval:(self.minShowTime - interv) target:self selector:@selector(handleMinShowTimer:) userInfo:nil repeats:NO];
[[NSRunLoop currentRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
self.minShowTimer = timer;
return;
}
}
// ... otherwise hide the HUD immediately
[self hideUsingAnimation:self.useAnimation];
}
7. MBRoundProgressView 和 MBBarProgressView
這兩個類，分別創建了 Determinate 和 進度條 的提示框視圖，具體實現方法是在 - (void)drawRect:(CGRect)rect 方法里通過 UIBezierPath 或者 Quarts2D 畫出，設計思想算是常規，請參考代碼細讀。
8. MBProgressHUD應用
對于三方框架，使用之前，最好先封裝一層（繼承或分類），方便以后的調試和新框架替換。封裝時，盡量用類方法，使用時比較簡潔。
- 添加提示框
+ (void)showHUDWithText:(NSString *)text inView:(UIView *)view deley:(NSTimeInterval)time
{
if (text == nil || text.length <= 0) {
return;
}
if (view == nil) {
view = [[UIApplication sharedApplication].windows lastObject];
}
MBProgressHUD *HUD = [MBProgressHUD showHUDAddedTo:view animated:YES];
HUD.mode = MBProgressHUDModeText;
[HUD hideAnimated:YES afterDelay:1.5];
}
- 隱藏提示框 （改方法調用時，最好在主線程，異步線程可能會出現問題）
+ (void)hideHUDForView:(UIView *)view
{
if (view == nil) view = [[UIApplication sharedApplication].windows lastObject];
[self hideHUDForView:view animated:YES];
}
