 ふくしま
ふくしまこんにちは!株式会社メモリアインクのふくしまです!
記事では、プログレスバーを表示し、そのアニメーションやスタイルをカスタマイズして、アプリ内のタスク進捗度を効果的にユーザーに伝える方法について、具体的なサンプルコードを交えて詳しく解説します。
この記事を読んで分かること…
・プログレスバーの基本的な表示方法
・プログレスバーのアニメーションの実装方法
・プログレスバーのスタイル設定方法
プログレスバーの表示
概要
2つの画面を用意して、画面遷移をするごとに進捗度を更新する実装を例にサンプルコードを示しながら解説します。
前提
・最初の画面でNavigationControllerが設定されていること(最初の画面を選択してEditor→Embed In→Navigation Controller)
・2つの画面を用意して、各画面のViewControllerが用意されていること(ViewController, NextViewController)
・各画面に遷移するためのボタンを配置していること
・画面遷移の基礎知識があること


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


サンプルコード
ステップ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 を行います
動作確認



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


基本的なスタイル設定
プログレスバーのスタイル設定には以下のようなプロパティがありますので、興味があれば色々試してみてください!
- 進捗色(progressTintColor): プログレスバーの進捗部分の色を設定します。
- トラック色(trackTintColor): プログレスバーの背景部分(トラック)の色を設定します。
- プログレス画像(progressImage): 進捗部分にカスタム画像を設定します。
- トラック画像(trackImage): トラック部分にカスタム画像を設定します。
まとめ
いかがでしたか?この記事を通じて、Swiftでプログレスバーを効果的に使用する方法を学びました。プログレスバーの表示、アニメーション、スタイル設定、そして画面遷移に応じた進捗の更新方法をマスターすることで、ユーザーエクスペリエンスを向上させることができます。
この記事が皆様の開発ライフの一助になれれば幸いです!



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





 
			







コメント