Creating an Apple-like Splash Screen in SwiftUI

Make your app look even more professional

Rudrank Riyam
Nov 22, 2019 · 3 min read
Mockup generated by Mockuper

You may have seen the beautiful “Welcome to Stocks” splash screen to introduce the features of Apple’s Stocks application.

Well, we’re going to create something similar, using reusable views in SwiftUI.

I recently launched my first app, Gradients Game, and implemented a splash screen.

This is how it looks:

We’ll build an identical screen so you can use it in your own SwiftUI app.

We’ll be breaking down the UI into two parts:

  • The image on the top and the welcome title
  • The information view

Let’s start with the information detail first, as it’s the best example of using reusable views in our case.


Information View

The highlight for a particular feature usually contains a symbol or an image to signify, a precise title, and a subtitle to give slightly more information explaining it.

Create a separate view to show these three components. This way, we’ll be able to reuse the view for any feature we want and supplement it in the future.

For this article, we’ll use SF Symbols, as they are really easy to work with and flexible.

We have the title and the subtitle laid out vertically, so embed it in VStack. Embed the whole row into HStack with the image on the left side.

You can customise this code to your requirements with different color and size combinations.

Here’s how it will look:

Next, we’ll use a container to contain these rows. You should have the data as models, but for the sake of simplicity, let’s add it in a view itself.


Title View

The title consists of the logo and the name of your app. Usually, the name is coloured according to the primary colour used throughout the application.


Adding Everything Together

We’re adding a Spacer() in-between so everything fits in perfectly.

The code for the custom modifiers used:


Conclusion

You can add animations to make it even more interactive.

I’ll add another article on that soon, as there are a few bugs in iOS 13.2 making it difficult to work with animations in SwiftUI.

Better Programming

Advice for programmers.

Rudrank Riyam

Written by

Apple WWDC Scholarship Winner 2019. Google Summer of Code 2019 @ Rocket.Chat iOS | Twitter @rudrankriyam

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade