What Exactly Is a Launch Screen?

A launch screen, commonly known as a splash screen, is an initial static image or animation that appears when an application is opened. It acts as a temporary placeholder while the app loads the necessary resources and prepares for user interaction. While traditional launch screens were basic, they have now evolved into vibrant displays that convey branding and build excitement.

As we proceed, we will design two distinct types of launch screens: one static and one animated.

Removing the Default Launch Screen

Before implementing your custom launch screen, it’s essential to eliminate the default screen from the plist. Navigate to: Targets -> Custom macOS/iOS Application Target Properties, and remove the entry labeled "Launch screen".

Implementing Launch Screens in SwiftUI

In this section, we will develop two types of launch screens—one featuring animations and the other incorporating a static image set against an appealing background color.

How to Display a Launch Screen in SwiftUI

To ensure users encounter your launch screen first, we must create a new SwiftUI view that is displayed upon app launch. This involves adding a condition in the initial file the app accesses, typically the one associated with the WindowGroup.

First, create a new SwiftUI file named LaunchScreenView and include the following code in your main application file (which usually shares the same name as your app):

import SwiftUI

@main

struct TutorialApp: App {

@State var isLoading: Bool = true

var body: some Scene {

WindowGroup {

if isLoading {

LaunchScreenView()

} else {

// Navigate to the main application

}

}

}

}

Note: The above code will continuously display the launch screen, so remember to update the `isLoading` variable to false once the app has fully loaded.

Creating a Static Launch Screen

To begin, we will design a static launch screen featuring an image and a background color that complements it. Select an image that aligns with your app's theme—using your app icon is a great option.

Here’s how to create a static launch screen with an image and a mint-colored background:

import SwiftUI

struct LaunchScreenView: View {

var body: some View {

VStack {

Spacer()

Image("mobile-phone")

.resizable()

.frame(width: 200, height: 190)

Spacer()

}

.frame(maxWidth: .infinity, maxHeight: .infinity)

.background(Color.mint)

}

}

The Result:

SwiftUI Animated Launch Screen

Next, we will implement an animated launch screen. This approach adds vibrancy to the launch process, making it feel more dynamic while the application loads.

In this case, we will display an image, apply a custom phase animator modifier, and add an ease-in-out animation with a 1-second duration:

import SwiftUI

struct LaunchScreenView: View {

@State var isAnimating = false // <1>

var body: some View {

VStack {

Spacer()

Image("mobile-phone")

.phaseAnimator([true, false]) { theImage, pushing in

theImage.scaleEffect(pushing ? 0.2 : 0.3)

} animation: { pushing in

.easeInOut(duration: 1)

}

Spacer()

}

.frame(maxWidth: .infinity, maxHeight: .infinity)

.background(Color.mint)

.ignoresSafeArea()

}

}

The Result:

Wrapping Up Launch Screens in SwiftUI

Although often underestimated, the launch screen in SwiftUI serves as the initial connection between your app and its users. Just like first impressions matter when meeting someone new, they are equally important in the digital space. Therefore, ensure your launch screen is visually appealing and aligns with your app's theme.

In this guide, we explored how to create two different launch screens, and I hope you find this information useful for your upcoming projects.

Happy coding! 🎓

Thank you for reading through this guide. Before you leave, consider giving a clap and following the author! 👏 Also, check out our other platforms for more insightful content.

In the video titled "Adding an App Icon and Launch Screen to SwiftUI | Todo List #7," learn how to incorporate an app icon and launch screen effectively into your SwiftUI projects.

Watch "From Boring to Breathtaking: Mastering SwiftUI Splash Screens for Remarkable App Launches" to discover how to create eye-catching splash screens that enhance your app's launch experience.