こんにちは!株式会社メモリアインクのふくしまです!
この記事では、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に紐づけておきましょう
サンプルコード
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
メソッドを呼び出します。
UIActivityIndicatorView
のhidesWhenStopped
がデフォルトでtrueになっていることで、実際はアニメーション開始startIndicator
、アニメーション終了stopAnimating
のみでインジケーターの表示・非表示も同時に操作できます。(isHidden
の設定は不要)
この挙動は、インジケーターがアニメーションをしていない時には不要であるという一般的なケースを想定しています。そのため、多くの開発者が明示的にisHidden
を操作する必要を省略できるようになっています。
動作確認
それでは動作を確認してみましょう!
スタイルの設定
UIActivityIndicatorView
のスタイルと色を変更することで、アプリケーションのデザインに合わせたカスタマイズが可能です。
サンプルコード
func customizeActivityIndicator() {
activityIndicator.style = .large
activityIndicator.color = .blue
}
サンプルコードの説明
・2行目: style
プロパティでインジケーターのスタイル設定します。
スタイルの種類は以下です。.medium
:中サイズのインジケーターで、コンテンツやツールバー内での使用に適しています。.large
:大サイズのインジケーターで、画面全体や大きなローディング画面での使用に適しています。
・3行目: color
プロパティでインジケーターの色を青に変更します。
まとめ
いかがでしたか?この記事ではインジケーターの表示方法、アニメーションの操作、スタイルの設定方法について詳しく解説しました。これらの知識を活用することで、ユーザーに対してより良いフィードバックを提供し、プロフェッショナルなiOSアプリを開発することができます。
この記事が皆様の開発ライフの一助になれれば幸いです!
この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント