Qt iOS Splash Screen with Storyboard

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:

• Change splash screen in iOS app for dummies
• React Native iOS Splash Screen with Storyboard

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:

• iTunesArtwork@1.png
• iTunesArtwork@2.png
• iTunesArtwork@3.png

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 Project

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 😉