【7step】SwiftでのUIActivityIndicatorViewの完全ガイド

はじめに
●UIActivityIndicatorViewとは
- ○UIActivityIndicatorViewの基本
- ○その利点と主な用途
●UIActivityIndicatorViewの使い方
●UIActivityIndicatorViewの応用例
●注意点と対処法
- ○過度な使用に関する注意
- ○表示されない場合のトラブルシューティング
●カスタマイズ方法
- ○サンプルコード7：独自のデザインでカスタマイズする方法
まとめ

はじめに

あなたが新しいSwiftのプロジェクトを開始したり、既存のアプリに新しい機能を追加したりする際、ユーザーに何らかの処理が行われていることを知らせるために、”ローディングインジケータ”が役立つことが多いでしょう。

Swiftでこのような機能を追加するための主要なコンポーネントは「UIActivityIndicatorView」です。

この記事を読むことで、UIActivityIndicatorViewの基本から応用、カスタマイズ方法まで、幅広く理解し、効果的にSwiftのプロジェクトに実装する手法を身につけることができるでしょう。

●UIActivityIndicatorViewとは

UIActivityIndicatorViewは、iOSアプリケーションで使用されるアクティビティインジケータとして知られるUIコンポーネントの一つです。

これは、アプリが何らかの処理を行っているときにユーザーに視覚的なフィードバックを提供するためのもので、通常、スピニングホイールの形で表示されます。

○UIActivityIndicatorViewの基本

UIActivityIndicatorViewは、UIKitフレームワークに含まれるクラスであり、その動作や表示はいくつかのプロパティとメソッドで管理されます。

基本的には、インジケータを表示する場所を指定し、開始と停止の命令を送ることで、ユーザーに対してアプリが忙しいことを知らせることができます。

このコードでは、UIActivityIndicatorViewを作成し、中央に配置する方法を紹介しています。

この例では、インジケータを画面の中央に配置し、アニメーションを開始しています。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let activityIndicator = UIActivityIndicatorView(style: .large)
        activityIndicator.center = view.center
        view.addSubview(activityIndicator)

        activityIndicator.startAnimating()
    }
}

このコードを実行すると、アプリの画面の中央に大きな白いインジケータが表示され、回転を開始します。

○その利点と主な用途

UIActivityIndicatorViewの最大の利点は、ユーザーがアプリ内での処理が進行中であることを簡単に認識できる点です。

これにより、ユーザーはアプリがフリーズしているのではなく、処理が行われていることを理解し、待つことができます。

主な用途としては次のような場面での使用が考えられます。

データのダウンロードやアップロード中
計算や重たい処理が行われている時
ページの遷移や画像の読み込み中

これらの場面でUIActivityIndicatorViewを使用することで、ユーザーにアプリの現在の状況を的確に伝えることができ、ユーザーエクスペリエンスを向上させることが期待できます。

●UIActivityIndicatorViewの使い方

UIActivityIndicatorViewの使い方は直感的であり、初心者でも簡単に取り入れることができます。

しかし、細かなカスタマイズや応用を理解することで、より効果的なUIを構築することが可能となります。

○サンプルコード1：基本的なアクティビティインジケータの表示

最初に、最も基本的なアクティビティインジケータの表示方法を見てみましょう。

このコードでは、インジケータを画面中央に配置し、アニメーションを開始しています。

import UIKit

class BasicViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let activityIndicator = UIActivityIndicatorView(style: .large)
        activityIndicator.center = view.center
        view.addSubview(activityIndicator)

        activityIndicator.startAnimating()
    }
}

このコードを実行することで、アプリ画面の中央にスピニングホイールとしてインジケータが表示され、アニメーションが開始されます。

○サンプルコード2：サイズと色をカスタマイズして表示

次に、インジケータのサイズや色をカスタマイズする方法を見てみましょう。

このコードでは、大きさと色を変更して、独自のデザインのインジケータを作成しています。

import UIKit

class CustomizedViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let activityIndicator = UIActivityIndicatorView(style: .large)
        activityIndicator.color = .red
        activityIndicator.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
        activityIndicator.center = view.center
        view.addSubview(activityIndicator)

        activityIndicator.startAnimating()
    }
}

この例では、色を赤に変更し、インジケータの大きさを1.5倍に拡大しています。

結果として、大きな赤いインジケータが画面中央に表示されます。

○サンプルコード3：ボタンをタップした際にインジケータを表示・非表示

ユーザーが何らかのアクションを取った際、例えばボタンをタップしたときにインジケータを表示し、処理が終わったら非表示にする、という実装は非常に一般的です。

