SwiftUIでToastっぽいバナーっぽいやつを実装してみる

こんな感じにしたい

PowerplayToastKit: A Simple Toast Library for iOS

とか

翻訳のポップアップ

とか

実装-Success

こんな感じで3秒経つと消える感じです

ToastBanner.swift

import SwiftUI

struct ToastBanner: View {
    
    @Binding var showFlag: Bool
    
    var body: some View {
        ZStack {
            VStack {
                HStack {
                    Image(systemName: "checkmark.circle.fill")
                        .resizable()
                        .scaledToFit()
                        .frame(height: 30)
                        .foregroundColor(Color.green)
                    VStack(alignment: .leading) {
                        Text("ダウンロード完了")
                            .font(.custom("RoundedMplus1c-Bold", size: 16))
                            .foregroundColor(Color.black)
                        Text("ファイルを写真アプリに保存しました")
                            .font(.custom("RoundedMplus1c-Regular", size: 14))
                            .foregroundColor(Color.black)
                    }
                }
                .padding(.all, 10)
                // PaleGreenっぽいやつ #D0E2BE
                .background(Color(red: 232/255, green: 242/255, blue: 228/255))
                .clipShape(RoundedRectangle(cornerRadius: 10))
                Spacer()
            }
        }
        .padding(.top, 50)
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                withAnimation {
                    showFlag = false
                }
            }
        }
    }
}

struct ToastBanner_Previews: PreviewProvider {
    static var flag = State(initialValue: true)
    
    static var previews: some View {
        ToastBanner(showFlag: flag.projectedValue)
    }
}

実装-Failure

ちょっと使いまわしてフラグで成否切り替えするようにしてみる。

ToastBanner.swift

struct ToastBanner: View {
    /// バナー表示フラグ
    @Binding var showFlag: Bool
    /// ダウンロード成否表示切替フラグ
    @State var shouldShowDownloadSuccess: Bool
    
    var body: some View {
        Group {
            if shouldShowDownloadSuccess {
                SuccessBanner()
            } else {
                FailureBanner()
            }
        }
        .padding(.top, 50)
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                withAnimation {
                    showFlag = false
                }
            }
        }
    }
}

private struct SuccessBanner: View {
    var body: some View {
        ZStack {
            VStack {
                HStack {
                    Image(systemName: "checkmark.circle.fill")
                        .resizable()
                        .scaledToFit()
                        .frame(height: 30)
                        .foregroundColor(Color.green)
                    VStack(alignment: .leading) {
                        Text("ダウンロード完了")
                            .font(.custom("RoundedMplus1c-Bold", size: 16))
                            .foregroundColor(Color.black)
                        Text("ファイルを写真アプリに保存しました")
                            .font(.custom("RoundedMplus1c-Regular", size: 14))
                            .foregroundColor(Color.black)
                    }
                }
                .padding(.all, 10)
                // PaleGreenっぽいやつ #D0E2BE
                .background(Color(red: 232/255, green: 242/255, blue: 228/255))
                .clipShape(RoundedRectangle(cornerRadius: 10))
                Spacer()
            }
        }
    }
}

private struct FailureBanner: View {
    var body: some View {
        ZStack {
            VStack {
                HStack {
                    Image(systemName: "xmark.circle.fill")
                        .resizable()
                        .scaledToFit()
                        .frame(height: 30)
                        .foregroundColor(Color.red)
                    VStack(alignment: .leading) {
                        Text("ダウンロード失敗")
                            .font(.custom("RoundedMplus1c-Bold", size: 16))
                            .foregroundColor(Color.black)
                        Text("ファイルの保存に失敗しました")
                            .font(.custom("RoundedMplus1c-Regular", size: 14))
                            .foregroundColor(Color.black)
                    }
                }
                .padding(.all, 10)
                // Light Red #F4E4DE
                .background(Color(red: 244/255, green: 228/255, blue: 222/255))
                .clipShape(RoundedRectangle(cornerRadius: 10))
                Spacer()
            }
        }
    }
}

struct ToastBanner_Previews: PreviewProvider {
    static var flag = State(initialValue: true)
    
    static var previews: some View {
        ToastBanner(showFlag: flag.projectedValue, shouldShowDownloadSuccess: false)
    }
}

参考

PowerplayToastKit: A Simple Toast Library for iOS
薄緑（うすみどり）の色見本・カラーコード
カラーコード変換ツール
SwiftUI でトースト・バナーを表示する方法