【Swift】NVActivityIndicatorViewを使ってUIブロッカーを作る

ローディングアニメーションで有名なOSSライブラリのNVActivityIndicatorViewをUIブロッカーとして用いる方法です。
簡単に実装することができ、通信処理の間などユーザー操作を受け付けたくない時に便利に使うことができます。
公式のREADMEにも載っていますが備忘録的に。

ライブラリ導入

CocoaPodsを使用
Podfileにpod 'NVActivityIndicatorView'を追加してpod install

UIブロッカーの使い方

1. ActivityDataのインスタンスを作っておく
   let activitData = ActivityData()
2. NVActivityIndicatorPresenterを用いてアニメーション開始
   NVActivityIndicatorPresenter.sharedInstance.startAnimating(activityData)
3. 終わりたい場所でアニメーション終了
   NVActivityIndicatorPresenter.sharedInstance.startAnimating(activityData)

また、setMessage()を使うことで表示文を変更することができます。

実装

例として、firestoreからデータを取得し、画面表示を更新する動作を考えます。
更新が終了するまではUIブロッカーを表示して画面操作を行えないようにしておきます。
※コピペでは動きません。

ViewController.Swift

import UIKit
import Firebase
import NVActivityIndicatorView

final class ViewController: UIViewController {
    
    let activityData = ActivityData(size: nil,
                                    message: nil,
                                    messageFont: nil,
                                    messageSpacing: nil,
                                    type: .ballSpinFadeLoader,
                                    color: .white,
                                    padding: 0, 
                                    displayTimeThreshold: nil,
                                    minimumDisplayTime: nil,
                                    backgroundColor: UIColor(red: 204/255, green: 204/255, blue: 204/255, alpha: 0.8),
                                    textColor: .white)

    override func viewDidLoad() {
        super.viewDidLoad()
        fetchData()
    }
    
    func fetchData() {
        let db = Firestore.firestore()
        let docRef = db.collection("hoge").document("huga")

        NVActivityIndicatorPresenter.sharedInstance.startAnimating(activityData)
        NVActivityIndicatorPresenter.sharedInstance.setMessage("データ取得中")

        docRef.getDocument { (document, error) in
            if let document = document, document.exists {
                NVActivityIndicatorPresenter.sharedInstance.setMessage("データ取得完了")
            } else {
                NVActivityIndicatorPresenter.sharedInstance.setMessage("データ取得失敗")
                NVActivityIndicatorPresenter.sharedInstance.stopAnimating()
                return
            }
        } 
    }    
}

適当に実行するとこんな感じの画面になります。
オレンジのラベルは比較として元の画面に置いているもので、見た目的にも操作できなくなっているのが分かると思います。

まとめ

インジゲーターのアニメーションも種類豊富かつどれもリッチな見た目で使いやすい。
ActivityDataでは文字色は背景色以外にもフォントや最小表示時間なども指定できるので、色々な使い方ができそうです。

以上、簡単なUIブロッカーの作り方でした。
何かのタイミングで参考になる方がいれば幸いです。