靈活、可高度自定義的——Progress進度圈、彈窗、加載進度、小菊花


DDProgressHUD的介紹

提供了四種類型的展示:

  • 顯示無限旋轉的加載圖(比如小菊花,可以自定義),顯示文字信息。網絡刷新時經常用到。

loading圖片

  • 顯示加載進度的動畫,也可以顯示文字。網絡下載時用的比較多,加載網頁時也可以用。

進度提示動畫

  • 與用戶彈窗交互的彈窗,告知用戶當前操作的狀態,成功還是失敗,顯示一張圖片和文字。圖片和文字也都可自定義

成功彈窗提示

失敗彈窗提示

自定義圖片彈窗提示

  • 可高度自定義的彈窗,將一個view顯示在遮罩上面,相當於做了一個蒙版

自定義圖片

最后旋轉的菊花,提供了一個view的擴展,將UIActivityIndicatorView小菊花顯示在調用者中間位置。

小菊花

DDProgressHUD的簡單使用與方法介紹

准備

  • 下載代碼:使用很簡單,將工程從github:https://github.com/mddios/DDProgressHUD下載下來,將DDProgressHUD文件全部拖入工程
  • 包含DDProgressHUD.h頭文件即可使用
  • 不用考慮線程的問題,主線程和非主線程均可以

工程現在下來可以看到是一個demo,點擊上面的按鈕就一目了然

為了方便管理與自定義,建議還是fork一份到自己的github

簡單使用與方法介紹

  • 第一類顯示提供三個類方法:無限循化的圖片
/// 只顯示圖片,一直顯示直到調用dismiss方法
+ (void)show;

/// 顯示圖片和文字,一直顯示直到調用dismiss方法
+ (void)showWithStatus:(NSString *)status;

/// 很明顯,顯示時間由duration決定,當然,中途也可以調用dismiss方法來取消顯示
+ (void)showWithStatus:(NSString *)status andDuration:(NSTimeInterval)duration;
  • 第二類顯示提供2個類方法:加載進度
/// 顯示進度,不會自動消失,需要調用dismiss方法,progress 取值范圍0~1
+ (void)showProgress:(CGFloat)progress;

/// 顯示進度,和一段描述,不會自動消失,需要調用dismiss方法
+ (void)showProgress:(CGFloat)progress withStatus:(NSString *)status;

  • 第三類顯示提供6個類方法:彈窗,顯示圖片和文字
/// 成功彈窗,只顯示圖片,
+ (void)showSuccessImage;

/// 成功狀態圖片和info
+ (void)showSuccessImageWithInfo:(NSString *)info;

/// 錯誤彈窗,只顯示圖片
+ (void)showErrorImage;

/// 錯誤狀態圖片和info
+ (void)showErrorImageWithInfo:(NSString *)info;

/// 顯示自定義圖片和文字信息,視圖大小會根據文字和圖片的大小自動調整
+ (void)showImage:(UIImage *)image andInfo:(NSString *)info;

/// 顯示自定義圖片和文字信息時間到后自動消失,視圖大小會根據文字和圖片的大小自動調整
+ (void)showImage:(UIImage *)image andInfo:(NSString *)info andDuration:(CGFloat)duration;

關於顯示時間的問題:會根據傳入的Info長短來計算一個時間,然后和最大時間、最小時間做比較,防止超過預期值,最大最小值都可以程序設置,具體參照下面關於設置的介紹。

成功和失敗的圖片沒有提供接口來替換,如果需要顯示自定義的圖片,上面也提供了方法。

當然你也將程序默認成功和失敗的圖片自己替換掉(在bundle中),程序會根據圖片的大小來自動計算Frame,所以圖片大小也不受限制,但是圖片名字必須與默認的保持一致。

  • 第四類顯示:在maskview(相當於蒙版)上顯示view,高度自定義
+ (void)showWithView:(UIView *)view andDuration:(NSTimeInterval)duration;

隨意顯示,和上面最大的不同就是,它的frame需要使用者自己定義與計算,HUD只是提供一個蒙版,還有就是點擊蒙版后的操作(隱藏,發送通知,或者什么也不做)

  • 最后,也算第五類吧

顯示系統的菊花到view的中間,view的擴展方法

/// 將DDProgressHUD無限循環動畫添加到view, @return 返回DDProgressHUD實例
- (UIActivityIndicatorView *)showActivityView;

/// 將最頂層的ActivityView從父視圖刪除,如果添加了多次則只會刪除最頂層! @return 找到並刪除成功返回YES,否則NO
- (BOOL)hiddenActivityView;

DDProgressHUD的全局設置

設置有兩種:

  • 頭文件里面的默認設置(宏定義),相當於初始化,全局有效。位置:DDDefaultSetup.h頭文件
  • 程序提供的類方法,會覆蓋之前的設置,全局有效。接口頭文件:DDProgressHUD.h

簡單看下視圖和對應的名稱,還有層級

  1. maskview顯示在window上
  2. DDProgressHUD(下面簡稱hud)的backgroundView
  3. 大部分視圖處於這一層級,比如上面提到的第一類、第二類、第三類顯示的視圖都在這個層級,下面示意圖展示的是第二類:進度
    • 3.1: 進度條的,有兩個,黑色的為foregroundRing,灰色的為backgroundRing
    • 3.2:顯示的lbl