下記のコードでは、ボタンをタップすることでインジケータの表示・非表示を切り替える方法を表しています。

import UIKit

class ButtonControlViewController: UIViewController {

    let activityIndicator = UIActivityIndicatorView(style: .large)

    override func viewDidLoad() {
        super.viewDidLoad()

        activityIndicator.center = view.center
        view.addSubview(activityIndicator)

        let button = UIButton(frame: CGRect(x: (view.bounds.width - 150) / 2, y: view.bounds.height - 100, width: 150, height: 50))
        button.setTitle("Toggle Indicator", for: .normal)
        button.backgroundColor = .blue
        button.addTarget(self, action: #selector(toggleIndicator), for: .touchUpInside)
        view.addSubview(button)
    }

    @objc func toggleIndicator() {
        if activityIndicator.isAnimating {
            activityIndicator.stopAnimating()
        } else {
            activityIndicator.startAnimating()
        }
    }
}

上記のコードを実行すると、画面下部に「Toggle Indicator」というボタンが表示されます。

このボタンをタップすることで、インジケータの表示と非表示を切り替えることができるようになります。

●UIActivityIndicatorViewの応用例

UIActivityIndicatorViewは多岐にわたる場面で利用可能であり、特に長時間の処理や通信待機時にユーザーに対して何らかの処理が行われていることを視覚的に伝えるのに役立ちます。

ここでは、よくある応用例としての利用シーンとその実装方法を紹介します。

○サンプルコード4：テーブルビューのデータ読み込み中に表示

テーブルビューでデータをリモートから読み込む際、データが読み込まれるまでの間にインジケータを表示することが一般的です。

このコードでは、データの読み込み中にインジケータを表示し、読み込み完了時に非表示にする方法を表しています。

import UIKit

class TableViewLoadingViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    let tableView = UITableView()
    let activityIndicator = UIActivityIndicatorView(style: .large)

    var data: [String] = []  // 仮のデータ配列

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.frame = view.bounds
        tableView.delegate = self
        tableView.dataSource = self
        view.addSubview(tableView)

        activityIndicator.center = view.center
        view.addSubview(activityIndicator)

        activityIndicator.startAnimating()
        fetchData()
    }

    func fetchData() {
        // 仮のデータ取得処理（3秒後にデータを追加する）
        DispatchQueue.global().asyncAfter(deadline: .now() + 3.0) {
            self.data = ["Item1", "Item2", "Item3"] // 仮のデータ追加
            DispatchQueue.main.async {
                self.tableView.reloadData()
                self.activityIndicator.stopAnimating()
            }
        }
    }

    // tableViewのデータソースとデリゲート関連の処理は省略
}

上記の実装により、3秒後にデータがテーブルビューに読み込まれるまでの間、インジケータが表示されることになります。

○サンプルコード5：WebViewのページ読み込み中に表示

WebViewを使用してウェブページを表示する際、ページの読み込み中にもインジケータを活用することができます。

下記のコードでは、WebViewでのページ読み込み中にインジケータを表示しています。

import UIKit
import WebKit

class WebViewController: UIViewController, WKNavigationDelegate {

    let webView = WKWebView()
    let activityIndicator = UIActivityIndicatorView(style: .large)

    override func viewDidLoad() {
        super.viewDidLoad()

        webView.frame = view.bounds
        webView.navigationDelegate = self
        view.addSubview(webView)

        activityIndicator.center = view.center
        view.addSubview(activityIndicator)

        if let url = URL(string: "https://example.com") {
            webView.load(URLRequest(url: url))
        }
    }

    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        activityIndicator.startAnimating()
    }

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        activityIndicator.stopAnimating()
    }

    // その他のエラーハンドリングやWebViewのデリゲート関連の処理は省略
}

WebViewでウェブページの読み込みを開始した際にインジケータが表示され、読み込み完了時に非表示になります。

○サンプルコード6：非同期処理の完了待ち時に表示

非同期処理、例えばAPIからのデータ取得など、完了するまでに時間がかかる処理を行う際には、その間ユーザーに待機を知らせるためにインジケータを表示することが考えられます。

下記の例では、非同期処理の完了待ち時にインジケータを表示するシンプルな実装を表しています。

import UIKit

class AsyncProcessingViewController: UIViewController {

    let activityIndicator = UIActivityIndicatorView(style: .large)

    override func viewDidLoad() {
        super.viewDidLoad()

        activityIndicator.center = view.center
        view.addSubview(activityIndicator)

        activityIndicator.startAnimating()
        asyncProcessing()
    }

