Swift 造輪子之自制 HUD

Harley-xk發表於2017-12-19
Swift

HUD 是每個 iOS App 的必備元件之一，市面上 Objective-C 的版本也是五花八門。然而轉入 Swift 之後並沒有一個明星元件出現，僅有的那幾個也不能完全滿足需求，無奈只能自己造輪子了。

自造輪子之 Chrysan

Chrysan 取自單詞 chrysanthemum 的前半部分，意為菊花，也是 HUD 的通俗稱呼。所以就這麼叫著吧～

其實 Chrysan 這個庫寫完已經有一段時間了，經過了好幾個線上專案的考驗，暫時沒有發現什麼重大問題，所以最近把它推送到了 CocoaPods，打算分享出來造福大眾，順便騙一波 star ?

安裝

Chrysan 已經推送到 pod repo，所以整合非常簡單：

pod 'Chrysan'
複製程式碼

當然，也可以在我的 Github 上直接下載原始碼：https://github.com/Harley-xk/Chrysan

使用

Chrysan 設計為每個 View 都可以建立出 HUD，實踐證明這個特性在某些特殊情況下非常有用。每個 View 都有一個 chrysan 屬性，通過它可以建立當前 View 的獨立的菊花。只有當第一次訪問 chrysan 屬性時才會真實地建立 ChrysanView 例項，避免不必要的開銷和記憶體佔用。

通過訪問 ViewController 的 chrysan 屬性，可以訪問 ViewController 的根 View 的菊花並自動建立。

顯示

public func show(_ status: Status = .running, message: String? = nil, hideDelay delay: Double = 0)
複製程式碼

這個方法用來顯示一個菊花，各引數說明如下：

message - 顯示在圖示下方的說明文字，說明文字支援多行文字

hideDelay - 自動隱藏的時間，傳入0則表示不自動隱藏

status - 顯示菊花的狀態，屬於 Status 列舉型別，可以控制顯示不同的狀態

/// 菊花的狀態，不同的狀態顯示不同的icon
    public enum Status {
        /// 無狀態，顯示純文字
        case plain
        /// 執行中，顯示菊花
        case running
        /// 進度，環形進度條
        case progress
        /// 成功，顯示勾
        case succeed
        /// 錯誤，顯示叉
        case error
        /// 自定義，顯示自定義的 icon
        case custom
    }
複製程式碼

顯示菊花

由於 show 方法的各個引數都支援預設值，因此可以呼叫所有引數都是預設值的最簡形式，此時顯示一個單純的不會隱藏的菊花。

chrysan.show()
複製程式碼

如果需要顯示帶文字的菊花，只需要簡單加上一個 message 引數就可以了：

chrysan.show(message: "正在處理")
複製程式碼

顯示純文字

// 顯示純文字
chrysan.show(.plain, message:"這是一段純文字")
// 顯示純文字，1 秒後隱藏
chrysan.show(.plain, message:"這是一段純文字", hideDelay: 1)
複製程式碼

顯示圖案

// 任務完成後給予使用者反饋
chrysan.show(.succeed, message: "處理完畢", hideDelay: 1)
// 顯示自定義圖案
let image = UIImage(named: "myImage")
chrysan.show(customIcon: image, message: "自定義圖案", hideDelay: 1)
複製程式碼

顯示任務進度

// 顯示環形的任務進度，會在中心顯示進度百分比，progress 取值 0-1
chrysan.show(progress: progress, message: "下載中...")
複製程式碼

自定義樣式

Chrysan 支援有限的自定義樣式

菊花背景支援 UIBlurEffect 的所有樣式

/// 菊花背景樣式，使用系統自帶的毛玻璃特效，預設為黑色樣式
public var hudStyle = UIBlurEffectStyle.dark
複製程式碼

菊花使用系統的 UIActivityIndicatorView，支援 UIActivityIndicatorViewStyle 的所有型別，預設為 large white

public var chrysanStyle = UIActivityIndicatorViewStyle.whiteLarge
複製程式碼

顏色，影響 icon（不包含菊花）、說明文字、進度條和進度數值的顏色

/// icon 及文字顏色，預設為白色
public var color = UIColor.white
複製程式碼

支援自定義圖片，圖片會被強制轉換成 Template 渲染模式，因此必須使用包含 alpha 通道的圖片

/// 自定義的 icon 圖片 
public var customIcon: UIImage? = nil
複製程式碼

彈出 HUD 時，可以設定遮罩以遮住背景的內容，遮罩的顏色可以自定義，預設為全透明

/// 遮罩顏色，遮擋 UI 的檢視層的顏色，預設透明
public var maskColor = UIColor.clear
複製程式碼

可以自定義 HUD 在檢視中央的偏移，可以在某些特殊情況下調整 HUD 的位置

/// 菊花在檢視中水平方向上的偏移，預設為正中
public var offsetX: CGFloat = 0
/// 菊花在檢視中豎直方向上的偏移，預設為正中
public var offsetY: CGFloat = 0
複製程式碼

更多內容請檢視示例以及程式碼註釋。

相關文章