In June 2019 (WWDC 19) Apple announced that starting in April 2020 there will be a new requirement for Apps: you must use Xcode’s storyboard to create your splash screen. Over all the years I’ve used .xib files for splash screens and of course I thought there’s so much time to implement, put it on my ToDo … and finally forgot to change my apps.
Fortunately Apple gives you some more time:
As you probably know I’m not a native iOS developer – I’m doing most of my work with Qt and only use Xcode to upload my apps to the store or export to enterprise customers.
Found some useful blogs about storyboard splash screens:
But I didn’t found any documentation HowTo create a splash screen using Xcode’s storyboard and to integrate this into your Qt build workflow. In the end it was easier as I thought.
I’m always only using a very simple splash screen where I show my app logo centered. My Qt apps are starting extremely fast, so I don’t need more infos on my splash screen, because there’s not enough time to read some text or enjoy the design. If you take a look at the 2 blogs mentioned above you’ll find other ways do design the UI of your splash screen if a centered app logo isn’t enough.
Here’s a step-by-step guide to move your Qt projects from XIB to Storyboard:
Current Settings (xib)
From my info.plist Xcode know the name of my splash screen – in this case MyLaunchScreen.
Here’s the ios part of my Qt project file (.pro) to let Qt know about the location and name of my launch screen MyLaunchScreen.xib.
I also placed the .xib location under OTHER_FILES to make the file visible in QtCreator Project Tree.
here’s the splash screen as part of QtC Project tree:
Splash Screen (.xib) in Xcode
Build your project with QtCreator and open your generated Xcode project:
You’ll find MyLaunchScreen.xib in Xcode under Project –> Bundle Data and also from General tab under App Icons and Launch Images, where MyLaunchScreen is placed without the .xib file extension-
Create a new Storyboard Splash Screen
Now it’s time to create a new storyboard from Bundle Data –> New File:
Select Launch Screen:
Xcode wants to create a Launch Screen.storyboard inside your current Xcode project dir.
Attention: don’t store the storyboard at default location ! Building your project from QtCreator will delete the file if you clean the build dir from QtC.
I changed the filename to the same one I used before (MyLaunchScreen) – then I don’t have to change anything inside my info.plist where the LaunchScreen is defined without file extension. (Also I always try to avoid filenames with spaces inside)
As location I selected my Qt project directory and saved the new storyboard at the same location as the old .xib file:
Now inside Xcode the new storyboard was listed under Bundle Data besides the old .xib file:
Design your Storyboard Splash Screen
My splash screen only shows a centered app logo, so as first step I delete default Label and Text:
Now I want to add my app logo. One of the screenshots above with Xcode project tree shows the app logo:
your app –> Bundle Data:
Please tap on the ‘+’ tab and drag one of the iTunesArtwork@x.png into the workspace.
Now you’ll see the image here:
View Controller Scene –> View –> xxx.png
At the right part you can see the defaults for this image. For me important: View –> Content Mode: Aspect Fit
As next please resize the Image so it fits into the iPhone screen:
now it looks better:
Of course it should look good on all iPhone- and iPad – sizes.
To guarantee this we have to add some constraints. My app logo should fill out the available space without borders, so I Add New Constraints (0 for top, bottom, left, right) – Remember: Aspect Fit is set as default, so nothing will be lost or stretched.
Tap on the 4 dotted lines to enable constraints for all directions:
Don’t forget to tap on the Add 4 Constraints button.
To verify if it works as expected, select different devices and orientations. Now the most work is done.
The good thing: this storyboard uses an image with same name and location in all my projects: Bundle Data –> iTunesArtwork.png, so I can copy and re-use this storyboard.
Now back to QtCreator.
Change Projectfile (.pro)
As first step under OTHER_FILES I rename .xib into .storyboard:
under iOS I rename MylaunchScreen.xib into MyLaunchScreen.storyboard:
Clean your project and delete the build dir, to see if all works as expected.
Save Changes (git)
Let’s take a look at git to verify the changes you have done in your project. (see screenshot below)
now it’s easy to get the new storyboard splash screen into your other projects: just copy MyLaunchScreen.storyboard into the target project, delete the .xib file and do the changes inside .pro – that’s all !
Build, Deploy, Test – Splash Screen not changed ?
Now you can build, deploy and enjoy your new splash screen.
uuups: there’s still the old splash screen ?
Go back to Xcode: there’s the new storyboard splash screen.
Attention: You probably run into a some-years-old-iOS-bug where iOS doesn’t detect the new splash screen and takes an old one from cache. Take a look at this discussion.
In most cases this helps for me:
- delete app from iPhone / iPad
- reboot device
- install app again
Sometimes even this doesn’t work. But the most important thing: Apple is happy and you’ll get no problems uploading your app to AppStore, because you’re using a storyboard – even if iOS is still using the old one from cache 😉