💬
【Swift5】SwiftMessagesで超簡単にアプリ内の通知アラートを作る
アプリ内の通知アラートって...?
こういう感じのやつです
画像は公式GitHubからお借りしました
今回はこれを作ります
ライブラリの情報
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を眺めてみてください。
どこか間違っているところがあったら教えてください。
Discussion