Swift製のHUDライブラリ PKHUD

はじめに

HUDライブラリとして最も有名なのはSVProgressHUDだと思いますが、今回はSwiftでできているPKHUDを調べてみました。

なぜPKHUDなのか

GitHubでHUDかつ言語がSwiftで検索した結果、のスター数が一番多かったからです。(2018 12/10時点)

• PKHUD
• SwiftNotice
• KRProgressHUD
• VHUD

ざっくり比較

|ライブラリ名|スター数|Swift|Xcode|その他|
:----:|:-----:|:----:|:------:|:----:|:--------:
PKHUD|3,057|4.2|Xcode 10|
SwiftNotice|755|4.0|Xcode 9.3|インストール方法がマニュアルのみ
KRProgressHUD|338|4.2|Xcode 10|日本語ドキュメントがある
VHUD|138|4.2|Xcode 10|

PKHUDについて

特徴

• Appleのデザインをもとに作られている
• 表示もとのViewを明示的に指定できる
• カスタマイズ性が高い

使い方

基本操作

簡単にHUDを表示できるHUDクラスが提供されています。
これを使うことでとても簡単にローディングやステータスを表示することができます。

// HUDを表示
HUD.show(.progress)
HUD.show(.progress, onView: view) // 表示もとのviewを明示的に指定

// HUDを表示して指定時間後に非表示にする
HUD.flash(.progress, delay: 3)
// HUDを出し終わったあとのタイミングが取れる
HUD.flash(.success, onView: view, delay: 2) { _ in
            // HUDを非表示にしたあとの処理
        }

// HUDを非表示にする
HUD.hide()
HUD.hide { _ in
            // HUDを非表示にしたあとの処理
        }

指定できるType

public enum HUDContentType {

    case success

    case error

    case progress

    case image(UIImage?)

    case rotatingImage(UIImage?)

    case labeledSuccess(title: String?, subtitle: String?)

    case labeledError(title: String?, subtitle: String?)

    case labeledProgress(title: String?, subtitle: String?)

    case labeledImage(image: UIImage?, title: String?, subtitle: String?)

    case labeledRotatingImage(image: UIImage?, title: String?, subtitle: String?)

    case label(String?)

    case systemActivity
}

例)
success

error

progress

背景
背景を暗くするかどうかを設定することができます。
デフォルトで暗くなる設定になっています。

HUD.dimsBackground = false
HUD.show(.progress, onView: view)

dimsBackground	true	false

カスタマイズについて

HUDで提供されているもので充分使えますが、カスタマイズしたいということはあると思います。
その場合は、PKHUDを使用します。
PKHUD.sharedHUD.contentViewにカスタマイズしたViewを設定することで実現できます。
PKHUDですでに定義されたView(PKHUDSquareBaseView、PKHUDWideBaseView)を使うと簡単にカスタマイズできます。

例)

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        PKHUD.sharedHUD.contentView = CustomHUDView(image: PKHUDAssets.checkmarkImage, title: "Success!", subtitle: nil)
        PKHUD.sharedHUD.show(onView: view)
    }
}

class CustomHUDView: PKHUDSquareBaseView {

    override init(image: UIImage?, title: String?, subtitle: String?) {
        super.init(image: image, title: title, subtitle: subtitle)

        titleLabel.textColor = UIColor.lightGray
        backgroundColor = UIColor(red: 0xAB/0xFF, green: 0xD2/0xFF, blue: 0xFC/0xFF, alpha: 1.0)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}

注意点
PKHUDSquareBaseViewをカスタマイズしましたが、ローディングを表示したい場合はローディング機能を持ったViewをPKHUD.sharedHUD.contentViewに再度設定します。
表示したい内容によって、PKHUD.sharedHUD.contentViewを都度変える必要があるのでPKHUDを拡張するのがいいかなと思いました。

文字色を変えたいだけとかだと少し手間ですね、、、

まとめ

Swift製のHUDライブラリPKHUDについてでした。
基本的にシンプルで使いやすいなという印象です。
長くSVProgressHUDにお世話になってきましたが、Swiftで作られたPKHUDを使ってみたいと思いました。