[Swift3] 読み込み中であることを表すインジケータを表示する

Table of Contents

iOSアプリ内で時間のかかる処理を行う場合、読み込み中であることを表すインジケータ（くるくる回る歯車のようなアニメーション）を表示するのが一般的です。

インジケータは、アプリの利用者にアプリがフリーズしているのではなく、処理を行っていることを明確に伝えるためにも必要なものです。

Swift でインジケータを表示するには、クラス UIActivityIndicatorView を使用します。

UIActivityIndicatorView を表示するサンプルアプリ

以下のような、ボタンをタップすると3秒間インジケータが表示されるサンプルアプリのソースを紹介します。

サンプルソースコード

新規プロジェクトを「Single View Application」のテンプレートで作成した際に作られる ViewController.swift を以下のように変更します。

ViewController.swift

import UIKit

class ViewController: UIViewController {

    // インジケータのインスタンス
    let indicator = UIActivityIndicatorView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // ボタン
        let button = UIButton(type: .system)
        button.setTitle("インジケータ表示", for: .normal)
        button.addTarget(self, action: #selector(self.showIndicator), for: .touchUpInside)
        button.sizeToFit()
        button.center = CGPoint(x: self.view.center.x, y: self.view.frame.height / 4)
        self.view.addSubview(button)
    }
    
    func showIndicator() {
        
        // UIActivityIndicatorView のスタイルをテンプレートから選択
        indicator.activityIndicatorViewStyle = .whiteLarge
        
        // 表示位置
        indicator.center = self.view.center
        
        // 色の設定
        indicator.color = UIColor.green
        
        // アニメーション停止と同時に隠す設定
        indicator.hidesWhenStopped = true
        
        // 画面に追加
        self.view.addSubview(indicator)
        
        // 最前面に移動
        self.view.bringSubview(toFront: indicator)
        
        // アニメーション開始
        indicator.startAnimating()
        
        // 3秒後にアニメーションを停止させる
        DispatchQueue.main.asyncAfter(deadline: .now() + 3, execute: {
            self.indicator.stopAnimating()
        })
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

サンプルソースコードの解説

プロパティ activityIndicatorViewStyle

UIActivityIndicatorView のプロパティ activityIndicatorViewStyle に値を設定することで、あらかじめ用意されたスタイルを使用できます。

用意されたスタイルのテンプレートは以下の3つです。

UIActivityIndicatorViewStyle.white（小さな白色のインジケータ）
UIActivityIndicatorViewStyle.gray（小さな灰色のインジケータ）
UIActivityIndicatorViewStyle.whiteLarge（大きな白色のインジケータ）

今回のサンプルでは、大きな白色の whiteLarge を使用しています。（色は後ほど変更しています）

        // UIActivityIndicatorView のスタイルをテンプレートから選択
        indicator.activityIndicatorViewStyle = .whiteLarge

インジケータの大きさは、プロパティ frame.size などを変更しても変わりませんので注意が必要です。

色の設定

プロパティ color に UIColor を代入します。サンプルでは緑色（UIColor.green）を設定しています。

indicator.color = UIColor.green

アニメーション停止時の挙動 hidesWhenStopped

プロパティ hidesWhenStopped を true にすると、インジケータのアニメーションを停止させるメソッド stopAnimating を呼んだ時に、自動的に画面からインジケータを隠してくれます。

インジケータを最前面に移動

今回のサンプルでは特に必要ないのですが、場合によってはインジケータが他の UIView などの後ろに配置されてしまい、アニメーションをスタートさせてもインジケータが見えなくなってしまう場合があります。

これを防ぐために、アニメーション開始時にインジケータをView階層の最前面に移動させています。

self.view.bringSubview(toFront: indicator)

インジケータのアニメーション開始および停止

UIActivityIndicatorView のアニメーションの開始には、メソッド startAnimating を、アニメーションの停止にはメソッド stopAnimating を利用します。

今回のサンプルでは、アニメーションを開始してから3秒後に停止するようにしています。実際のアプリで使う際は、読み込み処理などの終了タイミングで stopAnimating を呼び出すことになります。

        // アニメーション開始
        indicator.startAnimating()
        
        // 3秒後にアニメーションを停止させる
        DispatchQueue.main.asyncAfter(deadline: .now() + 3, execute: {
            self.indicator.stopAnimating()
        })

以上、UIActivityIndicatorView を利用した読み込みインジケータの表示方法でした。