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 😉

 

iOS 11 and Xcode 9 in Qt 5.9.x projects

Just updated Xcode and iOS ? Getting an error like this ?

Missing Info.plist value - A value for the Info.plist key 'CFBundleIconName' is missing in the bundle 'xxxxxxxxxxxxxxx'. Apps built with iOS 11 or later SDK must supply app icons in an asset catalog and must also provide a value for this Info.plist key. For more information see http://help.apple.com/xcode/mac/current/#/dev10510b1f7.

Starting with Xcode 9 your App icons must be provided as part of your asset catalog.

Don’t worry – QtCreator helps you to manage this.

Thx @jakepetroules and @cpluke for your help at QtMob

Create Asset Catalog for your App Icons

The only thing you need is an App Icon in 1024×1024 px

Open this FREE service: https://www.appicon.build/

Drag your AppIcon onto this site and get an email with all recommended sizes – something like this:

• AppIcon.appiconset
  • Contents.json
  • *.png

Contents.json contains all instructions Xcode needs to know HowTo use your icon files.

Hint: For me this worked only using Safari – not from Firefox.

Add AppIcons to your Qt Project

I’m always using a project structure like this

• ProjectFolder
  • ios
    • info.plist
    • *.png

Remove all your App Icon .png and create a new folder ‘Images.xcassets’ and place your AppIcon.appiconset folder into the Images.xcassets folder:

• ProjectFolder
  •  ios
    • info.plist
    • Images.xcassets
      • AppIcon.appiconset
        • Contents.json
        • *.png

 

Edit your info.plist

Remove these keys:

 <key>CFBundleIconFile</key>
 <key>CFBundleIcons</key>

Edit yourproject.pro

Remove the lines where you added your icons to the bundle data and insert under ios {…}:

 QMAKE_ASSET_CATALOGS = $$PWD/ios/Images.xcassets
 QMAKE_ASSET_CATALOGS_APP_ICON = "AppIcon"

The first entry points to your Images.xcassets folder, the second one tells QMAKE that your appiconset is prefixed with AppIcon.

That’s all: now you can compile and run your project using Xcode9 on iOS11 devices.

Hint: perhaps you already used an asset catalog before and still getting an error ?

There’s a new AppIcon size of 1024×1024 required:

{
 "size" : "1024x1024",
 "idiom" : "ios-marketing",
 "filename" : "Icon-App-1024x1024@1x.png",
 "scale" : "1x"
}

Ignore

In one of my projects suddenly at root of the project this file was created:

asset_catalog_compiler.Info.plist

This is a temporary intermediate file, so it’s safe to add it to your .gitignore

HowTo survive as a Qt Newbie

Edited 2016-06-05: Updated for Qt 5.7 RC

My blog series is targeted to mobile app developers coming from the outside without any knowledge of Qt and simply want to develop mobile apps using the newest way: qt.labs.controls (Qt 5.6) / QtQuickControls 2 (Qt 5.7+)

Qt is cool

–> exists since more then 20 years

–> great for Application Development

–> great for Device Creation

–> Qt for mobile, for desktop, for embedded, …

–> sooooo many samples

–> sooooo many targets

–> sooooo many ways to go

–> Qt UI — Widgets — Qt Quick — Qt 5.6/5.7 UI Controls redefined

Confused ?

This is the reason why I’m writing this blog posts to help you finding the shortest path through Qt jungle.

Our goal is mobile APP development using new Controls in Material style for Android and iOS.

Here some first tips to survive:

Ignore Widgets

There are many samples and tutorials you can access from Qt Creator.

If the project uses QtWidgets – please ignore !

QtWidgets are perfect for Desktop APPs and look great on OSX, Windows, Linux using the native controls.

We want to use the new qt.labs.controls (Tech preview in Qt 5.6) for mobile APPs

Import the right Controls

Attention: many sample project are importing Controls 1:

import QtQuick.Controls 1.x

QtQuick Controls 1.x are the Controls used up to Qt 5.6.

The new qt.labs.controls we want to use for mobile APPs are introduced in Qt 5.6 as a TP (Technical Preview).

So for Qt 5.6 you should use

import Qt.labs.controls 1.x

Learn about the differences between the Controls 1.x and qt.labs.controls: https://doc-snapshots.qt.io/qt5-5.6/qtlabscontrols-differences.html

Beginning with Qt 5.7 the new Controls are ‘official’

import QtQuick.Controls 2.x

If you started in Qt 5.6 to learn about the new Controls be aware: API can change for Qt 5.7 and you also have to change your import statements.

Controls too small on Android or iOS ?

While trying out some of the Examples it will happen that all is much too small.

Qt 5.6 introduced HighDPI support on all platforms. This must be switched on.

Easiest way to do this is inside your main.cpp:

QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

Controls not using Material Style ?

Material Style only can be used from qt.labs.controls (Qt 5.6) or QtQuick.Controls 2.x

There are currently three different Styles: Material (Google Material Style), Universal (Windows 10 Universal Style), Default.

You can switch on Material Style easiest way in main.cpp:

Qt 5.6 / 5.7 Beta:

qputenv("QT_LABS_CONTROLS_STYLE", "material");

Qt 5.7 RC or greater:

qputenv("QT_QUICK_CONTROLS_STYLE", "material");

Controls wrong placed ?

Starting with Qt this can happen: all or some of your Controls are placed at Top Left.

Verify if your Controls are placed inside Layouts.

Don’t misuse Positioner and Layouts – per ex. Row and RowLayout

There’s a document about Positioners and Layouts in QML.

---

← Back (HowTo Translations (i18n))

→ Next Article (Qt Quick Controls 2)

⇐ Home (Overview / Topics)

---