【2024年4月】弊社では、基本リモートワークで一緒に成長してくださるメンバーを広く募集させていただいております。 詳細はこちら

【Swift】インジケーターの表示方法からローディング時のアニメーションの操作、スタイルの設定方法まで詳しく解説!

【Swift】インジケーターの表示方法からローディング時のアニメーションの操作、スタイルの設定方法まで詳しく解説!
ふくしま

こんにちは!株式会社メモリアインクのふくしまです!
この記事では、iOSアプリ開発におけるインジケーターの実装について、その表示方法からアニメーションの操作、スタイルの設定方法まで、サンプルコードを示しながら解説します。

この記事を読んで分かること…
・インジケーターの基本的な表示方法
・アニメーションの開始と停止の制御方法
・インジケーターのスタイルと色のカスタマイズ

開発環境
Swift 5.9
Xcode 15.2

目次

インジケーターの表示

インジケーターの表示は、ユーザーに対してアプリケーションが現在作業を行っていることを視覚的に示す重要な機能です。ここでは、UIActivityIndicatorViewを使った基本的な表示方法を紹介します。

サンプルコード

import UIKit

class ViewController: UIViewController {

    var activityIndicator: UIActivityIndicatorView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupActivityIndicator()
    }

    func setupActivityIndicator() {
        // インジケーターを初期化し、ビューの中心に配置
        activityIndicator = UIActivityIndicatorView(style: .large)
        activityIndicator.center = view.center
        view.addSubview(activityIndicator)
    }
}

サンプルコードの説明

5行目: UIActivityIndicatorViewのインスタンスを宣言します。
12-17行目: setupActivityIndicatorメソッド内でインジケーターを初期化し、アプリのビューの中心に配置し、ViewDidLoad 内でこのメソッドを使用します。

ふくしま

ここまででインジケータを表示するための前準備ですは完了しました。
ここから実際にインジケータを表示する処理を書いていきましょう。

アニメーションの操作

ここから、実際にインジケータを表示し、アニメーションをつける方法について、”ボタンを押してインジケーターを表示して、3秒後に処理を終了して非表示にする実装”を例に学びましょう!

前提

処理を開始するためのボタンを配置し、ViewControllerに紐づけておきましょう

【Swift】インジケーターの表示方法からローディング時のアニメーションの操作、スタイルの設定方法まで詳しく解説!

サンプルコード

import UIKit

class ViewController: UIViewController {

    var activityIndicator: UIActivityIndicatorView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupActivityIndicator()
    }

    func setupActivityIndicator() {
        // インジケーターを初期化し、ビューの中心に配置
        activityIndicator = UIActivityIndicatorView(style: .large)
        activityIndicator.center = view.center
        view.addSubview(activityIndicator)
    }
    
    @IBAction func goIndicator(_ sender: Any) {
        // インジケーターのスタート
        startIndicator()
    }
    
    func startIndicator() {
        DispatchQueue.main.async {
            // インジケーターを表示し、アニメーションを開始
            self.activityIndicator.isHidden = false
            self.activityIndicator.startAnimating()
            
            // 3秒後に処理を完了し、インジケーターを停止して非表示にする
            DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                self.stopIndicator()
            }
        }
    }

    func stopIndicator() {
        // インジケーターのアニメーションを停止し、非表示にする
        activityIndicator.stopAnimating()
        activityIndicator.isHidden = true
    }
}

サンプルコードの説明

24-35行目:処理を開始するボタンをタップした時の処理startIndicator メソッド
27行目: インスタンス化したUIActivityIndicatorView のプロパティisHidden をfalseにしてインジゲーターを表示
28行目: startAnimating メソッドでインジゲーターのアニメーションを開始
37-41行目:3秒後の処理stopIndicator メソッド
39行目:stopAnimating メソッドでインジケーターのアニメーションを止める
40行目:インスタンス化したUIActivityIndicatorView のプロパティisHidden をfalseにしてインジゲーターを非表示
・ アニメーションを開始します。そして、DispatchQueue.main.asyncAfterを使用して、3秒後にstopIndicatorメソッドを呼び出します。

UIActivityIndicatorViewhidesWhenStopped がデフォルトでtrueになっていることで、実際はアニメーション開始startIndicator 、アニメーション終了stopAnimating のみでインジケーターの表示・非表示も同時に操作できます。(isHidden の設定は不要)
この挙動は、インジケーターがアニメーションをしていない時には不要であるという一般的なケースを想定しています。そのため、多くの開発者が明示的にisHiddenを操作する必要を省略できるようになっています。

動作確認

ふくしま

それでは動作を確認してみましょう!

【Swift】インジケーターの表示方法からローディング時のアニメーションの操作、スタイルの設定方法まで詳しく解説!

スタイルの設定

UIActivityIndicatorViewのスタイルと色を変更することで、アプリケーションのデザインに合わせたカスタマイズが可能です。

サンプルコード

func customizeActivityIndicator() {
    activityIndicator.style = .large
    activityIndicator.color = .blue
}

サンプルコードの説明

2行目: style プロパティでインジケーターのスタイル設定します。
スタイルの種類は以下です。
.medium:中サイズのインジケーターで、コンテンツやツールバー内での使用に適しています。
.large:大サイズのインジケーターで、画面全体や大きなローディング画面での使用に適しています。
3行目: color プロパティでインジケーターの色を青に変更します。

まとめ

いかがでしたか?この記事ではインジケーターの表示方法、アニメーションの操作、スタイルの設定方法について詳しく解説しました。これらの知識を活用することで、ユーザーに対してより良いフィードバックを提供し、プロフェッショナルなiOSアプリを開発することができます。
この記事が皆様の開発ライフの一助になれれば幸いです!

ふくしま

この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次