はじめに
SwiftUIでスプラッシュ画面を実装する方法を紹介します。
環境
- OS：macOS Big Sur 11.3
- Xcode：12.5 (12E262)
- Swift：5.4
スプラッシュ画面の実装方法
おそらくSwiftUIではデフォルトでスプラッシュ画面が用意されていないので、 通常のビューとして実装します。
追記
おまけ に書きましたが、デフォルトでスプラッシュ画面が用意されていました。
私はUIKitに合わせて LaunchScreen.swift と命名しています。
本記事では背景色が Primary カラーで、ビューの真ん中に Logo イメージを表示するだけのスプラッシュ画面とします。
LaunchScreen.swift
import SwiftUI
struct LaunchScreen: View {
@State private var isLoading = true
var body: some View {
if isLoading {
ZStack {
Color("Primary")
.ignoresSafeArea() // ステータスバーまで塗り潰すために必要
Image("Logo")
.resizable()
.aspectRatio(contentMode: .fit)
.padding()
}
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
withAnimation {
isLoading = false
}
}
}
} else {
ContentView()
}
}
}
struct LaunchScreen_Previews: PreviewProvider {
static var previews: some View {
LaunchScreen()
}
}
本記事ではスプラッシュ画面を0.5秒間表示して、 ContentView() に切り替えています。
実務ではスプラッシュ画面の表示時間を固定にするのでなく、初期データ取得などが完了するまで表示するのが望ましいです。
スプラッシュ画面を実装したら、初期表示するビューを変更します。
FooApp.swift
import SwiftUI
@main
struct FooApp: App {
var body: some Scene {
WindowGroup {
- ContentView()
+ LaunchScreen()
}
}
}
これでスプラッシュ画面の実装が完了です。
おまけ: Info.plistで設定する
Twitter で教えていただいたのですが、iOS 14からは Info.plist でかんたんに設定できました。
今回だと以下の設定のみでスプラッシュ画面が実現できます。
Info.plist
<key>UILaunchScreen</key>
<dict>
<key>UIImageName</key>
<string>Logo</string>
<key>UIColorName</key>
<string>Primary</string>
</dict>
ただ自分が触った限りだと画像サイズを指定できず、画面からはみ出してしまいました。
予め小さい画像を用意する必要がありそうです。
表示時のアニメーションは、今までのStoryboardを使う方法と同じように見えました。
Appleが公式で提供している方法ということもあり、単純なスプラッシュ画面を表示する際は Info.plist を使うほうがいいと思います。
複雑なビューや初期データ取得を待ちたい場合などは、自前で実装するのがよさそうです。
おわりに
かんたんにスプラッシュ画面を実装できました！
HIG を読み、適切なスプラッシュ画面を用意しましょう 