Change splash screen in iOS app for dummies (the better way)
Forget about adding images for splash screen (launch screen) with different sizes. Your app will be much bigger for no reason. You can use smarter way how to achieve awesome splash screen just with one size of the image. Use storyboard!
I publish my own cookbook with many images and much less text info, because nobody wants to read long articles! 💪
I'm personally using this approach in React Native, but there is no real difference if you are native iOS developer.
Create resizable background for launch screen
1) Open your project in Xcode and create new file (⌘+N) in directory ios/[target] (normally target is similar with name of your project). In my case (React Native app) it will be os/hoppycar
2) Select Launch Screen from New file dialog
3) If there is selected something in Launch Images Source (General tab), choose Don't use asset catalogs
4) Set Launch Screen File (see previous screenshot) toLaunchScreen.storyboard which you created few steps ago
5) SelectLaunchScreen.storyboard in file structure on the left
6) Open Object Library (⌘ + SHIFT + L) and add Image View
7) Resize UIImageView to fullscreen of the displayed screen (use mouse/touchpad)
8) Set constraints (press all 4 dotted red I) and keep 0 everywhere — It means that image should be sticked 0 pixels from the display border
Before:
After:
9) Add Launch Screen image to Asset Catalog. You can move this file by using drag and drop from Finder.
10) Select Image View which you added to Launch Screen and in Inspector (right panel) set Image to asset which you added in previous step
You can also set Content mode where you can define how should be image resized.
That's all. When you click on View as iPhone 7 (or other model) you can see how should be visible the result on particular devices.
Add non-resizable logo to the center of background
For most of the apps following steps are probably not important. It shoud be used if you want to add another image which should not change its size according to screen size.
It's perfect for the case when you want to place inside of the screen some logo which should not be sticked to the borders of the screen. Normally logo on splash screen is vertically (and sometimes also horizontally) centered.
11) Repeat steps 6, 9 and 10 for your logo
12) Set new constraint. For example I can stick logo only from the top and use centering from other directions (you can do it through New alignment constraint by checking Horizontally in container — button with two rectangles in the bar next to the constraints). Or you can center logo from all directions of course. At the end confirm creation of new constraints by pressing Add constraints.
13) Probably right now nothing is changed. In this case you have to press Update frames button which looks like a refresh and it's on the left in the bar with constraints.
14) If you don't have image in proper size you can see something like on screenshot below. In this case you have to add next constraints and define width and height.
In case of defining constraints click again on Update frames (step 13) and everything should be OK now.
If you want to edit some constraint (like change height of the image) you can't use the same way as during its creation. You have to click on small inconspicuous line next to the image and update constraints in inspector (right panel). Be aware that width and height are two separated constraints
All good
Cool, it should work now (but in case of XCode you never know).
When you run your simulator/device you should be able to see your new launch screen in action. If not try to reset Xcode or clear cache (you probably know it if you have worked with XCode before).
Btw there is similar way how to do something similar also on Android. But it's for different article.
