💁

SwiftUIで、スプラッシュスクリーンを使う

2024/06/26に公開

iOS

Swift

SwiftUI

tech

対象者

SwiftUIでスプラッシュスクリーンを使いたい
やり方がわからない？

Storyboardとやり方違うみたいで、調べてみるとどうやら、ページを作って、スタックを重ねてそれっぽく見せるイメージのようですね。

こちらが完成品

参考になった動画

今回は自分で用意した画像を使いたいので、やり方ちょっと違います笑

[こんな感じです！]

プロジェクトの説明

まずはお好みの画像をAssetsに配置してください。

SplashScreenViewという構造体を作成してください。こちらが今回使用するスプラッシュスクリーンです。アニメーションと、画像サイズの調節をして、いい感じに仕上げております。if文で、一度表示したら、ContentViewに画面を切り替えるようになっております。

一度表示すると、

import SwiftUI

struct SplashScreenView: View {
    @State private var isActive = false
    @State private var size = 0.8
    @State private var opsity = 0.5
    
    var body: some View {
        if isActive {
            ContentView()
        } else {
            VStack {
                VStack {
                    Image("worktime")
                        .resizable()
                        .frame(width: 200, height: 200)
                    Text("スプラッシュスクリーン")
                        .font(Font.custom("Baskerville-Bold", size: 26))
                        .foregroundColor(.black.opacity(0.80))
                }
                .scaleEffect(size)
                .opacity(opsity)
                .onAppear {
                    withAnimation(.easeIn(duration: 1.2)) {
                        self.size = 0.9
                        self.opsity = 1.0
                    }
                }
            }
            .onAppear {
                DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
                    withAnimation {
                        self.isActive = true
                    }
                }
            }
        }
    }
}

#Preview {
    SplashScreenView()
}

アプリのエントリーポイントとなるメインスクリーンをスプラッシュスクリーンを表示する画面に設定すると、Storyboardでやったことある人が知ってるような画面を作れます笑

import SwiftUI

@main
struct SplashScreenApp: App {
    var body: some Scene {
        WindowGroup {
            // Main Windowで、Splash Screenを表示するように設定する。
            SplashScreenView()
        }
    }
}

ContentViewは、スプラッシュスクリーンを表示し終わると切り替わる画面です。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.blue
                .ignoresSafeArea()
            Text("コンテンツ画面")
                .foregroundColor(.white)
                .font(.system(size: 30))
        }
    }
}

#Preview {
    ContentView()
}

感想

どうでしょうか？
スプラッシュスクリーン作るのはコツが必要ですが、パッケージも必要ないですし、ネイティブのありがたい標準機能に感動しました🙌
Flutterだったら必要なんですよね笑
あれが結構面倒臭い💦

対象者

プロジェクトの説明

感想

Discussion