【iOS開發】分享一個美觀簡單易用，徹底可定製化的HUD（Toast + Alert + ActionSheet）

本文有大量截圖，建議感興趣的朋友下載demo。

ProHUD = Toast（通知橫幅） + Alert（ProgressHUD、彈窗） + ActionSheet（操做表）

在文檔頁面能夠查看大圖

文檔和源碼

• 文檔：https://xaoxuu.com/wiki/prohud/
• 源碼：https://github.com/xaoxuu/Pro...

特性

極其簡便

發一個彈窗：

Alert.push(scene: .loading, title: "正在加載", message: "請稍等片刻")

發一個通知橫幅：

Toast.push(scene: .warning, title: "設備電量太低", message: "請及時對設備進行充電，以避免影響使用。")

接口靈活

例如發一個彈窗：

Alert.push() { (alert) in
    alert.identifier = "error"
    alert.update { (vm) in
        vm.scene = .error
        vm.title = "同步失敗"
        vm.message = "請檢查網絡是否鏈接"
        vm.add(action: .default, title: "重試") {
            // do something
        }
        vm.add(action: .cancel, title: "取消", handler: nil)
    }
}

實例管理

避免重複發送同一個實例：

Toast.find("aaa", last: { (t) in
    t.update() { (vm) in
        vm.title = "已經存在了"
    }
}) {
    Toast.push(title: "這是一條id爲aaa的橫幅", message: "避免重複發佈同一條信息") { (t) in
        t.identifier = "aaa"
        t.update { (vm) in
            vm.scene = .warning
            vm.duration = 0
        }
    }
}

更新loading的結果：

Alert.find("loading", last: { (a) in
    a.update { (vm) in
        vm.scene = .success
        vm.title = "同步成功"
        vm.message = nil
    }
})

更新爲加載失敗，並增長重試按鈕：

Alert.find("loading", last: { (a) in
    a.update { (vm) in
        vm.scene = .error
        vm.title = "同步失敗"
        vm.message = "請檢查網絡是否鏈接"
        vm.add(action: .default, title: "重試") {
            // do something
        }
        vm.add(action: .cancel, title: "取消", handler: nil)
    }
})

1. 用類似的接口調用Toast、Alert、Guard。
2. 程序初始化時配置自定義UI樣式，快速調用。
3. 用簡便的方法拿到已發佈的實例，避免重複發佈實例。
4. 可對已發佈的實例進行數據更新。
5. 橫豎屏和iPad佈局優化。
6. 易於擴展，能夠很方便的添加任意控件，並處理好佈局。
7. 可對全部實例監聽消失事件。

Toast（頂部浮動通知條）

1. 多個Toast並存策略（平鋪）。
2. 只接收一個點擊事件。
3. 能夠預先對不一樣的場景配置不一樣的默認值（圖標、持續時間）。

Alert（頁面中心彈窗）

1. 多個Alert並存策略（具備景深效果的堆疊）。
2. 能夠預先對不一樣的場景配置不一樣的默認值（圖標、持續時間）。
3. 可快速建立具備預先配置的默認樣式（Default、Destructive、Cancel）的按鈕。
4. 對已發佈的實例進行文本和按鈕的更新，包括新增、修改、刪除文本和按鈕。
5. 強制退出按鈕（防止超時致使頁面卡死）。

Guard（頁面底部操做表）

1. 快速建立具備預先配置的默認樣式的文本元素（標題、副標題、正文）。
2. 可快速建立具備預先配置的默認樣式（Default、Destructive、Cancel）的按鈕。

設計思路

UI與邏輯分離

這個庫採用配置UI和調用接口分離的設計，這種思路借鑑了和而泰公共庫，我認爲這是一種調用比傳統UI庫方便的同時可定製化能力也比傳統UI庫強大的設計思路。

簡單來講，就是你在AppDelegate中告訴ProHUD，你要的橫幅、彈窗、操做表分別是什麼樣的，若是參數是什麼什麼，就怎麼展現UI。
而後調用的地方就不須要設置UI了，只須要專一於數據，如：

Alert.push(scene: .loading, title: "正在加載", message: "請稍等片刻")

這樣就發出了一個彈窗，而彈窗的樣式，則在AppDelegate中以及預先配置好了。我使用了scene這個靈活的參數，你能夠本身擴展場景，例如：

extension ProHUD.Scene {
    static var confirm: ProHUD.Scene {
        var scene = ProHUD.Scene(identifier: "confirm")
        scene.image = UIImage(named: "ProHUDMessage")
        return scene
    }
    static var delete: ProHUD.Scene {
        var scene = ProHUD.Scene(identifier: "delete")
        scene.image = UIImage(named: "ProHUDTrash")
        scene.title = "確認刪除"
        scene.message = "此操做不可撤銷"
        return scene
    }
    static var buy: ProHUD.Scene {
        var scene = ProHUD.Scene(identifier: "buy")
        scene.image = UIImage(named: "ProHUDBuy")
        scene.title = "確認付款"
        scene.message = "一旦購買拒不退款"
        return scene
    }
}

一個scene就能夠理解成一套模板。

極端場景

不少庫沒有多實例管理，很容易出現簡單粗暴的視圖重疊現象，ProHUD針對不一樣場景作了不一樣的優化，對於橫幅來講，能夠平鋪顯示，像系統的通知中心同樣，你能夠拖拽向上移除。對於彈窗來講，我給底層的彈窗作了景深效果處理，使得看起來不像是BUG。