読み込み中...

Swiftで学ぶ！プログレスバーの完璧な実装方法10選

Swiftのロゴとプログレスバーのイラストが並んでいる画像 Swift
2023.10.31
この記事は約32分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

プログレスバーは、アプリケーションの使用中にタスクの進行状況をユーザーに示す非常に重要なUI要素となっています。

特に、時間がかかるタスクや、ユーザーが待機している間の進行状況を視覚的に表す際には欠かせない存在です。

この記事では、Swiftを用いてプログレスバーを実装する方法を10のサンプルコードを交えて徹底的に解説します。

初心者から中級者まで、プログレスバーの使い方、応用例、カスタマイズ方法、注意点まで、詳細にわたって紹介していきます。

SwiftはAppleが開発したプログラミング言語で、iOS、macOS、watchOS、tvOSなどのアプリケーション開発に使用されています。

Swiftの特徴や背景、そしてプログレスバーの基本的な概念とその実装方法について学んでいきましょう。

●Swiftとは

Swiftは、Appleが2014年に公開した比較的新しいプログラミング言語です。

Objective-Cの後継言語として位置付けられており、シンタックスがシンプルで読みやすいこと、安全性、高速性などが特徴として挙げられます。

また、Swiftはオープンソースとして提供されているため、開発者コミュニティからのフィードバックを受け入れながら、積極的に進化しています。

○Swiftの基本的な特徴

Swiftが多くの開発者に支持されている理由は、次の特徴に起因しています。

  • 安全性：Swiftは、安全性を第一に考慮した設計がされています。例えば、null参照のエラーを防ぐためのオプショナル型、変数の型推論などがサポートされています。
  • 高速性：LLVMコンパイラを基盤としており、高度な最適化が行われることで、実行速度が高速化されています。
  • インタラクティブなPlaygrounds：SwiftのPlaygroundsは、コードを即座に評価して結果を確認できるインタラクティブな環境を提供しており、学習や試行錯誤に非常に適しています。
  • 互換性：Swiftは、Objective-Cとの相互運用性が確保されているため、既存のObjective-Cのコードと組み合わせて利用することができます。

○Swiftの歴史と背景

Swiftの歴史を探ると、その背後にはAppleのアプリケーション開発のビジョンが見えてきます。

Objective-CがAppleの開発環境において長年主流であったものの、新しい技術や要求に対応するためには、よりシンプルで高速な言語が求められました。

そこで、Appleは2010年頃からSwiftの開発を始め、2014年のWWDCで初めて公開されました。

以降、Swiftは急速に普及し、多くの開発者に支持されるようになりました。

オープンソースとしての公開や、Linuxへの対応なども行われ、より多くのプラットフォームでの使用が可能となっています。

現在では、Appleのプラットフォームだけでなく、サーバーサイドの開発やクロスプラットフォームのアプリケーション開発にも利用されるようになっています。

●プログレスバーの概念

プログレスバーは、多くの人々に親しみのあるユーザーインターフェースの一部です。

何らかのタスクやプロセスの進行状況を視覚的に示すために使用されます。

ここでは、プログレスバーの基本的な概念とその重要性について詳しく解説します。

○プログレスバーとは？

プログレスバーは、コンピュータやモバイルデバイス上での処理の進行状況をユーザーに表示するためのツールです。

これは一般的に水平または垂直のバーの形をしており、処理が進行するにつれてその長さが増えるか、または色が変わることで、進行状況を表現します。

たとえば、ファイルのダウンロードやアップロード、ソフトウェアのインストール、動画のバッファリングなどの長い処理の際に、進行状況をリアルタイムで表示するために使用されます。

○なぜプログレスバーが必要か

プログレスバーの主な役割は、ユーザーにタスクの進行状況を知らせることです。