也可以根據上面顯示類別和view的層級關系,分為以下幾種

1 maskview,蒙版的設置

首先默認設置,一共有4個

/// 遮罩默認不透明度
#define kMaskViewAlpha              0.6f
/// 遮罩默認顏色
#define kMaskViewBackgroundColorRGB 0x999999

/// 默認展示動畫時間
#define kShowAnimateDuration        0.2f
/// 默認隱藏動畫時間
#define kDismissAnimateDuration     0.2f

前兩個好理解,后面兩個是展示maskview和隱藏時的動畫時間,是對alpha做的動畫。

對應類方法設置為:(void)setMaskviewColor:(UIColor *)color,顏色和透明度,一起設置。動畫時間沒有提供。

另外還有setMaskViewAutomaticHidden:,即點擊蒙版后是否自動消失視圖,即調用dismiss方法。無論YES或者NO,點擊后都會發送一個通知static const NSNotificationName DDMaskViewDidClicked = @"DDMaskViewDidClicked";

2 白色的背景設置

頭文件默認設置

/// 圓角半徑
#define kCornerRadius               10
#define kHudColor                   0xF0F0F0
/// hud最大寬度與屏幕寬度比例
#define kMaxWidthRatioScreenWidth   (2.0/3.0)
/// hud最大高度與屏幕高度比例
#define kMaxHeightRatioScreenHeight (2.0/3.0)
/// hud最小寬高比,避免hud顯得太瘦,使用者可以通過將文本換行(\n\r)來避免太胖
#define kMinimumWidthRatioHeight    0.95

/// 圖片與文字之間的間隙(豎直方向)
#define kViewMargin                 12
/// 與父視圖間隙
#define kTopAndBottomMargin         16
/// 與父視圖間隙
#define kLeftAndRightMargin         16
  • 與屏幕的寬高比:主要是計算字符串文字信息是給的限定,防止超過限制,從而顯得不美觀
  • hud自身的寬高比:主要是避免顯得太瘦,比如文字信息很短,就會現的很瘦,而太胖的話,可以對文字信息進行換行處理
  • 還有間隙的設置:主要是針對hud的子view

類方法的設置:有的沒有提供(比如寬高比,比如視圖間隙)

/// 設置圓角,默認為10,具體參照:DDDefaultSetup.h為准
+ (void)setBackgroundViewCornerRadius:(CGFloat)radius;
/// 設置背景顏色,默認為0xF0F0F0,具體參照:DDDefaultSetup.h為准
+ (void)setBackgroundViewColor:(UIColor *)color;
/// 設置字體,默認為偏好設置字體
+ (void)setFont:(UIFont *)font;

3 彈窗、無限旋轉的圖片、進度圈的設置

共同的設置,即文字(lbl)字體:

類方法:setFont:,默認設置為跟隨偏好設置的小標題大小變化[UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline]

  • 彈窗

默認:

/// 最長10秒,最短3秒
#define kDDMaxImageShowDuration     10.0f
#define kDDMinimumImageShowDuration 3.0f
/// 每個文字顯示時間
#define kEveryWordShowDuration      0.2f

類方法:

+ (void)setMaxImageShowDuration:(CGFloat)duration;
+ (void)setMinimumImageShowDuration:(CGFloat)duration;
/// 默認每個文字0.2s,具體參照:DDDefaultSetup.h為准
+ (void)setEveryWordShowDuration:(CGFloat)duration;

主要用於計算彈窗顯示時間長短

  • 無限旋轉的圖片

默認:

/// 旋轉一周所用的時間,控制旋轉的速度
#define kOneRoundDuration           1.0f

類方法:多提供了旋轉的圖片設置,可以在這里設置,也可以直接將bundle里面的替換,替換后全局有效

/// 自定義旋轉的圖片
+ (void)setLoopImage:(UIImage *)image;
/// 控制旋轉的速度:旋轉一圈所用的時間,默認為1s,具體參照:DDDefaultSetup.h為准
+ (void)setLoopOneRingDuration:(CGFloat)duration;
  • 進度圈

默認:

/// 進度圓環線半徑大小
#define kRingRadius                 25.0f
/// 進度圓環線寬度
#define kRingLineWidth              3.0f
/// 進度圓環顏色
#define kForegroundRingLineColorRGB 0x333333
#define kBackgroundRingLineColorRGB 0xE0E0E0

類方法:

/// 圓弧半徑,默認為25,具體參照:DDDefaultSetup.h為准
+ (void)setForegroundRingRadius:(CGFloat)radius;
+ (void)setBackgroundRingRadius:(CGFloat)radius;
/// 圓弧線寬度,默認為3,具體參照:DDDefaultSetup.h為准
+ (void)setForegroundRingLineWidth:(CGFloat)width;
+ (void)setBackgroundRingLineWidth:(CGFloat)width;
/// 圓弧線顏色,默認為0xE0E0E0 0x333333,具體參照:DDDefaultSetup.h為准
+ (void)setForegroundRingLineColor:(UIColor *)color;
+ (void)setBackgroundRingLineColor:(UIColor *)color;

github地址:https://github.com/mddios/DDProgressHUD ,已支持CocoaPods:pod 'MDDProgressHUD',注意前面是MDD,不是DD(被別人占用)
如果幫到了你,給顆星吧!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM