post Image
Swift製のHUDライブラリ PKHUD

はじめに

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

なぜPKHUDなのか

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

ざっくり比較

ライブラリ名 スター数 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
スクリーンショット 2018-12-10 22.21.06.png

error
スクリーンショット 2018-12-10 22.18.49.png

progress
スクリーンショット 2018-12-10 22.29.08.png

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

HUD.dimsBackground = false
HUD.show(.progress, onView: view)
dimsBackground true false
スクリーンショット 2018-12-11 16.56.27.png

カスタマイズについて

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

例)

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)
    }
}

スクリーンショット 2018-12-11 2.28.35.png

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

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

まとめ

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


『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。