Premiers pas avec Qt pour Android

Ce tutoriel explique comment utiliser Qt Creator pour développer une application « Qt Quick » destinée aux appareils Android.

Vous allez développer une application « Qt Quick » qui accélère une image SVG (Scalable Vector Graphics) en fonction des variations des valeurs de l’accéléromètre.

Configurer l’environnement de développement

Pour commencer avec Qt pour Android :

1. Téléchargez et installez Qt. Pour ce faire, suivez les instructions de la page « Obtenir et installer Qt ».
2. Installez tous les outils nécessaires et configurez l’environnement de développement comme expliqué dans la section « Prérequis pour Qt pour Android ».

Créer le projet

1. Ouvrez Qt Creator. Accédez à « File » > « New Project » > « Application (Qt) » > Qt Quick Application.

   

2. Sélectionnez « Choose... » pour ouvrir la boîte de dialogue « Project Location ».
3. Dans « Name », saisissez un nom pour l'application.

   

4. Dans « Create in », indiquez le chemin d’accès aux fichiers du projet. Vous pourrez déplacer les dossiers du projet ultérieurement sans aucun problème.
5. Sélectionnez « Next » (ou « Continue » sous macOS) pour ouvrir la boîte de dialogue « Define Project Details ».

   

6. Sélectionnez « Next » (ou « Continue » sous macOS) pour ouvrir la boîte de dialogue « Kit Selection ».
7. Sélectionnez les kits correspondant aux plateformes pour lesquelles vous souhaitez compiler l'application.

   

   Remarque : la liste affiche les kits que vous spécifiez dans « Preferences » > « Kits ». Pour plus d’informations, consultez les sections « Ajouter des kits » et « Gérer les kits ».

8. Sélectionnez « Next » (ou « Continue » sous macOS) pour ouvrir la boîte de dialogue « Project Management ».
9. Vérifiez les paramètres du projet, puis sélectionnez « Finish » (ou « Done » sous macOS) pour créer le projet.

   

Ajouter des images en tant que ressources

La vue principale de l’application affiche une image SVG représentant une bulle qui se déplace à l’écran lorsque vous inclinez l’appareil.

Pour que l’image s’affiche lorsque vous exécutez l’application, vous devez la spécifier en tant que ressource dans l’argument ` RESOURCES ` de la méthode ` qt_add_qml_module() ` dans le fichier ` CMakeLists.txt ` que l’assistant a créé pour vous :

qt_add_qml_module(appaccelbubble
    URI accelbubble
    QML_FILES Main.qml
    RESOURCES Bluebubble.svg
)

Créer la vue principale Accelbubble

1. Dans la vue « Projects », sélectionnez « Main.qml ». Dans le fichier « Main.qml », remplacez le contenu par le code suivant :

   import QtQuick
   import QtQuick.Controls.Material
   
   ApplicationWindow {
       id: mainWindow
       width: 320
       height: 480
       visible: true
       title: qsTr("Accelerate Bubble")
       Image {
           id: bubble
           source: "Bluebubble.svg"
           smooth: true
       }
   
   }

   Ce code modifie les propriétés par défaut de l’ Window et ajoute l’image récemment ajoutée à la vue. Vous pouvez utiliser n’importe quelle autre image ou n’importe quel autre composant à la place.

2. Ajoutez des propriétés personnalisées pour positionner l’image en fonction de la largeur et de la hauteur de la fenêtre principale :

   import QtQuick
   import QtQuick.Controls.Material
   
   ApplicationWindow {
       id: mainWindow
       width: 320
       height: 480
       visible: true
       title: qsTr("Accelerate Bubble")
       Image {
           id: bubble
           source: "Bluebubble.svg"
           smooth: true
           property real centerX: mainWindow.contentItem.width / 2
           property real centerY: mainWindow.contentItem.height / 2
           property real bubbleCenter: bubble.width / 2
           x: centerX - bubbleCenter
           y: centerY - bubbleCenter
       }
   
   }

3. Ajoutez la déclaration d'importation suivante :

   import QtSensors

   Elle est nécessaire car nous souhaitons déplacer la bulle en fonction des valeurs du capteur d'accélération.

