こんにちは!株式会社メモリアインクのふくしまです!
記事では、プログレスバーを表示し、そのアニメーションやスタイルをカスタマイズして、アプリ内のタスク進捗度を効果的にユーザーに伝える方法について、具体的なサンプルコードを交えて詳しく解説します。
この記事を読んで分かること…
・プログレスバーの基本的な表示方法
・プログレスバーのアニメーションの実装方法
・プログレスバーのスタイル設定方法
プログレスバーの表示
概要
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エンジニアを目指すなら【ユニゾンキャリア】
コメント