Creating a Pro-Level Splash Screen with SwiftUI and App Coordinator

In iOS app development, first impressions are critical. A well-designed splash screen not only makes your app look professional but also provides a smooth introduction for users. In this blog post, we’ll walk through creating an aesthetic splash screen with animation in SwiftUI using the App Coordinator pattern.

The App Coordinator pattern provides a scalable way to manage navigation and state within your app, ensuring your splash screen transitions seamlessly to the main app view.

Why Use the App Coordinator Pattern?

As your app grows, managing navigation between views can get complicated. The App Coordinator pattern simplifies this by centralizing navigation logic, making it easier to add new features, like a splash screen or a new page, without cluttering your view code.

We’ll start with the basics of setting up a splash screen and then dive into implementing the coordinator to handle view transitions.

Let’s Dive Into the Code!

1. Setting Up the App Coordinator

The first step is to create the App Coordinator, which will manage which view is currently active (e.g., the splash screen or main content). This coordinator will control the transitions between the views.

import SwiftUI

class AppCoordinator: ObservableObject {
    @Published var currentView: AppView = .splash
    
    enum AppView {
        case splash
        case main
    }
    
    func switchToMain() {
        withAnimation {
            currentView = .main
        }
    }
}

struct AppCoordinatorView: View {
    @ObservedObject var coordinator: AppCoordinator
    
    var body: some View {
        switch coordinator.currentView {
        case .splash:
            SplashScreenView(coordinator: coordinator)
        case .main:
            ContentView()
        }
    }
}

• AppCoordinator: This class controls the state of the app, defining which view to display — either the splash screen or the main content.
• currentView: Using an @Published property allows the app to reactively update the view whenever the state changes.
• switchToMain(): This function handles the transition from the splash screen to the main content with a smooth animation.

2. Creating the Splash Screen

Next, we’ll build the actual splash screen that users will see when they first open the app. We’ll include a simple animation to make it more dynamic.

import SwiftUI

struct SplashScreenView: View {
    @State private var scale = 0.6
    @State private var opacity = 0.0
    @ObservedObject var coordinator: AppCoordinator
    
    var body: some View {
        VStack {
            Image(systemName: "swift")
                .resizable()
                .frame(width: 120, height: 120)
                .scaleEffect(scale)
                .opacity(opacity)
                .onAppear {
                    withAnimation(.easeIn(duration: 1.2)) {
                        self.scale = 1.0
                        self.opacity = 1.0
                    }
                }
        }
        .background(Color.white)
        .edgesIgnoringSafeArea(.all)
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
                coordinator.switchToMain()
            }
        }
    }
}

• Animation: The logo starts at 60% of its size and fades in. The scaleEffect and opacity change gradually using a .easeIn animation over 1.2 seconds.
• Image: The Image(systemName: "swift") represents the splash screen logo. You can replace this with your app's logo.
• Background: The background is set to white and takes up the full screen using .edgesIgnoringSafeArea(.all).
• Transition: After 2 seconds, the coordinator automatically switches to the main view.

3. Building the Main Content View

Once the splash screen finishes, the user is directed to the main content of the app. Here’s a simple ContentView to serve as a placeholder for the main screen.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Welcome to the Main App")
            .font(.largeTitle)
            .foregroundColor(.black)
    }
}

4. Bringing It All Together in the App

Finally, we need to hook everything up in the app’s entry point so that the App Coordinator takes control of navigation.

import SwiftUI

@main
struct MainApp: App {
    @StateObject private var coordinator = AppCoordinator()
    
    var body: some Scene {
        WindowGroup {
            AppCoordinatorView(coordinator: coordinator)
        }
    }
}

• @StateObject: We create the AppCoordinator as a @StateObject so that it can be observed by the views, ensuring that navigation changes are reflected in real-time.
• AppCoordinatorView: This is the root view, and it decides whether to show the splash screen or the main app content.

Feel free to experiment with different animations or add more complexity to the coordinator. If you found this tutorial helpful, don’t hesitate to clap it!