[iOS開發] SVProgressHUD ~ 簡單易用的進度顯示器

最近海芋開始開發 iOS 程式,而在開發程式時,難免會遇到需要等待的程式碼,如下載進度,或者串接 Web Service 的服務,如果沒有一個等待的通知給使用者,會讓使用者有當機或者不好的使用經驗。「SVProgressHUD」則是一個進度顯示工具,有點像是 Android 的 Progress Bar,不同的是,SVProgressHUD 是以圓型進度工具顯示,相當符合 iOS 的設計風格,如果在找 Android Progress Bar 代替品的朋友,可以趕緊下載這個程式碼來開發您的 iOS 程式。

 

◎◎軟體小檔案◎◎
軟體名稱:SVProgressHUD
軟體版本:2.2.5
軟體介面:英文
支援系統:iOS 開發
■ 軟體下載:【點我下載】

 

在使用這個第三方套件前,我們先來看一下使用 SVProgressHUD 所呈現的效果,預設是六種效果。
SVProgressHUD

 

底下是「show」,只是單純轉圈圈。
SVProgressHUD

 

底下是「show with status」,除了轉圈圈外,還可以在進度下方加上文字。
SVProgressHUD

 

底下是「show with Progress」,這個有進度外,還可以在進度下方加上文字,比較接近  Android 中的 Progress Bar。
SVProgressHUD

 

底下這三種我歸類為同一種,分別是顯示資訊、顯示成功狀態、顯示錯誤狀態。
SVProgressHUD

 

顯示成功狀態。
SVProgressHUD

 

顯示錯誤訊息。
SVProgressHUD

 

要用 SVProgressHUD 的方式也很簡單,官方的範例就有了,以「showWithProgress」來說,官方是寫成這樣,每 0.3 秒就會自動把進度加 10%,一直到 100% 為止就關閉。

  1. - (IBAction)showWithProgress:(id)sender {
  2.     progress = 0.0f;
  3.     [SVProgressHUD showProgress:0 status:@"Loading"];
  4.     [self performSelector:@selector(increaseProgress) withObject:nil afterDelay:0.3f];
  5. }
  6.  
  7. - (void)increaseProgress {
  8.     progress+=0.1f;
  9.     [SVProgressHUD showProgress:progress status:@"Loading"];
  10.  
  11.     if(progress < 1.0f)
  12.         [self performSelector:@selector(increaseProgress) withObject:nil afterDelay:0.3f];
  13.     else
  14.         [self performSelector:@selector(dismiss) withObject:nil afterDelay:0.4f];
  15. }

 

 

不過由於官方的程式是在 Main Thread 做事情,有可能程式會需要在背景做資料處理及畫面更新,所以海芋用到了「dispatch_async」來開背景處理。

  1. - (IBAction)showWithProgress:(id)sender
  2.     dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
  3.         for (int i = 1; i <= 100 i++){
  4.             //更新 UIThread
  5.             dispatch_async(dispatch_get_main_queue(), ^{
  6.                 float progress = (float) (i) /100;
  7.                 [SVProgressHUD showProgress:(progress)
  8.                                      status: [NSString stringWithFormat:@"資料刪除中…"]];
  9.             });
  10.  
  11.             [NSThread sleepForTimeInterval:0.01f];  //刪除每筆資料間隔 0.01 sec
  12.         }
  13.         dispatch_async(dispatch_get_main_queue(), ^{
  14.             [self performSelector: @selector(dismissDialog) withObject:nil afterDelay:0.4f];
  15.         }
  16. }
  17.  
  18. - (void) dismissDialog
  19. {
  20.     [SVProgressHUD dismiss];
  21. }

 

上面為一段程式碼,當我們在刪除資料完成後,可以使用「dispatch_get_main_queue」來通知主畫面來更新進度,值得注意的是,當海芋拿掉「[NSThread sleepForTimeInterval:0.01f]; 」這段程式碼時,畫面不會更新,有可能是程式跑太快了,也有可能是因為 Thread 沒有暫停所致,但無論如何,在刪除大量資料時,本來就應該要停一下,讓 Server 不會如此操勞。

 

而如果你是程式設計師,相信以上你應該有感到一點興趣,甚至可以去 SVProgressHUD 下載程式碼來玩玩,如果你不是程式設計師,那麼這一篇文章對你來說,應該就可以略過囉!

 

以下是 SVProgressHUD 所有的函式,功能相當豐富,可以自行研究一下。

#pragma mark - Customization
 
+ (void)setBackgroundColor:(UIColor*)color;                 // default is [UIColor whiteColor]
+ (void)setForegroundColor:(UIColor*)color;                 // default is [UIColor blackColor]
+ (void)setCornerRadius:(CGFloat)cornerRadius;              // default is 14 pt
+ (void)setRingThickness:(CGFloat)width;                    // default is 4 pt
+ (void)setFont:(UIFont*)font;                              // default is [UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline]
+ (void)setInfoImage:(UIImage*)image;                       // default is the bundled info image provided by Freepik
+ (void)setSuccessImage:(UIImage*)image;                    // default is the bundled success image provided by Freepik
+ (void)setErrorImage:(UIImage*)image;                      // default is the bundled error image provided by Freepik
+ (void)setDefaultMaskType:(SVProgressHUDMaskType)maskType; // default is SVProgressHUDMaskTypeNone
+ (void)setViewForExtension:(UIView*)view;                  // default is nil, only used if #define SV_APP_EXTENSIONS is set
 
#pragma mark - Show Methods
 
+ (void)show;
+ (void)showWithMaskType:(SVProgressHUDMaskType)maskType;
+ (void)showWithStatus:(NSString*)status;
+ (void)showWithStatus:(NSString*)status maskType:(SVProgressHUDMaskType)maskType;
 
+ (void)showProgress:(float)progress;
+ (void)showProgress:(float)progress maskType:(SVProgressHUDMaskType)maskType;
+ (void)showProgress:(float)progress status:(NSString*)status;
+ (void)showProgress:(float)progress status:(NSString*)status maskType:(SVProgressHUDMaskType)maskType;
 
+ (void)setStatus:(NSString*)string; // change the HUD loading status while it's showing
 
// stops the activity indicator, shows a glyph + status, and dismisses HUD a little bit later
+ (void)showInfoWithStatus:(NSString *)string;
+ (void)showInfoWithStatus:(NSString *)string maskType:(SVProgressHUDMaskType)maskType;
 
+ (void)showSuccessWithStatus:(NSString*)string;
+ (void)showSuccessWithStatus:(NSString*)string maskType:(SVProgressHUDMaskType)maskType;
 
+ (void)showErrorWithStatus:(NSString *)string;
+ (void)showErrorWithStatus:(NSString *)string maskType:(SVProgressHUDMaskType)maskType;
 
// use 28x28 white pngs
+ (void)showImage:(UIImage*)image status:(NSString*)status;
+ (void)showImage:(UIImage*)image status:(NSString*)status maskType:(SVProgressHUDMaskType)maskType;
 
+ (void)setOffsetFromCenter:(UIOffset)offset;
+ (void)resetOffsetFromCenter;
 
+ (void)popActivity; // decrease activity count, if activity count == 0 the HUD is dismissed
+ (void)dismiss;
 
+ (BOOL)isVisible;