これにはいくつかの理由があります。

  1. ユーザーの不安を軽減する：特に長時間にわたる処理の場合、何もフィードバックがないとユーザーは不安や焦燥感を感じることがあります。プログレスバーは、進行状況を確認できることで、その不安を軽減します。
  2. 待機時間の予測を可能にする：プログレスバーが表示されていれば、ユーザーは残りの処理時間のおおよその見積もりを得ることができます。これにより、他の作業をするか、待つかの判断がしやすくなります。
  3. アプリケーションの信頼性を高める：プログレスバーが適切に機能していれば、ユーザーはアプリケーションが正常に動作していると感じ、信頼感を持ちやすくなります。

以上のように、プログレスバーはユーザー体験を向上させるための非常に有効なツールです。

特に長い処理時間が伴うアプリケーションやサービスでは、プログレスバーの適切な実装が求められます。

●Swiftにおけるプログレスバーの実装方法

Swiftでのプログレスバーの実装は、ユーザーエクスペリエンスの一部として非常に重要です。

アプリケーションのロード時間や処理の進行状況を視覚的に表すことで、ユーザーの待ち時間のストレスを和らげ、アプリの使いやすさを向上させることができます。

ここでは、Swiftを使用してプログレスバーを実装する方法を2つのサンプルコードを交えて詳しく解説します。

○サンプルコード1：基本的なプログレスバーの表示

このコードでは、UIProgressViewクラスを使って、基本的なプログレスバーを表示しています。

この例では、シンプルなプログレスバーを画面上に配置して、その進捗を0.5（50%）に設定しています。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // プログレスバーのインスタンスを作成
        let progressBar = UIProgressView(progressViewStyle: .default)

        // プログレスバーの位置とサイズを設定
        progressBar.frame = CGRect(x: 20, y: 100, width: 280, height: 20)

        // プログレスバーの進捗を設定
        progressBar.setProgress(0.5, animated: true)

        // プログレスバーをビューに追加
        view.addSubview(progressBar)
    }
}

上記のコードを実行すると、アプリの画面上部に進捗が50%のプログレスバーが表示されます。

setProgressメソッドの第一引数に進捗の値（0.0から1.0まで）を設定することで、プログレスバーの進捗状況を変更することができます。

○サンプルコード2：プログレスバーの色のカスタマイズ

このコードでは、tintColorプロパティとprogressTintColorプロパティを使って、プログレスバーの色をカスタマイズしています。

この例では、プログレスバーの進捗部分を緑色に、背景部分を灰色に設定しています。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // プログレスバーのインスタンスを作成
        let progressBar = UIProgressView(progressViewStyle: .default)

        // プログレスバーの位置とサイズを設定
        progressBar.frame = CGRect(x: 20, y: 100, width: 280, height: 20)

        // プログレスバーの進捗を設定
        progressBar.setProgress(0.5, animated: true)

        // プログレスバーの色をカスタマイズ
        progressBar.tintColor = UIColor.gray  // 背景色
        progressBar.progressTintColor = UIColor.green  // 進捗色

        // プログレスバーをビューに追加
        view.addSubview(progressBar)
    }
}

上記のコードを実行すると、進捗部分が緑色、背景部分が灰色のプログレスバーが表示されます。

色のカスタマイズは、アプリのデザインやブランドカラーに合わせて行うことで、アプリ全体の統一感を出すことができます。

○サンプルコード3：プログレスバーの速度と動きのカスタマイズ

プログレスバーは、その動きや速度をカスタマイズすることで、ユーザーにさまざまな情報や状況を伝えることができます。

ここでは、Swiftでのプログレスバーの速度と動きのカスタマイズ方法について詳しく説明します。

□速度のカスタマイズ

プログレスバーの速度を調整することで、処理の進行度や残り時間をリアルタイムでユーザーに伝えることができます。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var progressBar: UIProgressView!

    override func viewDidLoad() {
        super.viewDidLoad()
        progressBar.progress = 0.0
    }

    @IBAction func startProgress(_ sender: Any) {
        Timer.scheduledTimer(withTimeInterval: 0.5, repeats: true) { (timer) in
            if self.progressBar.progress >= 1.0 {
                timer.invalidate()
            } else {
                self.progressBar.progress += 0.1
            }
        }
    }
}

