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

【Swift】プログレスバーのアニメーションやスタイルを設定してタスクの進捗度を可視化する方法を解説!

【Swift】プログレスバーのアニメーションやスタイルを設定してタスクの進捗度を可視化する方法を解説!
ふくしま

こんにちは!株式会社メモリアインクのふくしまです!

記事では、プログレスバーを表示し、そのアニメーションやスタイルをカスタマイズして、アプリ内のタスク進捗度を効果的にユーザーに伝える方法について、具体的なサンプルコードを交えて詳しく解説します。

この記事を読んで分かること…
・プログレスバーの基本的な表示方法
・プログレスバーのアニメーションの実装方法
・プログレスバーのスタイル設定方法

目次

プログレスバーの表示

概要

2つの画面を用意して、画面遷移をするごとに進捗度を更新する実装を例にサンプルコードを示しながら解説します。

前提

・最初の画面でNavigationControllerが設定されていること(最初の画面を選択してEditor→Embed In→Navigation Controller)
・2つの画面を用意して、各画面のViewControllerが用意されていること(ViewController, NextViewController)
・各画面に遷移するためのボタンを配置していること
・画面遷移の基礎知識があること

【Swift】プログレスバーのアニメーションやスタイルを設定してタスクの進捗度を可視化する方法を解説!

画面の準備、画面遷移については以下の記事で解説していますので、方法が分からない方は併せてご覧ください!

サンプルコード

ステップ1:ベースとなるViewControllerを設定(ViewController)

import UIKit

class ViewController: UIViewController {

    var progressView: UIProgressView!
    var progress: Float = 0.0

    override func viewDidLoad() {
        super.viewDidLoad()
        setupProgressView()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        self.progressView.setProgress(0.0, animated: true)
    }

    @IBAction func goToNextScreen(_ sender: Any) {
        let nextVC = self.storyboard?.instantiateViewController(withIdentifier: "NextVC") as! NextViewController
        progress = 1.00
        progressView.setProgress(progress, animated: true)
        nextVC.progress = self.progress
        self.navigationController?.pushViewController(nextVC, animated: true)
    }

    func setupProgressView() {
        progressView = UIProgressView(progressViewStyle: .default)
        progressView.frame = CGRect(x: 20, y: 100, width: self.view.frame.size.width - 40, height: 50)
        view.addSubview(progressView)
    }
}

ステップ2:次の画面のViewControllerを設定(NextViewController)

import UIKit

class NextViewController: UIViewController {

    var progressView: UIProgressView!
    var progress: Float = 0.0

    override func viewDidLoad() {
        super.viewDidLoad()
        setupProgressView()
        updateProgress()
    }

    @IBAction func goBack(_ sender: Any) {
        self.navigationController?.popToRootViewController(animated: true)
        
    }

    func setupProgressView() {
        progressView = UIProgressView(progressViewStyle: .default)
        progressView.frame = CGRect(x: 20, y: 100, width: self.view.frame.size.width - 40, height: 50)
        view.addSubview(progressView)
    }

    func updateProgress() {
        progressView.setProgress(progress, animated: true)
    }
}

サンプルコードの説明

1.ViewController
26-30行目:プログレスバーの設定をするsetupProgressView メソッドを定義
27行目UIProgressViewプログレスバーのUIコンポーネントをインスタンス化
28行目CGRectプログレスバーの位置・サイズを設定
29行目addSubview(progressView)Viewにプログレスバーのインスタンスを配置
18-24行目:ボタンをタップした際の処理goToNextScreen メソッドを定義
19行目instantiateViewController次の画面をインスタンス化
21行目setProgress 次の画面のプログレスバーの表示設定(第一引数:進捗度(1.00), 第二引数:アニメーションの有無(true:有))
22行目pushViewController 次の画面へ遷移
15行目setProgress この画面に戻ってきた時にプログレスバーの進捗をリセットする処理
2.NextViewController
(基本ViewControlleと同様の処理を行います)
・8-12行目viewDidLoad内でプログレスバーの設定setupProgressView 、進捗の更新updateProgress を行います

動作確認

ふくしま

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

【Swift】プログレスバーのアニメーションやスタイルを設定してタスクの進捗度を可視化する方法を解説!

基本的なスタイル設定

プログレスバーのスタイル設定には以下のようなプロパティがありますので、興味があれば色々試してみてください!

  • 進捗色(progressTintColor): プログレスバーの進捗部分の色を設定します。
  • トラック色(trackTintColor): プログレスバーの背景部分(トラック)の色を設定します。
  • プログレス画像(progressImage): 進捗部分にカスタム画像を設定します。
  • トラック画像(trackImage): トラック部分にカスタム画像を設定します。

まとめ

いかがでしたか?この記事を通じて、Swiftでプログレスバーを効果的に使用する方法を学びました。プログレスバーの表示、アニメーション、スタイル設定、そして画面遷移に応じた進捗の更新方法をマスターすることで、ユーザーエクスペリエンスを向上させることができます。
この記事が皆様の開発ライフの一助になれれば幸いです!

ふくしま

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

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

この記事を書いた人

コメント

コメントする

目次