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.
Thx @grecko and @Maciej Węglarczyk for your help at QtMob
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 😉