このコードではTimer.scheduledTimerを使って0.5秒ごとにプログレスバーの進行度を10%ずつ増やしています。

ここでのwithTimeInterval: 0.5の部分を変更することで、更新の間隔を調整することができます。

□動きのカスタマイズ

プログレスバーの動きをスムーズにしたり、特定のタイミングでアニメーションを加えることも可能です。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var progressBar: UIProgressView!

    override func viewDidLoad() {
        super.viewDidLoad()
        progressBar.progress = 0.0
        progressBar.setProgress(0.0, animated: false)
    }

    @IBAction func startSmoothProgress(_ sender: Any) {
        UIView.animate(withDuration: 2.0) {
            self.progressBar.setProgress(1.0, animated: true)
        }
    }
}

ここでは、UIView.animateを使用して、2秒かけてプログレスバーを100%までアニメーションしながら進めています。

withDuration: 2.0の部分を変更することで、アニメーションの時間を調整できます。

○サンプルコード4：プログレスバーの形やスタイルの変更

プログレスバーの形やスタイルを変更することで、デザインやテーマに合わせたカスタマイズが可能です。

ここでは、プログレスバーの形を丸くするサンプルコードを紹介します。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var progressBar: UIProgressView!

    override func viewDidLoad() {
        super.viewDidLoad()
        progressBar.progress = 0.0
        progressBar.layer.cornerRadius = 10
        progressBar.clipsToBounds = true
    }
}

この例では、プログレスバーの両端をcornerRadiusを使って丸くしています。

このようにして、プログレスバーのデザインをアプリのテーマやブランドに合わせて調整することができます。

●プログレスバーの応用例

プログレスバーはその名の通り、進行状況をユーザーに視覚的に伝えるためのUI要素です。

ただし、基本的な使用法だけでなく、応用的な利用も可能です。

ここでは、Swiftでのプログレスバーの応用例をいくつか紹介します。

○サンプルコード5：プログレスバーとテキストの組み合わせ

このコードでは、プログレスバーとテキストを組み合わせる方法を表しています。

具体的には、進行状況を数字で表示しつつ、プログレスバーでもその進行状況を可視化します。

import UIKit

class ViewController: UIViewController {
    var progressBar: UIProgressView!
    var progressLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

        // プログレスバーの初期設定
        progressBar = UIProgressView(progressViewStyle: .default)
        progressBar.center = self.view.center
        progressBar.setProgress(0.0, animated: true)
        self.view.addSubview(progressBar)

        // 進行状況を表示するラベルの初期設定
        progressLabel = UILabel(frame: CGRect(x: progressBar.frame.origin.x, y: progressBar.frame.origin.y - 30, width: 200, height: 30))
        progressLabel.textAlignment = .center
        progressLabel.text = "0%"
        self.view.addSubview(progressLabel)
    }

    @objc func updateProgress() {
        let currentProgress = progressBar.progress
        if currentProgress < 1.0 {
            let newProgress = currentProgress + 0.1
            progressBar.setProgress(newProgress, animated: true)
            progressLabel.text = "\(Int(newProgress * 100))%"
        }
    }
}

上記のコードを実行すると、中央にプログレスバーとその上に進行状況を表示するラベルが配置されます。

updateProgress関数を呼び出すたびに、プログレスバーの進捗が10%ずつ増加し、それに伴いラベルの表示も更新されます。

○サンプルコード6：アニメーションを伴うプログレスバー

このコードでは、アニメーションを伴うプログレスバーの実装方法を紹介しています。

プログレスバーの進捗が変わる際にスムーズにアニメーションすることで、ユーザーにより自然な動きを感じさせることができます。

import UIKit

class AnimatedProgressViewController: UIViewController {
    var progressBar: UIProgressView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // プログレスバーの初期設定
        progressBar = UIProgressView(progressViewStyle: .default)
        progressBar.center = self.view.center
        progressBar.setProgress(0.0, animated: false)
        self.view.addSubview(progressBar)
    }

    @objc func animateProgress() {
        UIView.animate(withDuration: 1.0) {
            self.progressBar.setProgress(1.0, animated: true)
        }
    }
}

この例では、animateProgress関数を呼び出すことで、プログレスバーが1秒かけて100%まで進行するアニメーションが実行されます。

○サンプルコード7：複数のプログレスバーの連動表示

プログレスバーは、一つのタスクや処理の進捗を表示するためのものとして一般的に使われています。

しかし、複数のタスクやプロセスが同時に進行している場合、それぞれの進捗を一目で確認したいという場面も考えられます。

ここでは、Swiftで複数のプログレスバーを連動させて表示する方法について説明します。

このコードでは、UIProgressViewクラスを使って、2つのプログレスバーを同時に操作して連動させるコードを表しています。

この例では、1つ目のプログレスバーの進捗が変わると、2つ目のプログレスバーもそれに応じて変わるようにしています。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var progressBar1: UIProgressView!
    @IBOutlet weak var progressBar2: UIProgressView!

    override func viewDidLoad() {
        super.viewDidLoad()
        progressBar1.setProgress(0.0, animated: false)
        progressBar2.setProgress(0.0, animated: false)
    }

    @IBAction func increaseProgress(_ sender: UIButton) {
        let newProgress = progressBar1.progress + 0.1
        if newProgress <= 1.0 {
            progressBar1.setProgress(newProgress, animated: true)
            progressBar2.setProgress(newProgress, animated: true)
        }
    }
}

このコードでは、初めに2つのプログレスバーの進捗を0.0（0%）に設定しています。

その後、ボタンが押されるたびに、進捗が10%ずつ増加するように設定しています。

1つ目のプログレスバーの進捗が増加すると、2つ目のプログレスバーも同時に進捗が増加するようになっています。

実際にこのコードを実行すると、2つのプログレスバーが画面上に表示されます。

そして、ボタンを押すたびに、2つのプログレスバーの進捗が同時に増加する様子を確認することができます。

○サンプルコード8：タッチ操作でプログレスバーの進捗を変更

プログレスバーはアプリの進捗やローディング状況を視覚的に伝えるものですが、場合によってはユーザー自身がプログレスバーの進捗を直接変更したいケースも考えられます。

特に、教育用のアプリやデモアプリで、プログレスバーの動きをユーザーが手動でコントロールしたいときに役立ちます。

ここでは、ユーザーがスクリーンをタッチして、その位置に応じてプログレスバーの進捗を変更する方法をSwiftで実装します。

import UIKit

class ViewController: UIViewController {

    let progressBar = UIProgressView(progressViewStyle: .default)

    override func viewDidLoad() {
        super.viewDidLoad()
        progressBar.frame = CGRect(x: 20, y: 100, width: 280, height: 20)
        self.view.addSubview(progressBar)
    }

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        if let touch = touches.first {
            let position = touch.location(in: self.view)
            let progress = position.x / self.view.bounds.width
            progressBar.setProgress(Float(progress), animated: true)
        }
    }
}

このコードでは、touchesMovedメソッドを使ってタッチ操作を検知しています。

タッチされた位置に応じて、プログレスバーの進捗を変更しています。

この例では、スクリーンの左端は0%、右端は100%として、タッチされた位置に合わせてプログレスバーの値を変更しています。

タッチ操作を感知することで、ユーザーの指が動いた位置に応じてプログレスバーの進捗が動くのが見て取れます。

○サンプルコード9：外部データのロード状況をプログレスバーで表示

多くのアプリでは、外部のデータをロードする場面があります。

例えば、ネットワーク経由でのデータ取得や、大きなファイルのダウンロードなどです。