    func asyncProcessing() {
        DispatchQueue.global().async {
            // 仮の重たい処理（5秒待機）
            sleep(5)

            DispatchQueue.main.async {
                self.activityIndicator.stopAnimating()
            }
        }
    }
}

この実装により、5秒間の仮の非同期処理が完了するまでインジケータが画面上に表示されることとなります。

●注意点と対処法

SwiftにおけるUIActivityIndicatorViewの使用にあたり、適切な実装とユーザーエクスペリエンスの向上のためにはいくつかの注意点とその対処法を把握しておくことが必要です。

ここでは、過度な使用に関する注意と、表示されない場合のトラブルシューティングに焦点を当て、具体的なサンプルコードと共に解説します。

○過度な使用に関する注意

UIActivityIndicatorViewは非常に便利ですが、その使用には節度が必要です。

過度に多用すると、アプリケーションのパフォーマンスに影響を与え、ユーザーエクスペリエンスを低下させる可能性があります。

下記のサンプルコードは、過度な使用によるパフォーマンスの低下を模倣する例です。

import UIKit

class OveruseIndicatorViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        for _ in 0..<100 {
            let activityIndicator = UIActivityIndicatorView(style: .large)
            activityIndicator.center = view.center
            activityIndicator.startAnimating()
            view.addSubview(activityIndicator)
        }
    }
}

このコードでは、同一の位置に100個のアクティビティインジケータを重ねて表示しています。

このような過度な使用は、アプリケーションのレンダリング性能に負荷をかけ、スムーズなアニメーションが得られなくなる可能性が高まります。

対処法として、必要最小限のインジケータの使用を心掛け、インジケータの表示はユーザーにとって必要かつ適切なタイミングと場所で行うようにしましょう。

○表示されない場合のトラブルシューティング

時としてUIActivityIndicatorViewが期待通りに表示されない場合があります。

これは、主にレイアウトやビューの階層、スレッド管理に起因する問題です。

下記のコードは、メインスレッドでの操作を怠った例です。

import UIKit

class TroubleshootIndicatorViewController: UIViewController {

    let activityIndicator = UIActivityIndicatorView(style: .large)

    override func viewDidLoad() {
        super.viewDidLoad()

        activityIndicator.center = view.center
        view.addSubview(activityIndicator)

        DispatchQueue.global().async {
            self.activityIndicator.startAnimating()
        }
    }
}

このコード例では、グローバルスレッド（バックグラウンドスレッド）でインジケータのアニメーションを開始しています。

UIの操作はメインスレッドで行う必要があるため、このコードはインジケータが表示されない問題を引き起こします。

解決策は、UIの操作をメインスレッドで行うことです。

下記の修正コードで、インジケータのアニメーション開始をメインスレッドで行っています。

DispatchQueue.main.async {
    self.activityIndicator.startAnimating()
}

これにより、期待通りインジケータが画面中央でアニメーションを開始し、ユーザーに処理中であることが視覚的に伝わります。

●カスタマイズ方法

UIActivityIndicatorViewは、そのデザインや動きに関するカスタマイズが可能です。

デフォルトの状態でも非常に使いやすいですが、アプリケーションのデザインやブランドカラーに合わせてカスタマイズすることで、より一貫性のあるUIを実現することができます。

○サンプルコード7：独自のデザインでカスタマイズする方法

このコードでは、UIActivityIndicatorViewの色とサイズを変更し、独自のデザインを持つアクティビティインジケータを作成する方法を紹介しています。

この例では、赤色の大きなアクティビティインジケータを画面中央に表示しています。

import UIKit

class CustomIndicatorViewController: UIViewController {

    let customActivityIndicator = UIActivityIndicatorView(style: .large)

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // インジケータの色を赤色に設定
        customActivityIndicator.color = .red

        // インジケータのサイズをカスタマイズ
        customActivityIndicator.frame = CGRect(x: 0, y: 0, width: 80, height: 80)

        // インジケータを画面中央に配置
        customActivityIndicator.center = view.center

        // インジケータをビューに追加
        view.addSubview(customActivityIndicator)

        // インジケータのアニメーションを開始
        customActivityIndicator.startAnimating()
    }
}

このコードを実行すると、画面中央に赤色の大きなアクティビティインジケータがアニメーション表示されます。

色やサイズの変更は、colorプロパティとframeプロパティを使用して調整することができます。

さらに、UIActivityIndicatorViewには他にも様々なカスタマイズオプションがあります。

例えば、hidesWhenStoppedプロパティを使用すると、インジケータのアニメーションが停止したときに自動的に非表示にすることができます。