How to Design and Add a Launch Screen for Your iOS App
A tutorial on how to design and add a launch screen into Xcode
I was working on a basic history facts app and noticed that there were a severe lack of articles on how to add a Launch Screen in Xcode. Out of all the parts in Xcode 14, this is one of the only pages which require you to use Storyboard (technically you can also use Info.plist, but we’ll get to that later). Although seemingly easy to use, adding the proper constraints so that your view aligns well in all devices can become a nightmare. Here, I will show you an easy way to add a launch screen without too much of a learning curve.
1. Design
My design was simple. It was just my app logo laid on top of a gradient and added the name of the app underneath. Since this tutorial is not about designing the logo/app icon itself, I’ll link the main app icon tutorial here: https://medium.com/@jwc297/how-to-make-an-app-icon-487306a7f079
For designing the background of the launch screen, I think the simplest aesthetic background would be a gradient. In Procreate, you do this by first painting the color behind the logo. Then erase using a transparent eraser. Then you increase the gaussian blur.
2. Add the image to Xcode assets
Just export the image from your design software to your computer. After it is done uploading, create a new asset and drag and drop it as shown below. Don’t worry if your image is too big because you can resize it in Storyboard.
3. Initialize the launch screen
Nagivate to ‘File -> New -> File’. Then click on Launch Screen.
4. Add your launch screen image to LaunchScreen.storyboard
Navigate to the new Launch Screen page. Click on the plus icon and drag your launch screen image to the middle of the phone. Resize your image to fit the phone screen properly.
5. Add centering constraints
Click on the icon to the bottom right of the preview which looks like two bars. Set the horizontal and vertical constraints to zero to center your launch screen image.
6. Add bounding constraints
Determine which parts of your launch screen you want to bound. This causes the image to always fit to the size of the phone. Since your original image likely is not the same size as the phone, you can choose the sides of your design which can be constrained without there still being empty space. For example, I chose the top and bottom of my design to constrain to the top and bottom of the phone. That way, some of the left and right sides of my design disappear from the phone, but there isn’t any empty space that has not yet been filled.
7. Test your app in the simulator
Build your app in the simulator to confirm that it shows up how you want it to in various phone shapes. And there you have it! You’ve got a brand new, beautiful launch screen.
Final notes
If you are dead set on avoiding Storyboard, there is also a way to add your launch screen through Info.plist. This only will work for very simple designs, but you can find instructions here: https://www.appcoda.com/launch-screen-swiftui/
If you are interested in seeing my app in action, launch screen and all, here it is: https://apps.apple.com/us/app/historical-facts/id1665761564
Also, if this article helped in any way, please smash the 👏 button! Please also comment if you have further advice for others or need clarification on any steps.