これらの状況では、ユーザーにロードの進捗状況を伝えるためにプログレスバーを表示することが一般的です。

ここでは、外部データのロード状況をプログレスバーで表示する方法をSwiftで実装します。

import UIKit

class ViewController: UIViewController, URLSessionDownloadDelegate {

    let progressBar = UIProgressView(progressViewStyle: .default)

    override func viewDidLoad() {
        super.viewDidLoad()
        progressBar.frame = CGRect(x: 20, y: 100, width: 280, height: 20)
        self.view.addSubview(progressBar)

        let url = URL(string: "https://example.com/largefile.zip")!
        let session = URLSession(configuration: .default, delegate: self, delegateQueue: nil)
        let downloadTask = session.downloadTask(with: url)
        downloadTask.resume()
    }

    func urlSession(_ session: URLSession, downloadTask: URLSessionDownloadTask, didWriteData bytesWritten: Int64, totalBytesWritten: Int64, totalBytesExpectedToWrite: Int64) {
        let progress = Float(totalBytesWritten) / Float(totalBytesExpectedToWrite)
        DispatchQueue.main.async {
            self.progressBar.setProgress(progress, animated: true)
        }
    }
}

このコードでは、URLSessionDownloadDelegateプロトコルを実装して、ダウンロードの進捗を取得しています。

ダウンロードの進捗に合わせて、プログレスバーの進捗も更新しています。

ダウンロードの進行とともに、プログレスバーが徐々に進む様子を観察できます。

このようにユーザーに進捗状況を伝えることで、待機時間のストレスを軽減することができます。

○サンプルコード10：カスタムビューを用いたプログレスバーの実装

標準的なプログレスバーも便利ですが、アプリのデザインやブランドに合わせて、オリジナルのプログレスバーを実装したい場合もあるでしょう。

ここでは、Swiftとカスタムビューを用いて、独自のデザインのプログレスバーを実装する方法を紹介します。

import UIKit

class CustomProgressBar: UIView {
    var progress: CGFloat = 0.0 {
        didSet {
            setNeedsDisplay()
        }
    }

    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        context?.setFillColor(UIColor.gray.cgColor)
        context?.fill(rect)

        let progressRect = CGRect(x: 0, y: 0, width: rect.width * progress, height: rect.height)
        context?.setFillColor(UIColor.green.cgColor)
        context?.fill(progressRect)
    }
}

class ViewController: UIViewController {

    let customProgressBar = CustomProgressBar()

    override func viewDidLoad() {
        super.viewDidLoad()
        customProgressBar.frame = CGRect(x: 20, y: 100, width: 280, height: 20)
        self.view.addSubview(customProgressBar)

        // プログレスバーの進捗を変更（テスト用）
        DispatchQueue.global().asyncAfter(deadline: .now() + 2) {
            DispatchQueue.main.async {
                self.customProgressBar.progress = 0.5
            }
        }
    }
}

CustomProgressBarクラスでは、カスタムの描画を行っています。

progressプロパティが変更されると、プログレスバーが再描画されます。

draw(_:)メソッドをオーバーライドして、進捗に応じた描画を実行しています。

このようにカスタムビューを使用することで、デザインや動きを自由にカスタマイズしたプログレスバーを実装することができます。

●プログレスバー実装時の注意点と対処法

プログレスバーをSwiftで実装する際には、さまざまな点に注意する必要があります。

特にパフォーマンスの最適化や頻繁な更新を避ける方法、さらにはユーザー体験を損なわない設計方針をしっかり理解し、実践することが重要です。

○パフォーマンスの最適化とは？

パフォーマンスの最適化とは、アプリケーションの動作をスムーズにし、応答時間を最小限に抑えることを指します。

プログレスバーの実装においても、不要な再描画や計算を避けることで、アプリ全体のパフォーマンスを向上させることができます。

このコードでは、Swiftで基本的なプログレスバーの更新を表しています。

この例では、0.5秒ごとにプログレスバーの進捗を更新しています。

