💬

【Swift5】SwiftMessagesで超簡単にアプリ内の通知アラートを作る

2021/03/26に公開約3,300字

アプリ内の通知アラートって...?

こういう感じのやつです

画像は公式GitHubからお借りしました

今回はこれを作ります

ライブラリの情報

SwiftMessages

https://github.com/SwiftKickMobile/SwiftMessages

インストール

pod 'SwiftMessages'

実装する

インポート

ViewController.swift
import SwiftMessages

アラートを出す

アラートを表示したいところで以下を実行しましょう

ViewController.swift
// 表示するビューはテンプレートが用意されています
//.cardView, .conteredView, .messageView, statusView, .tabView
//自作のビューを表示させる場合はviewを作る必要はありません
let view = MessageView.viewFromNib(layout: .cardView)

// テンプレなのでテーマも用意されています
// .error, .info, .success, .warning
view.configureTheme(.success)

// 影をつけることができます
view.configureDropShadow()

// タイトル、メッセージ本文、アイコンとなる絵文字をセットします
view.configureContent(title: "成功!", 
		      body: "アカウントが作成できました!", 
		      iconText: "🎉")
		      
// ボタンのタイトルをセットします
view.button?.setTitle("OK!", for: .normal)

// ボタンが押された時の処理、alertButtonTapped()をボタンに付与します
view.button?.addTarget(self,action: #selector(self.alertButtonTapped(_ :)),for: .touchUpInside)

// ボタンがいらないなら.isHiddenをtrueにしましょう
// view.button?.isHidden = true

// アラートの出現位置を調整します
view.layoutMarginAdditions = UIEdgeInsets(top: 20, 
					  left: 20, 
					  bottom: 20, 
					  right: 20)

// 角丸を指定します
(view.backgroundView as? CornerRoundingView)?.cornerRadius = 10

// アラートを表示します
SwiftMessages.show(view: view)

完成イメージ

これだけでこのようなアラートが作れます

表示オプションを変更してみる

どこから出てくるかや、どれぐらい表示するか、などの設定を変更することができます

先ほどのSwiftMessages.show(view: view)をする前に以下を記述します

ViewController.swift
// 設定を作成
var config = SwiftMessages.Config()

// 出現スタイルを指定
// .bottom, .center, .top, .custom()
config.presentationStyle = .center

// どのスタイルで表示するか
// .alert, .normal. statusBar
config.presentationContext = .window(windowLevel: .alert)

// iOS13では.statusBarにする場合、そのままでは使えないので以下の設定をしましょう
//config.prefersStatusBarHidden = true

// 自動で閉じるまでの時間を設定
// .automatic, .forever, .seconds(seconds:), 
config.duration = .seconds(seconds: 2)

//時間をカスタムする場合
//delay: 表示するまで何秒遅らせるか, minimum: 最低何秒表示するか
//config.duration.indefinite(delay: 3, minimum: 5)

// ポップオーバビューみたいに背景を暗くし、背景がタップされたら閉じるように
config.dimMode = .none   //なし
//他のスタイル
//config.dimMode = .gray(interactive: true)
//config.dimMode = .color(color: .red, interactive: true)
//config.dimMode = .blur(style: .regular, alpha: 0.5, interactive: true)

// パン(スワイプ)したら隠すかどうか(true: 隠す)
config.interactiveHide = true

// メッセージがステータスバーに表示される時のステータスバーのスタイル
config.preferredStatusBarStyle = .lightContent

// 表示されたなどに何かを実行する
config.eventListeners.append() { event in
        switch event {
        case .willShow:
            print("表示される")
                
        case .didShow:
            print("表示された")
                
        case .willHide:
            print("消える")
                
        case .didHide:
            print("消えた")
                
        }
}

// 設定を指定して表示する
SwiftMessages.show(config: config, view: view)

これらの設定を有効にするとこうなります

(presentationStyle.centerにすると、いろんな方向にスワイプすることができて面白いです)

おしまい

SwiftMessagesは他にももっと機能がありますが、全て紹介してしまうと収まりきらないので、気になったら公式GitHubを眺めてみてください。

どこか間違っているところがあったら教えてください。

GitHubで編集を提案

Discussion

ログインするとコメントできます