4. Ajoutez le composant « Accelerometer » avec les propriétés nécessaires :

   import QtQuick
   import QtQuick.Controls.Material
   import QtSensors
   ApplicationWindow {
       id: mainWindow
       ...
       Accelerometer {
           id: accel
           dataRate: 100
           active: true
       }
       ...

5. Ajoutez les fonctions JavaScript suivantes qui calculent les positions x et y de la bulle en fonction des valeurs actuelles de l'accéléromètre :

   import QtQuick
   import QtQuick.Controls.Material
   import QtSensors
   ApplicationWindow {
       id: mainWindow
       ...
       Accelerometer {
           id: accel
       ...
       }
       function calcPitch(x,y,z) {
           return -Math.atan2(y, Math.hypot(x, z)) * mainWindow.radians_to_degrees;
       }
       function calcRoll(x,y,z) {
           return -Math.atan2(x, Math.hypot(y, z)) * mainWindow.radians_to_degrees;
       }
       ...

6. Ajoutez le code JavaScript suivant pour le signal « onReadingChanged » du composant «Accéléromètre» afin que la bulle se déplace lorsque les valeurs de l'accéléromètre changent :

       Accelerometer {
           id: accel
           dataRate: 100
           active: true
           onReadingChanged: {
               var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * .1)
               var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * .1)
   
               if (isNaN(newX) || isNaN(newY))
                   return;
   
               if (newX < 0)
                   newX = 0
   
               if (newX > mainWindow.contentItem.width - bubble.width)
                   newX = mainWindow.contentItem.width - bubble.width
   
               if (newY < 0)
                   newY = 0
   
               if (newY > mainWindow.contentItem.height - bubble.height)
                   newY = mainWindow.contentItem.height - bubble.height
   
               bubble.x = newX
               bubble.y = newY
           }
       }

   Vous devez vous assurer que la position de la bulle reste toujours dans les limites de l'écran. Si l'accéléromètre renvoie une valeur non numérique (NaN), celle-ci est ignorée et la position de la bulle n'est pas mise à jour.

7. Ajoutez un comportement « SmoothedAnimation » aux propriétés « x » et « y » de la bulle pour rendre son mouvement plus fluide.

       Image {
           id: bubble
           source: "Bluebubble.svg"
           smooth: true
       ...
           Behavior on y {
               SmoothedAnimation {
                   easing.type: Easing.Linear
                   duration: 100
               }
           }
           Behavior on x {
               SmoothedAnimation {
                   easing.type: Easing.Linear
                   duration: 100
               }
           }
       ...

Verrouiller l’orientation de l’appareil

Par défaut, l'affichage pivote lorsque l'orientation de l'appareil passe du mode portrait au mode paysage. Cette application s'affiche mieux si vous verrouillez l'orientation de l'écran en mode portrait.

Sous Android, vous définissez l’orientation de l’écran dans le fichier ` AndroidManifest.xml `, que vous générez dans ` Qt Creator`. Pour verrouiller l’orientation en mode portrait :

1. Accédez à Tools > Android > Manifest XML Source. La commande « Qt Creator » crée le fichier dans un répertoire « android » situé à l’intérieur du répertoire de votre projet et l’ouvre dans l’éditeur de manifeste.
2. Dans l’éditeur de manifeste, sélectionnez « XML Source » et définissez l’attribut « android:screenOrientation » de l’élément « activity » sur « portrait ».

   <?xml version='1.0'?>
   <manifest ...>
       <supports-screens.../>
       <!--%%INSERT_PERMISSIONS-->
       <!--%%INSERT_FEATURES-->
       <application ...>
           <activity ... android:screenOrientation="portrait">
       ...

   Pour plus d’informations, consultez la section Modifier les fichiers de manifeste Android.

Ajouter des dépendances

L'application utilise les modules « Qt Sensors » et « Qt SVG » ; vous devez donc les ajouter en tant que dépendances dans le fichier « CMakeLists.txt ». Pour ajouter les dépendances :

1. Ajoutez les composants Sensors et Svg à la fonction find_package. Cela indique à CMake de rechercher l’installation de Qt et d’importer les modules :

   find_package(Qt6 REQUIRED COMPONENTS Quick Sensors Svg)

2. Ajoutez les cibles importées à la fonction ` target_link_libraries ` :

   target_link_libraries(appaccelbubble
       PRIVATE Qt6::Quick Qt6::Sensors Qt6::Svg)

   Cela indique à CMake que l’exécutable ` accelbubble ` utilise ces modules. CMake transmet ensuite les arguments nécessaires à l’éditeur de liens, ainsi que les répertoires d’inclusion et les définitions de compilateur appropriés au compilateur C++.

3. Pour appliquer les modifications de configuration, accédez à Build et sélectionnez « Run CMake ».

Pour plus d’informations sur le fichier CMakeLists.txt, consultez la section « Premiers pas avec CMake ».

Exécuter l’application

Vous pouvez désormais déployer l’application sur un appareil Android réel ou virtuel.

Si vous utilisez un appareil physique :

1. Activez le débogage USB sur l’appareil Android.
2. Connectez l’appareil au PC de développement.

Si plusieurs appareils sont connectés, l'Qt Creator e vous permet de sélectionner celui sur lequel vous souhaitez exécuter l'application.

Pour exécuter l'application sur l'appareil, appuyez sur Ctrl+R (Cmd+R).

Une fois l'application lancée sur l'appareil, vous pouvez incliner celui-ci pour voir la bulle se déplacer à l'écran. La bulle se déplace dans le sens de l'inclinaison, et la vitesse de déplacement dépend de l'angle d'inclinaison. Plus vous inclinez l'appareil, plus la bulle se déplace rapidement.