// プログレスバーの初期化
let progressBar = UIProgressView(progressViewStyle: .default)
progressBar.progress = 0.0

// 0.5秒ごとにプログレスバーを更新
Timer.scheduledTimer(withTimeInterval: 0.5, repeats: true) { (timer) in
    if progressBar.progress < 1.0 {
        progressBar.progress += 0.1
    } else {
        timer.invalidate()
    }
}

このようなコードでは、0.5秒ごとの更新が頻繁であるため、パフォーマンスに影響を及ぼす可能性があります。

特に多くのビュー要素やデータ処理が同時に行われる場合、アプリの動作が遅くなるリスクがあります。

○頻繁な更新を避ける方法

頻繁な更新はパフォーマンスの低下を引き起こす主な要因の一つです。

プログレスバーの更新頻度を適切に設定することで、この問題を緩和することができます。

例えば、次の方法で更新頻度を制御することが考えられます。

  1. データのロードや処理の進捗を取得し、必要な場合のみプログレスバーを更新する。
  2. 更新間隔を長くする。例えば、1秒以上の間隔を持たせることで、不要な再描画を減少させる。

下記のコードでは、1秒ごとにプログレスバーを更新する例を表しています。

// プログレスバーの初期化
let progressBar = UIProgressView(progressViewStyle: .default)
progressBar.progress = 0.0

// 1秒ごとにプログレスバーを更新
Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { (timer) in
    if progressBar.progress < 1.0 {
        progressBar.progress += 0.1
    } else {
        timer.invalidate()
    }
}

この例では、プログレスバーの更新頻度が前の例と比べて半分になっています。

これにより、不要な再描画が減少し、アプリのパフォーマンスが向上する可能性が高まります。

○ユーザー体験を損なわないための設計方針

プログレスバーは、アプリの進捗状況をユーザーに伝えるための重要なツールです。したがって、ユーザーの期待に応える動きやデザインが求められます。

ここでは、ユーザー体験を損なわないための設計方針の一例です。

  1. 明瞭性：プログレスバーは、進捗状況が明確に分かるようにデザインする必要があります。
  2. 反応性：ユーザーの操作やアプリの進捗に応じて、プログレスバーが迅速に反応することが期待されます。
  3. 適切な速度：進捗が早すぎたり、遅すぎたりすると、ユーザーは混乱する可能性があります。プログレスバーの進行速度は、アプリの処理速度やユーザーの操作速度に合わせて調整することが求められます。

●プログレスバーのカスタマイズ方法

プログレスバーのカスタマイズには、Swiftでの開発環境においても様々な方法が存在します。

ここでは、カラーとスタイルの変更、アニメーションやトランジションの利用、そしてインタラクティブな要素の追加方法について詳しく学びましょう。

○カラーとスタイルの変更方法

プログレスバーの色やスタイルは、視覚的にユーザーに伝える情報として非常に重要です。

たとえば、危険な操作の進捗や警告を意味する場合、赤色のプログレスバーを使用するといった具体的なカスタマイズが考えられます。

このコードではUIProgressViewを使ってプログレスバーを作成し、その色とスタイルをカスタマイズするコードを表しています。

この例ではprogressTintColorとtrackTintColorを使用して、それぞれ進捗部分と背景部分の色を指定しています。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // プログレスバーのインスタンスを作成
        let progressBar = UIProgressView(progressViewStyle: .default)

        // プログレスバーの位置とサイズを指定
        progressBar.frame = CGRect(x: 50, y: 100, width: 200, height: 50)

        // 進捗部分の色を指定
        progressBar.progressTintColor = UIColor.red

        // 背景部分の色を指定
        progressBar.trackTintColor = UIColor.lightGray

        // プログレスバーの進捗を50%に設定
        progressBar.setProgress(0.5, animated: true)

        // プログレスバーをビューに追加
        self.view.addSubview(progressBar)
    }
}

