App icon and launch screen in iOS Swift - Mini App: Build & Ship

Build: Launch Screen Setup

Create a simple launch screen and set a custom app icon for an iOS app.

Target UI

Launch Screen:
+---------------------+
|                     |
|      [App Icon]      |
|                     |
|    Welcome to App    |
|                     |
+---------------------+

Add a custom app icon image named 'AppIcon' to the asset catalog.

Create a launch screen storyboard with the app icon centered.

Add a label below the icon with text 'Welcome to App'.

Ensure the launch screen adapts to different device sizes.

Starter Code

iOS Swift

import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // TODO: Setup window and root view controller
    return true
  }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    window = UIWindow(frame: UIScreen.main.bounds)
    let viewController = UIViewController()
    viewController.view.backgroundColor = .white
    window?.rootViewController = viewController
    window?.makeKeyAndVisible()
    return true
  }
}

// LaunchScreen.storyboard setup:
// - Add UIImageView centered with image named 'AppIcon'
// - Add UILabel below with text 'Welcome to App'
// - Use Auto Layout constraints to center and space elements

// AppIcon asset catalog:
// - Add all required icon sizes for iOS app icon

// Project settings:
// - Set 'LaunchScreen.storyboard' as the launch screen file
// - Set 'AppIcon' as the app icon source

We set up the AppDelegate to create a window and a simple root view controller with a white background. The launch screen is designed in a storyboard named LaunchScreen.storyboard which contains an image view centered with the app icon image and a label below it. Auto Layout constraints ensure the layout adapts to different screen sizes. The app icon images are added to the asset catalog under the AppIcon set, including all required sizes for iOS. Finally, the project settings are configured to use the launch screen storyboard and the app icon set, so the app shows the custom icon and launch screen on startup.

Final Result

Completed Screen

Launch Screen:
+---------------------+
|                     |
|      [App Icon]      |
|                     |
|    Welcome to App    |
|                     |
+---------------------+

When the app launches, the launch screen appears showing the app icon centered with the welcome text below.

The launch screen automatically adjusts to different device sizes and orientations.

After launch, the main app screen with a white background appears.

Stretch Goal

Add a fade-out animation from the launch screen to the main app screen.

💡 Hint

Replicate the launch screen UI in the root view controller and use UIView animations to fade out to the main content.