こんにちは!株式会社メモリアインクのふくしまです!
Swiftでの開発において、ユーザーへのフィードバックを視覚的に提供する方法としてトーストメッセージの表示は非常に役立ちます。この記事では、Swift 5.9とXcode 15を使用して、画面中央にメッセージが表示され3秒後に自動的に非表示になるトーストメッセージ
この記事を読んで分かること…
・トーストとは?
・Swiftにおけるトーストメッセージの基本的な表示方法
・画面中央にメッセージを表示する方法
・メッセージを自動で消すためのタイマー処理の実装方法
トーストとは?
トーストメッセージは、情報を短時間表示して自動的に消える小さなポップアップメッセージです。アプリケーションにおいて、ユーザーへの短いフィードバックや情報提供に利用されます。
トーストメッセージの表示方法
概要
画面中央にメッセージが表示され3秒後に自動的に非表示になるトーストメッセージを例に解説します。
サンプルコード
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let showToastButton = UIButton(frame: CGRect(x: 100, y: 100, width: 200, height: 50))
showToastButton.backgroundColor = .blue
showToastButton.setTitle("Show Toast", for: .normal)
showToastButton.addTarget(self, action: #selector(self.showToastButtonTapped), for: .touchUpInside)
self.view.addSubview(showToastButton)
}
@objc func showToastButtonTapped() {
showToast(message: "Hello, World!", duration: 3)
}
func showToast(message: String, duration: Int) {
let toastLabel = UILabel() // 1. UILabelインスタンスを作成
toastLabel.backgroundColor = UIColor.black.withAlphaComponent(0.6) // 2. 背景色を設定
toastLabel.textColor = UIColor.white // 3. テキスト色を設定
toastLabel.textAlignment = .center // 4. テキストを中央揃えにする
toastLabel.font = UIFont(name: "Montserrat-Light", size: 12.0) // 5. フォントとサイズを設定
toastLabel.text = message // 6. メッセージを設定
toastLabel.alpha = 0.0 // 7. 初期透明度を0に設定
toastLabel.layer.cornerRadius = 10 // 8. 角丸の設定
toastLabel.clipsToBounds = true // 9. 角丸を有効にするための設定
self.view.addSubview(toastLabel) // 10. トーストをビューに追加
// 11. トーストの位置とサイズを設定
toastLabel.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
toastLabel.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
toastLabel.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
toastLabel.widthAnchor.constraint(equalToConstant: 200),
toastLabel.heightAnchor.constraint(equalToConstant: 50)
])
// 12. アニメーションでトーストを表示
UIView.animate(withDuration: 0.5, delay: 0, options: .curveEaseIn, animations: {
toastLabel.alpha = 1.0
}) { _ in
// 13. 指定時間後にトーストを非表示にする
DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(duration)) {
UIView.animate(withDuration: 0.5, animations: {
toastLabel.alpha = 0.0
}) { _ in
toastLabel.removeFromSuperview() // 14. トーストをビューから削除
}
}
}
}
}
サンプルコードの説明
◾️5−12行目:画面表示時にトースト表示するためのボタンを設定します。
・UIButton(frame:)
を使用して、ボタンの位置とサイズを設定しています。
・showToastButton.backgroundColor = .blue
でボタンの背景色を青色に設定しています。
・showToastButton.setTitle("Show Toast", for: .normal)
でボタンのタイトルを”Show Toast”に設定しています。
・showToastButton.addTarget(self, action: #selector(self.showToastButtonTapped), for: .touchUpInside)
でボタンがタップされた時のアクションをshowToastButtonTapped
メソッドに設定しています。
・self.view.addSubview(showToastButton)
でボタンをビューのサブビューとして追加しています。
◾️18−53行目:トーストメッセージを表示するためのUILabel
インスタンスを生成し、初期設定を行っています。
・let toastLabel = UILabel()
:インスタンスを生成し、これをトーストメッセージの表示に使用します。
・toastLabel.backgroundColor = UIColor.black.withAlphaComponent(0.6)
:トーストの背景色を半透明の黒に設定します。withAlphaComponent(0.6)
により、黒色の透明度を60%にしています。
・toastLabel.textColor = UIColor.white
:メッセージのテキスト色を白に設定します。
・toastLabel.textAlignment = .center
:テキストを中央揃えに設定します。
・toastLabel.font = UIFont(name: "Montserrat-Light", size: 12.0)
:メッセージのフォントとサイズを設定します。ここではMontserrat-Lightフォント、サイズは12.0を使用しています。
・toastLabel.text = message
:表示するメッセージを設定します。
・toastLabel.alpha = 0.0
:トーストメッセージの初期透明度を0に設定し、アニメーションの開始時には見えないようにします。
・toastLabel.layer.cornerRadius = 10
:トーストメッセージの角を丸くします
・toastLabel.clipsToBounds = true
:clipsToBounds
をtrue
に設定して角丸が適用されるようにします。
・self.view.addSubview(toastLabel)
:メインビューにトーストメッセージを追加します。
◾️32−38行目:Auto Layoutを使用して、トーストメッセージの位置(中心)とサイズを指定します。translatesAutoresizingMaskIntoConstraints
をfalse
に設定することで、コードで指定した制約が適用されます。
◾️40−53行目:トーストメッセージのアニメーション表示と非表示のアニメーションの設定
・UIView.animate
メソッドを使用して、トーストメッセージを徐々に表示(透明度を0から1へ変更)します。アニメーションの持続時間は0.5秒です。
・指定したduration
秒後に、再度UIView.animate
を使用してトーストメッセージを徐々に非表示(透明度を1から0へ変更)にします。このアニメーションも0.5秒で完了します。
・非表示アニメーションの完了後、removeFromSuperview
を呼び出してトーストメッセージをビュー階層から削除します。これにより、メモリリソースの解放が行われます。
動作確認
それではビルドして、動作確認してみましょう!
まとめ
いかがでしたか?
本記事では、Swift 5.9とXcode 15を使用してトーストメッセージを表示する方法を、サンプルコードを通じて詳しく解説しました。これらの知識は、ユーザーに対して直感的で理解しやすいフィードバックを提供するために非常に重要です。
この記事が、皆様の今後の開発ライフの一助になれれば幸いです!
この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント