85
89

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Swiftで簡単にローディング画面を表示する

Posted at

iPhoneアプリの開発をしていて、APIの呼び出しや何か重い処理を行う際に、ローディング画面を表示したい!というケースがあると思います。

有名どころではSVProgressHUDというライブラリを利用すると良いですが、ライブラリ自体はObjective-Cで書かれているため、Swiftで書かれたViewControllerで利用する場合は一工夫必要です。

このエントリでは、SwiftでSVProgressHUDを導入してローディング画面を表示するための方法をまとめたいと思います。

プロジェクトにSVProgressHUDを導入する

SVProgressHUDはGithubにリポジトリがあります。
TransitApp/SVProgressHUD - Github

README.mdに書いてあるとおりCocoapods経由で追加するか、cloneして必要なファイルをリポジトリ内に配置して導入してください。

この時注意すべきなのはSVProgressHUDはObjective-Cで書かれているため、Swiftから呼び出す際はBridging-headerファイルを設定し、ヘッダーをincludeしておく必要があることです。

Objective-CのソースをXcodeに新たに追加した場合、自動的に生成ダイアログが表示されるはずです。
うまくいかない場合はプロジェクトのターゲットの、Building Settings->Swift Compiler->Code Generation->Objective-C Bridging Headerで任意のヘッダファイルを指定してください。

指定したBridging Header fileにSVProgressHUD.hのインポートを記述します。

#import "SVProgressHUD.h"

これでSwiftからSVProgressHUDを呼び出す準備が出来ました。

ViewControllerで呼び出す

便利関数の用意
    func dispatch_async_main(block: () -> ()) {
        dispatch_async(dispatch_get_main_queue(), block)
    }
    
    func dispatch_async_global(block: () -> ()) {
        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), block)
    }

GCD(Grand Central Dispatch)と呼ばれるバックグラウンド処理を行うため、このような便利関数を用意しておきます。

こちらの関数はtakabosoftさんのQiitaの記事から引用させていただきました。
SwiftでGCD(Grand Central Dispatch)を呼びやすくしてみる

処理の間に便利関数を挟む

時間のかかる処理の間に先ほどの便利関数を挟んでローディング画面の表示のハンドリングを行います。

        SVProgressHUD.showWithStatus("読み込み中")
        dispatch_async_global {
            // 何か時間のかかる処理(APIの呼び出しなど)
            self.dispatch_async_main {
                if (self.isSuccess == true) { // 呼び出し結果の確認
                    SVProgressHUD.showSuccessWithStatus("成功!")
                    // 成功時の処理を行う(APIのレスポンスを利用して描画処理など)
                } else {
                    SVProgressHUD.showErrorWithStatus("失敗!")
                    // エラーハンドリング
                }
            }
        }

これだけで簡単にローディング表示を行うことが出来ます。

SVProgressHUDのメソッド例

最後に、すぐ使えるおすすめのメソッドを数例紹介して終わりたいと思います。

ローディング中
  • 単にローディングを表示したい場合
SVProgressHUD.show()
  • ローディングにメッセージを添えて表示したい場合
SVProgressHUD.showWithStatus("読み込み中")
ローディング完了
  • 単にローディングを消したい場合
SVProgressHUD.dismiss()
  • ローディング中の処理が成功した旨を表示したい場合
SVProgressHUD.showSuccessWithStatus("成功!")

チェックマーク(✔)と、引数に渡した文字列が表示されてローディングが消えます。

  • ローディング中の処理が失敗した旨を表示したい場合
SVProgressHUD.showErrorWithStatus("失敗!")

バツマーク(✗)と、引数に渡した文字列が表示されてローディングが消えます。

85
89
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
85
89

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?