上記のコードを実行すると、画面上部に位置する赤色のプログレスバーが表示されます。

背景部分は薄い灰色になっており、進捗は50%の位置に設定されています。

○アニメーションやトランジションの応用

アニメーションやトランジションを使うことで、プログレスバーの動きに動的な要素を追加することができます。

これにより、ユーザーへのフィードバックが向上し、より直感的に進捗を理解することができます。

下記のコードは、UIView.animateを使用してプログレスバーの進捗をアニメーション付きで変更するものです。

この例では、2秒かけて進捗を0%から100%まで変更しています。

import UIKit

class ViewController: UIViewController {

    let progressBar = UIProgressView(progressViewStyle: .default)

    override func viewDidLoad() {
        super.viewDidLoad()

        progressBar.frame = CGRect(x: 50, y: 100, width: 200, height: 50)
        progressBar.progressTintColor = UIColor.blue
        progressBar.trackTintColor = UIColor.lightGray
        self.view.addSubview(progressBar)

        // ボタンを追加して、そのクリックでアニメーションを開始
        let button = UIButton(frame: CGRect(x: 100, y: 200, width: 100, height: 50))
        button.setTitle("開始", for: .normal)
        button.addTarget(self, action: #selector(animateProgress), for: .touchUpInside)
        self.view.addSubview(button)
    }

    @objc func animateProgress() {
        UIView.animate(withDuration: 2.0) {
            self.progressBar.setProgress(1.0, animated: true)
        }
    }
}

このコードを実行すると、”開始”というボタンが表示されます。

このボタンをクリックすると、プログレスバーの進捗がアニメーション付きで変更され、2秒かけて0%から100%まで移動します。

○インタラクティブな要素の追加方法

プログレスバーには、ユーザーの操作に応じて進捗を変更するようなインタラクティブな要素を追加することも可能です。

これにより、より対話的なアプリケーションの実装が可能となります。

下記のコードは、スライダーの値を変更することで、プログレスバーの進捗を変更するものです。

この例では、スライダーとプログレスバーが連動して動作するようにしています。

import UIKit

class ViewController: UIViewController {

    let progressBar = UIProgressView(progressViewStyle: .default)
    let slider = UISlider()

    override func viewDidLoad() {
        super.viewDidLoad()

        progressBar.frame = CGRect(x: 50, y: 100, width: 200, height: 50)
        progressBar.progressTintColor = UIColor.green
        progressBar.trackTintColor = UIColor.lightGray
        self.view.addSubview(progressBar)

        slider.frame = CGRect(x: 50, y: 200, width: 200, height: 50)
        slider.addTarget(self, action: #selector(sliderChanged), for: .valueChanged)
        self.view.addSubview(slider)
    }

    @objc func sliderChanged() {
        progressBar.setProgress(slider.value, animated: true)
    }
}

このコードを実行すると、スライダーとプログレスバーが表示されます。

スライダーの値を変更することで、プログレスバーの進捗も同時に変わります。

まとめ

この記事では、Swiftを用いてプログレスバーを実装する方法や、そのカスタマイズ手法について詳しく解説しました。

プログレスバーはユーザー体験を向上させるための重要な要素であり、その表示や動きを適切にカスタマイズすることで、アプリケーションの品質やユーザビリティを向上させることができます。

初心者から中級者までの方を対象に、基本的な実装方法から応用的な実装、さらにはカスタマイズの方法までを紹介しました。

サンプルコードを交えての解説を通じて、プログレスバーの実装やその応用がいかに幅広く、かつ柔軟であるかを理解していただけたかと思います。

Swiftでのプログレスバー実装においても、基本的なコンセプトや理念は変わらないことをご理解いただけたと思います。

しかし、Swiftの機能を最大限に活かすことで、より高度なプログレスバーの実装やカスタマイズが可能となります。

この記事を参考に、Swiftでのプログレスバー実装に挑戦し、アプリケーションの品質向上を目指してください。