🍞

【SwiftUI】モダンでシンプルなToastライブラリ「SimpleToast」を試す

2024/11/24に公開

iOS

Swift

SwiftUI

Swift Package Manager

toast

tech

 SimpleToast今回はシンプルで柔軟なカスタマイズが魅力のSwiftUIで書かれた、モダンなライブラリ「SimpleToast」を試してみました！
https://github.com/sanzaru/SimpleToast
SimpleToast は SwiftUI の iOS や MacOS アプリケーションの中でトースト/ポップアップ通知を表示するための、シンプルで軽量、柔軟で使いやすいライブラリです。 どんな内容でも表示できる柔軟性があるので、シンプルなモーダルを表示するためにライブラリを使うこともできます。
扱いやすそうなライブラリですが、現在のバージョンはまだ開発中みたいで 1.0 までにBreaking changesが入る可能性があるとのことです。

 主な機能自由な内容を表示

トースト通知内に、好きな内容を自由に表示できる
表示位置のカスタマイズ

トーストを画面内の好きな場所に配置可能
消えるタイミングを設定

トーストが自動で消えるタイミングを自由に設定でき、消さないようにすることも可能
消えた後の処理も設定可能

トーストが消えた際に実行するコードを設定できる
アニメーション

表示や消える際のアニメーションを複数のパターンから選べ、カスタマイズも可能

 ライブラリインストール早速インストールして使ってみたいと思います。今回は Swift Package Manager を使ってインストールしていきます。
let package = Package(
    platforms: [
            .iOS(.v13),
        ],
    // ...
    dependencies: [
        .package(url: "https://github.com/sanzaru/SimpleToast.git", from: "0.10.1")
    ],
    // ...
    targets: [
        .target(
            // ...
            dependencies: [
                .product(name: "SimpleToast", package: "SimpleToast")
            ]
        ),
        // ...
    ]

 シンプルな実装まずはシンプルに画面開いたらtoastが表示されるだけの画面を作ってみたいと思います。
ToastTestView を以下内容で作成します。
import SimpleToast
import SwiftUI

struct ToastTestView: View {
    @State private var showToast = true

    private let toastOptions = SimpleToastOptions()
    var body: some View {
        VStack {
            Text("Hello SimpleToast")
        }
        .simpleToast(isPresented: $showToast, options: toastOptions) {
            Text("Toast message")
        }
    }
}

#Preview {
    ToastTestView()
}
Previewを見てみると上部にToastが表示されているのが分かります。タップすると消えます。

 ⚪︎秒後に消える様にする次に何秒か経ったらToast表示が消えるようにしてみたいと思います。
先ほどの実装の SimpleToastOptions を以下に修正します。
    private let toastOptions = SimpleToastOptions(
        hideAfter: 3 // 追加
    )
3秒後に表示が消える様に設定してみました。Previewを確認すると3秒後に消えているのが分かります。

 ボタンが押されたらToast表示次にボタンが押されたらToast表示されるように修正してみます。
struct ToastTestView: View {
    @State private var showToast = false

    private let toastOptions = SimpleToastOptions(
        hideAfter: 3
    )
    var body: some View {
        VStack {
            Button("Show toast") {
                withAnimation {
                    showToast.toggle()
                }
            }
        }
        .simpleToast(isPresented: $showToast, options: toastOptions) {
            Text("Toast message")
        }
    }
}
Previewを確認してみるとちゃんとボタン押されて表示されているのが分かります。また hideAfter で消えた後も再度ボタン押して表示されています。hideAfter されるとSimpleToast内で showToast を false に設定してくれている事が分かります。

 見た目をそれっぽく次に味気ないToastだったのをっぽい見た目に変えてみます。 simpleToast 部分を以下に修正します。
        .simpleToast(isPresented: $showToast, options: toastOptions) {
            Label("This is some simple toast message.", systemImage: "info.circle")
            .padding()
            .background(Color.blue.opacity(0.8))
            .foregroundColor(Color.white)
            .cornerRadius(10)
            .padding(.top)
        }
Preview確認するとっぽくなっているかと思います。

 アニメーションを変更ModifierType でアニメーションを変更する事ができます。 SimpleToastOptions の modifierType に指定することで以下の様に変更が可能です。※ デフォルトは fade
Slide
    private let toastOptions = SimpleToastOptions(
        modifierType: .slide
    )
Scale
    private let toastOptions = SimpleToastOptions(
        modifierType: .scale
    )
Skew
    private let toastOptions = SimpleToastOptions(
        modifierType: .skew
    )

 表示位置を変更alignment で変更する事ができます。指定できる値は👇を参考にして下さい。
https://developer.apple.com/documentation/swiftui/alignment


指定したalignment
Preview表示


top (デフォルト)


topLeading


topTrailing


bottom


bottomLeading


bottomTrailing


center


leading


trailing



 Toast表示時の背景色を変更backdrop に Color を指定する事で背景色を変更する事ができます。
    private let toastOptions = SimpleToastOptions(
        alignment: .bottom,
        hideAfter: 3,
        backdrop: Color.red // 追加
    )
Preview確認すると背景色が赤色になっているのが分かります。

 まとめこのライブラリはドキュメントにも記載されている通り、カスタマイズ性が高く、直感的に実装できて、すぐに導入できる手軽さも特長かなと思いました！ また、アニメーションや表示位置の変更も簡単にできるのも良さそうです！