iOS提示框,為什么你應(yīng)該使用MBProgressHUD?

2019-11-14 18:18:49

字體：大中小

供稿：網(wǎng)友

這是一篇帶有一定筆者主觀感情色彩的比較文章.文章著重對比github上最流行的兩個(gè)iOS進(jìn)度提示控件 MBPRogressHUD 與 SVProgressHUD的各自優(yōu)劣,來幫助初學(xué)者找到一個(gè)適合的iOS提示框解決方案.

無論如何,你總是需要一個(gè)提示框.

提示框,進(jìn)度提示,加載中提示等等,無論怎樣,你總是需要提示框來指示某個(gè)狀態(tài)正在后臺努力進(jìn)行中.一個(gè)合適的提示框,更多的是用來增強(qiáng)用戶體驗(yàn).把最多的時(shí)間,用來做更核心的事;把這些不是非常重要的事,你應(yīng)該試著使用一個(gè)成熟穩(wěn)定的第三方來解決.

MBProgressHUD 還是 SVProgressHUD ?

許多時(shí)候,選擇都是很重要的,但是總是要做出選擇.每個(gè)人考慮的因素和角度不同,結(jié)論或許也不同.但是,你要明白,你現(xiàn)在是要找一個(gè)合適的方案來解決自己的關(guān)于"提示框"的需求,而不是去無意義的討論與分析.我推薦你使用 MBProgressHUD. 如果你只是想找一個(gè)答案,看到這里就夠了.下面會進(jìn)行一些對比分析.有時(shí)候,羅列一些可選答案,總是讓人感覺很舒服的;但是我們最終都要做出選擇,表明自己的態(tài)度.就像你可以依然堅(jiān)持自己的看法,我會依然深度使用 MBProgressHUD一樣.下面的分析不是要證明 MBProgressHUD 或 SVProgressHUD 誰好或者不好,更多的只是為了說明,我的選擇可能不是最佳的,但還是靠點(diǎn)譜的!

github 流行度: MBProgressHUD - SVProgressHUD = 2500

截止目前, MBProgressHUD 的關(guān)注度為 8556, SVProgressHUD 的關(guān)注度為 6003,差額在 2500左右.github上面的流行度是很能說明兩個(gè)第三方的相對優(yōu)劣的,這就像各個(gè)書店上圖書的購買量和評論量總是和一本書的價(jià)值成正相關(guān)一樣!誠然, MBProgressHUD 和 SVProgressHUD 的關(guān)注度都是非常高的了,都已經(jīng)屬于非常流行的 iOS 第三方了.但是,既然我要選一個(gè)深度使用,肯定是關(guān)注度更高的那個(gè)!在大多數(shù)時(shí)候,我相信"大家"的選擇,對自己是可有參考價(jià)值的!

接口易用性: MBProgressHUD == SVProgressHUD

以下是MBProgressHUD 和 SVProgressHUD 各自項(xiàng)目的github主頁上,各自的基本用法示例:

