Mise en œuvre d'un écran d'accueil avec Qt Quick sur Android

Cet exemple simple démontre l'utilisation d'une vue Qt Qml comme écran d'accueil 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 caché. Lorsque l'application démarre, l'écran d'accueil est affiché pendant deux secondes, après quoi la vue principale est affichée sans transition.

Cet exemple fait partie d'une série de deux exemples similaires illustrant l'écran de démarrage. Celui-ci utilise la vue QML, l'autre utilise les drapeaux AndroidManifest.

Utilisation de l'écran de démarrage Qt Quick sur Android

Pour utiliser une vue QML en tant qu'écran d'accueil, vous devez définir une vue et ajouter quelques éléments spécifiques à la fonctionnalité d'écran d'accueil.

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 modalité de la vue.
• flags: Qt.SplashScreen masque la barre de titre
• property int timeoutInterval: 2000 définit la durée de visibilité de la vue.

Chargement de la vue principale

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

La minuterie appelle la fonction exit au bout d'un certain temps pour passer de l'écran de démarrage à la vue principale. Toutes les animations de sortie possibles sont lancées à ce moment-là.

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

La minuterie laisse suffisamment de temps à l'écran de démarrage pour s'afficher. Il 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 l'application est prête à être affichée.

    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 la première vue de l'application. Voir Ecrans de démarrage Android pour les instructions sur la modification de cet écran.
Par défaut, Android utilise l'icône de l'application pour l'écran de démarrage. Dans une application Qt pour Android, cette icône peut être modifiée pour être utilisée comme écran de démarrage de l'application ou combinée avec l'écran de démarrage Qt.

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

Pour que l'expérience utilisateur au lancement reste cohérente d'une plateforme à l'autre, il peut être nécessaire de masquer l'écran d'accueil d'Android. Pour ce faire, définissez un thème translucide qui masque efficacement l'écran d'accueil d'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 cependant un problème. Les changements d'orientation ne fonctionnent plus si nous avons un thème translucide. Cela est dû au fait que la vue Android obtient son orientation de la vue sous-jacente, généralement un tiroir d'application 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, nous nous retrouvons avec une application bloquée dans une seule orientation.
En guise de solution de contournement, nous pouvons créer une activité jetable avec un thème translucide pour l'écran d'accueil d'Android. Dès que possible, nous lançons une autre activité, qui dispose de toutes les fonctionnalités nécessaires à 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>

À présent, l'écran d'accueil natif d'Android n' est pas affiché, et nous lançons la QtActivity, qui affiche l'écran d'accueil défini en QML. Pour lancer l'écran d'accueil QML, nous devons remplacer 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 d'accueil QML ouvre la vue principale qui, dans cet exemple, ne contient qu'une seule vue avec un bouton de fermeture.

Exemple de projet @ code.qt.io