Mise en place d'un écran de démarrage avec « Qt Quick » sur Android

Cet exemple simple montre comment utiliser une vue Qml comme écran de démarrage Qt. Aucune transition supplémentaire n'est utilisée. Dans cet exemple, l'écran de démarrage par défaut, introduit dans Android 12, est masqué. Au démarrage de l'application, l'écran de démarrage s'affiche pendant deux secondes, après quoi la vue principale s'affiche sans transition.

Cet exemple fait partie d’une série de deux exemples similaires illustrant l’écran de démarrage. Celui-ci utilise une vue QML, tandis que l’autre utilise des indicateurs AndroidManifest.

Utilisation de la vue « Qt Quick » comme écran de démarrage sur Android

Pour utiliser une vue QML comme écran de démarrage, vous devez définir une vue et y ajouter quelques éléments spécifiques à la fonctionnalité d’écran de démarrage.

Window {
    id: splash
    color: "#2CDE85"
    title: qsTr("Splash Window")
    modality: Qt.ApplicationModal
    flags: Qt.SplashScreen
    visible: true

    property int timeoutInterval: 2000
    signal timeout

• modality: Qt.ApplicationModal définit la vue comme modale.
• flags: Qt.SplashScreen masque la barre de titre.
• property int timeoutInterval: 2000 définit la durée d’affichage de la vue.

Chargement de la vue principale

    Loader {
        id: mainLoader
        source: "Main.qml"

Le minuteur appelle la fonction `exit` à l'expiration du délai pour passer de l'écran de démarrage à la vue principale. Toute animation de sortie éventuelle serait lancée à ce moment-là.

    function exit() {
        mainLoader.item.show();
        splash.visible = false
        splash.timeout()
    }

Le minuteur laisse suffisamment de temps pour que l'écran de démarrage s'affiche. Cela peut être utilisé en conjonction avec le signal ` Loader.loaded()` ou éventuellement avec un autre signal provenant de l'implémentation de l'application lorsque celle-ci est prête à s'afficher.

    Timer {
        interval: splash.timeoutInterval;
        running: splash.visible;
        repeat: false
        onTriggered: {
            splash.exit()
        }
    }

Au lancement, l'écran de démarrage par défaut s'affiche avant que la première vue de l'application ne s'affiche. Consultez la section Écrans de démarrage Android pour savoir comment le modifier.
Par défaut, Android utilise l’icône de l’application comme écran de démarrage. Dans une application Qt pour Android, celle-ci peut être modifiée pour servir d’écran de démarrage à l’application ou être combinée avec l’écran de démarrage Qt.

Masquer l'écran de démarrage natif d'Android

Afin de garantir une expérience utilisateur cohérente au lancement sur toutes les plateformes, il peut s’avérer nécessaire de masquer l’écran de démarrage Android. Pour ce faire, définissez un thème translucide qui masque efficacement l’écran de démarrage Android.

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <style name="splashStartTheme">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowDisablePreview">true</item>
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

Il y a toutefois un problème. Les changements d’orientation ne fonctionnent plus si l’on utilise un thème translucide. Cela est dû au fait que la vue Android hérite de son orientation de la vue sous-jacente, généralement un tiroir d’applications qui ne change pas d’orientation. Et comme le thème ne peut pas être modifié une fois que la vue `Activity` est définie, l’application se retrouve bloquée dans une seule orientation.
Pour contourner ce problème, nous pouvons créer une `Activity` jetable dotée d’un thème translucide pour l’écran de démarrage Android. Dès que possible, nous lançons une autre `Activity`, qui dispose de toutes les fonctionnalités requises par notre application.

        <activity
            android:name=".SplashActivity"
            android:exported="true"
            android:label="QML Splash Screen Example"
            android:theme="@style/splashStartTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

L’écran de démarrage natif d’Android n’ apparaît alors plus, et nous lançons la QtActivity, qui affiche l’écran de démarrage défini en QML. Pour lancer l’écran de démarrage QML, nous devons redéfinir la méthode onCreate de l’activité Android et utiliser un Intent pour lancer la QtActivity.

package io.qt.qmlsplashscreeninandroid;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.util.Log;
import android.content.Intent;
import android.view.ViewTreeObserver;
import org.qtproject.qt.android.bindings.QtActivity;

public class SplashActivity extends Activity {

    private static final String TAG = "SplashActivity";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Set up an OnPreDrawListener to the root view.
        final View content = findViewById(android.R.id.content);
                content.getViewTreeObserver().addOnPreDrawListener(
                        new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                Intent i = new Intent(SplashActivity.this, QtActivity.class);
                i.setFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);
                startActivity(i);

                content.getViewTreeObserver().removeOnPreDrawListener(this);
                finish();
                return true;
            }
        });
    }
}

Enfin, l’écran de démarrage QML ouvre la vue principale, qui, dans cet exemple, ne contient qu’une seule vue dotée d’un bouton de fermeture.

Exemple de projet sur code.qt.io