[MBProgressHUD showHUDAddedTo:self.view animated:YES];dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{    // Do something...    dispatch_async(dispatch_get_main_queue(), ^{        [MBProgressHUD hideHUDForView:self.view animated:YES];    });});

[SVProgressHUD show];dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{    // time-consuming task    dispatch_async(dispatch_get_main_queue(), ^{        [SVProgressHUD dismiss];    });});

在大多數(shù)場景中,你幾乎只會用到顯示與隱藏這兩個(gè)最基本的方法,所以說,盡管 SVProgressHUD 自稱更加易用,但是我還是認(rèn)為這真的看不出什么優(yōu)勢.

接口豐富性: MBProgressHUD >> SVProgressHUD

MBProgressHUD 和 SVProgressHUD 都支持簡單的進(jìn)度提示和文字提示.單從各自github主頁上來看, SVProgressHUD 似乎擁有更多的接口,但是事實(shí)并非如此.如果你下載過MBProgressHUD的示例就會發(fā)現(xiàn),它能實(shí)現(xiàn)的功能要遠(yuǎn)遠(yuǎn)多于文檔示例給出的簡單的 顯示 與 隱藏.為了能讓大家更多的了解MBProgressHUD,列出部分方法與參數(shù)常量,具體信息可參考官方示例:

/** * 創(chuàng)建一個(gè)新的HUD,并把它添加并顯示到提供的視圖上.與之相對應(yīng)的方法是 hideHUDForView:animated:. * * @note 這個(gè)方法會設(shè)置HUD的屬性`removeFromSuperViewOnHide`為YES.HUD會在隱藏時(shí)自動從父視圖上移除. * * @param view 將HUD添加到此視圖上. * @param animated YES,顯示時(shí)使用當(dāng)前的動畫類型顯示;NO,直接顯示不使用動畫效果. * @return 新創(chuàng)建的HUD. * * @see hideHUDForView:animated: * @see animationType */+ (MB_INSTANCETYPE)showHUDAddedTo:(UIView *)view animated:(BOOL)animated;/** * 找到并隱藏子視圖最頂層的HUD.與之對應(yīng)的方法是 showHUDAddedTo:animated:. * * @note 這個(gè)方法會設(shè)置HUD的屬性`removeFromSuperViewOnHide`為YES.HUD會在隱藏時(shí)自動從父視圖上移除. * * @param view 用來在其子視圖中查找HUD的視圖. * @param animated YES,隱藏時(shí)使用當(dāng)前的動畫類型顯示;NO,直接隱藏不使用動畫效果. * @return YES,如果某個(gè)HUD被找到并被移除;否則返回NO. * * @see showHUDAddedTo:animated: * @see animationType */+ (BOOL)hideHUDForView:(UIView *)view animated:(BOOL)animated;/** * 找到子視圖中所有的HUD,并隱藏. * * @note 這個(gè)方法會設(shè)置HUD的屬性`removeFromSuperViewOnHide`為YES.HUD會在隱藏時(shí)自動從父視圖上移除. * * @param view 用來在其子視圖中查找HUD的視圖. * @param animated YES,隱藏時(shí)使用當(dāng)前的動畫類型顯示;NO,直接隱藏不使用動畫效果. * @return 找到并移除的HUD的數(shù)量. * * @see hideHUDForView:animated: * @see animationType */+ (NSUInteger)hideAllHUDsForView:(UIView *)view animated:(BOOL)animated;/** * 找到并返回子視圖最頂層的HUD. * * @param view 用來在其子視圖中查找HUD的視圖. * @return 子視圖最頂層的HUD. */+ (MB_INSTANCETYPE)HUDForView:(UIView *)view;/** * 找到并返回子視圖中所有的HUD. * * @param view 用來在其子視圖中查找HUD的視圖. * @return 所有找到的HUD視圖(存儲 MBProgressHUD 對象的數(shù)組). */+ (NSArray *)allHUDsForView:(UIView *)view;/** * 使用屏幕尺寸創(chuàng)建HUD的便利初始化方法.  * * @param window 提供邊框值以初始化HUD的窗口.應(yīng)該和HUD未來的父視圖相同(比如,創(chuàng)建 HUD 后,將HUD添加到此窗口上). */- (id)initWithWindow:(UIWindow *)window;/** * 使用指定視圖的邊框尺寸創(chuàng)建HUD的便利初始化方法.  * * @param view 提供邊框值以初始化HUD的視圖.應(yīng)該和HUD未來的父視圖相同(比如,創(chuàng)建 HUD 后,將HUD添加到此視圖上). */- (id)initWithView:(UIView *)view;/**  * 顯示HUD.你需要確保調(diào)用此方法時(shí),主線程未被其他任務(wù)阻塞,以便于更新視圖.當(dāng)你已經(jīng)在新的線程中開始(比如,使用NSOperation或者NSURLRequest的異步請求等)執(zhí)行某個(gè)任務(wù)后,再執(zhí)行此方法.  * * @param animated YES,顯示時(shí)使用當(dāng)前的動畫類型顯示;NO,直接顯示不使用動畫效果. * * @see animationType */- (void)show:(BOOL)animated;/**  * 隱藏HUD.這個(gè)仍然會去嘗試調(diào)用代理的hudWasHidden:方法.此方法是 show: 的配對方法.當(dāng)你的任務(wù)完成時(shí),再使用它.  * * @param animated YES,隱藏時(shí)使用當(dāng)前的動畫類型顯示;NO,直接隱藏不使用動畫效果. * * @see animationType */- (void)hide:(BOOL)animated;/**  *  延時(shí)隱藏HUD.這個(gè)仍然會去嘗試調(diào)用代理的hudWasHidden:方法.此方法是 show: 的配對方法.當(dāng)你的任務(wù)完成時(shí),再使用它.   *  * * @param animated YES,隱藏時(shí)使用當(dāng)前的動畫類型顯示;NO,直接隱藏不使用動畫效果. * @param delay Delay in seconds until the HUD is hidden. * * @see animationType */- (void)hide:(BOOL)animated afterDelay:(NSTimeInterval)delay;/**  * 當(dāng)在新線程執(zhí)行某個(gè)后臺任務(wù)時(shí),顯示HUD;任務(wù)完成時(shí),自動隱藏HUD. * * 這個(gè)方法會處理自動釋放池的相關(guān)技術(shù)細(xì)節(jié),所以你可以安全使用它. * * @param method HUD顯示期間,被執(zhí)行的方法.這個(gè)方法會在一個(gè)新的線程中執(zhí)行. * @param target HUD顯示期間,被調(diào)用的方法歸屬的實(shí)例對象. * @param object 用來傳遞給方法的可選對象. * @param animated YES,HUD使用當(dāng)前的 animationType 動畫類型來顯示或隱藏;否則,顯示或隱藏時(shí)不使用動畫效果. * animations while (dis)appearing. */- (void)showWhileExecuting:(SEL)method onTarget:(id)target withObject:(id)object animated:(BOOL)animated;#if NS_BLOCKS_AVAILABLE/** * 當(dāng)在后臺隊(duì)列中執(zhí)行block時(shí),顯示HUD;并在block執(zhí)行完畢后,隱藏HUD. * * @see showAnimated:whileExecutingBlock:onQueue:completionBlock: */- (void)showAnimated:(BOOL)animated whileExecutingBlock:(dispatch_block_t)block;/** * 當(dāng)在后臺隊(duì)列中執(zhí)行block時(shí),顯示HUD;并在block執(zhí)行完畢后,隱藏HUD. * * @see showAnimated:whileExecutingBlock:onQueue:completionBlock: */- (void)showAnimated:(BOOL)animated whileExecutingBlock:(dispatch_block_t)block completionBlock:(MBProgressHUDCompletionBlock)completion;/** * 當(dāng)在后臺隊(duì)列中執(zhí)行block時(shí),顯示HUD;并在block執(zhí)行完畢后,隱藏HUD. * * @see showAnimated:whileExecutingBlock:onQueue:completionBlock: */- (void)showAnimated:(BOOL)animated whileExecutingBlock:(dispatch_block_t)block onQueue:(dispatch_queue_t)queue;/**  * 當(dāng)在一個(gè)指定的隊(duì)列中執(zhí)行block時(shí),顯示HUD;block執(zhí)行完畢后在主線程執(zhí)行completion block;然后隱藏HUD. * * @param animated YES,HUD使用當(dāng)前的 animationType 動畫類型來顯示或隱藏;否則,顯示或隱藏時(shí)不使用動畫效果. * @param block HUD顯示期間執(zhí)行的block. * @param queue block在此隊(duì)列中執(zhí)行. * @param completion 完成時(shí)執(zhí)行的block. * * @see completionBlock */- (void)showAnimated:(BOOL)animated whileExecutingBlock:(dispatch_block_t)block onQueue:(dispatch_queue_t)queue		  completionBlock:(MBProgressHUDCompletionBlock)completion;

接口靈活性和可擴(kuò)展性: MBProgressHUD > SVProgressHUD

首先,二者都是開放源代碼的,如果有特殊需求,可以完全自主定制;所以這里主要討論的是 MBProgressHUD 和 SVProgressHUD自身在不修改核心代碼的前提下的接口靈活性和可擴(kuò)展性.同樣的但從文檔來看, SVProgressHUD 表現(xiàn)出更多的靈活性,參見: SVProgressHUD–比MBProgressHUD更好用的 iOS進(jìn)度提示組件.但是事實(shí)并非如此! MBProgressHUD 入門文檔相對很少提及其靈活性,但其提供的DEMO中較完整地展示了它的強(qiáng)大之處.個(gè)人認(rèn)為,單單允許使用自定義視圖作為提供框的視圖這一點(diǎn),就足以讓SVProgressHUD 的絕大部分特性黯然失色;這也是我最終決定選定 MBProgressHUD 并深入使用 MBProgressHUD的重要原因.初次之外, MBProgressHUD 還支持自定義部分進(jìn)度條相關(guān)的屬性.具體細(xì)節(jié)如下:

@interface MBProgressHUD : UIView/** * HUD完全隱藏后執(zhí)行的block. */@property (copy) MBProgressHUDCompletionBlock completionBlock;/**  * MBProgressHUD 操作模式. 默認(rèn)是 MBProgressHUDModeIndeterminate. * * @see MBProgressHUDMode */@property (assign) MBProgressHUDMode mode;/** * HUD顯示和隱藏時(shí)使用的動畫類型. * * @see MBProgressHUDAnimation */@property (assign) MBProgressHUDAnimation animationType;/** * HUD處于MBProgressHUDModeCustomView模式時(shí),顯示此自定義視圖(比如一個(gè) UIImageView). * 最好設(shè)置自定義視圖寬高為 37x37(這是HUD內(nèi)建指示器的邊框值). */@property (MB_STRONG) UIView *customView;/**  * HUD代理對象. * * @see MBProgressHUDDelegate */@property (MB_WEAK) id<MBProgressHUDDelegate> delegate;/**  *狀態(tài)指示器下可選顯示的短消息.HUD會自動調(diào)整文字的尺寸. 如果文字過長,后面會用"..."代替.  */@property (copy) NSString *labelText;/**  * 可選顯示在labelText的細(xì)節(jié)文字信息.支持多行顯示. */@property (copy) NSString *detailsLabelText;/**  * HUD的不透明度.默認(rèn)是0.8. */@property (assign) float opacity;/** * HUD的顏色.默認(rèn)黑色.設(shè)置此值后, opacity屬性的值將不再使用,因?yàn)轭伾部梢栽O(shè)置透明度. */@property (MB_STRONG) UIColor *color;/**  * HUD相對于父視圖中心點(diǎn)的水平偏移量. */@property (assign) float xOffset;/**  * HUD相對于父視圖中心點(diǎn)的垂直偏移量. */@property (assign) float yOffset;/** * HUD邊緣與HUD的元素之間(比如標(biāo)簽,指示器,自定義視圖等)的空白距離.  * 默認(rèn) 20.0 */@property (assign) float margin;/** * HUD圓角半徑,默認(rèn)10.0. */@property (assign) float cornerRadius;/**  * 是否給父視圖添加一個(gè)放射線樣式的遮罩層.默認(rèn)NO. */@property (assign) BOOL dimBackground;/* * 用于指定某個(gè)方法執(zhí)行一段時(shí)間之后再顯示HUD,以秒記.如果方法在這段時(shí)間之前就執(zhí)行完成,就不再顯示HUD.  * 這主要是為了優(yōu)化耗時(shí)可能極短的任務(wù)的體驗(yàn). * 默認(rèn)值為 0. * 這個(gè)屬性僅在可以任務(wù)的狀態(tài)可以知曉時(shí),才有作用. * @see taskInProgress */@property (assign) float graceTime;/** * HUD顯示的最小時(shí)間(以秒記.) * 這可以避免HUD剛一顯示立即又隱藏所帶來的不好的用戶體驗(yàn). * 默認(rèn)是 0. */@property (assign) float minShowTime;/** * 指示被執(zhí)行的操作是否還在執(zhí)行. graceTime 屬性依賴于這個(gè)屬性. * 如果你沒有設(shè)置graceTime(和設(shè)置為0.0不同),這個(gè)屬性沒有任何作用. * 當(dāng)使用showWhileExecuting:onTarget:withObject:animated:時(shí),這個(gè)值會被自動設(shè)置. * 當(dāng)直接使用show:或hide:等方法顯示或隱藏HUD時(shí),你應(yīng)該手動設(shè)置taskInProgress 屬性的值,以保證 graceTime 能正確發(fā)揮作用. */@property (assign) BOOL taskInProgress;/** * HUD隱藏時(shí),是否從父視圖中移除. * 默認(rèn) NO.  */@property (assign) BOOL removeFromSuperViewOnHide;/**  * 用于主標(biāo)簽的字體值. */@property (MB_STRONG) UIFont* labelFont;/** * 主標(biāo)簽顏色值. */@property (MB_STRONG) UIColor* labelColor;/** * 詳情標(biāo)簽字體值. */@property (MB_STRONG) UIFont* detailsLabelFont;/**  * 詳情標(biāo)簽顏色. */@property (MB_STRONG) UIColor* detailsLabelColor;/** * 指示器顏色.默認(rèn) [UIColor whiteColor] */@property (MB_STRONG) UIColor *activityIndicatorColor;/**  * 進(jìn)度指示器的顏色,可選 0.0 ~ 1.0,默認(rèn)0.0. */@property (assign) float progress;/** * HUD面板的最小尺寸.默認(rèn) CGSizeZero. */@property (assign) CGSize minSize;/** *  HUD面板的實(shí)際尺存,只讀. *  你可以使用它來限制HUD的可點(diǎn)擊區(qū)域. * @see https://github.com/jdg/MBProgressHUD/pull/200 */@property (atomic, assign, readonly) CGSize size;/** * 是否強(qiáng)制設(shè)置HUD為正方形,默認(rèn)NO. */@property (assign, getter = isSquare) BOOL square;@end@protocol MBProgressHUDDelegate <NSObject>@optional/**  * HUD完全從屏幕中隱藏時(shí)調(diào)用此方法. */- (void)hudWasHidden:(MBProgressHUD *)hud;@end/** * 一個(gè)餅狀圖樣式的進(jìn)圖指示視圖. */@interface MBRoundProgressView : UIView /** * 進(jìn)度 (0.0 to 1.0) */@property (nonatomic, assign) float progress;/** * 進(jìn)度指示器顏色.默認(rèn) [UIColor whiteColor]. */@property (nonatomic, MB_STRONG) UIColor *progressTintColor;/** * 進(jìn)度指示的背景部分的顏色. * 默認(rèn)白色半透(透明度0.1) */@property (nonatomic, MB_STRONG) UIColor *backgroundTintColor;/* * 顯示模式.NO,圓形;YES,環(huán)形.默認(rèn)圓形. */@property (nonatomic, assign, getter = isAnnular) BOOL annular;@end/** * 一個(gè)水平進(jìn)度條視圖.  */@interface MBBarProgressView : UIView/** * 進(jìn)度 (0.0 to 1.0) */@property (nonatomic, assign) float progress;/** * 進(jìn)度條邊框線的顏色. * 默認(rèn)白色 [UIColor whiteColor]. */@property (nonatomic, MB_STRONG) UIColor *lineColor;/** * 進(jìn)度條背景色. * 默認(rèn)是 [UIColor clearColor]; */@property (nonatomic, MB_STRONG) UIColor *progressRemainingColor;/** * 進(jìn)度的顏色. * 默認(rèn) [UIColor whiteColor]. */@property (nonatomic, MB_STRONG) UIColor *progressColor;@end