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

【Swift】トーストの表示方法をサンプルコードを示しながら詳しく解説!

【Swift】トーストの表示方法をサンプルコードを示しながら詳しく解説!
ふくしま

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

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 = trueclipsToBoundstrueに設定して角丸が適用されるようにします。
self.view.addSubview(toastLabel):メインビューにトーストメッセージを追加します。
◾️32−38行目:Auto Layoutを使用して、トーストメッセージの位置(中心)とサイズを指定します。translatesAutoresizingMaskIntoConstraintsfalseに設定することで、コードで指定した制約が適用されます。
◾️40−53行目:トーストメッセージのアニメーション表示と非表示のアニメーションの設定
UIView.animateメソッドを使用して、トーストメッセージを徐々に表示(透明度を0から1へ変更)します。アニメーションの持続時間は0.5秒です。
・指定したduration秒後に、再度UIView.animateを使用してトーストメッセージを徐々に非表示(透明度を1から0へ変更)にします。このアニメーションも0.5秒で完了します。
・非表示アニメーションの完了後、removeFromSuperviewを呼び出してトーストメッセージをビュー階層から削除します。これにより、メモリリソースの解放が行われます。

動作確認

ふくしま

それではビルドして、動作確認してみましょう!

【Swift】トーストの表示方法をサンプルコードを示しながら詳しく解説!

まとめ

いかがでしたか?
本記事では、Swift 5.9とXcode 15を使用してトーストメッセージを表示する方法を、サンプルコードを通じて詳しく解説しました。これらの知識は、ユーザーに対して直感的で理解しやすいフィードバックを提供するために非常に重要です。
この記事が、皆様の今後の開発ライフの一助になれれば幸いです!

ふくしま

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

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

この記事を書いた人

コメント

コメントする

目次