Erste Schritte mit Qt für Android

Dieses Tutorial beschreibt, wie Sie mit „ Qt Creator “ eine „ Qt Quick “-Anwendung für Android-Geräte entwickeln.

Sie entwickeln eine „ Qt Quick “-Anwendung, die ein SVG-Bild (Scalable Vector Graphics) basierend auf sich ändernden Beschleunigungssensorwerten beschleunigt.

Einrichten der Entwicklungsumgebung

So beginnen Sie mit Qt für Android:

1. Laden Sie Qt herunter und installieren Sie es. Befolgen Sie dazu die Anweisungen auf der Seite „Qt herunterladen und installieren “.
2. Installieren Sie alle erforderlichen Tools und konfigurieren Sie die Entwicklungsumgebung wie unter „Voraussetzungen für Qt für Android“ beschrieben.

Erstellen Sie das Projekt

1. Öffnen Sie „ Qt Creator “. Gehen Sie zu „ File “ > „ New Project “ > „ Application (Qt) “ > Qt Quick Application.

   

2. Wählen Sie „ Choose... “, um das Dialogfeld „ Project Location “ zu öffnen.
3. Geben Sie unter „ Name “ einen Namen für die Anwendung ein.

   

4. Geben Sie unter „ Create in “ den Pfad für die Projektdateien ein. Sie können Projektordner später problemlos verschieben.
5. Wählen Sie „ Next “ (oder „ Continue “ unter macOS), um den Dialog „ Define Project Details “ zu öffnen.

   

6. Wählen Sie „ Next “ (oder unter macOS „ Continue “), um den Dialog „ Kit Selection “ zu öffnen.
7. Wählen Sie die Kits für die Plattformen aus, für die Sie die Anwendung erstellen möchten.

   

   Hinweis: Die Liste enthält die Kits, die Sie unter „ Preferences “ > „ Kits “ angegeben haben. Weitere Informationen finden Sie unter „Kits hinzufügen “ und „Kits verwalten“.

8. Wählen Sie „ Next “ (oder „ Continue “ unter macOS), um das Dialogfeld „ Project Management “ zu öffnen.
9. Überprüfen Sie die Projekteinstellungen und wählen Sie „ Finish “ (bzw. „ Done “ unter macOS), um das Projekt zu erstellen.

   

Bilder als Ressourcen hinzufügen

In der Hauptansicht der Anwendung wird ein SVG-Blasenbild angezeigt, das sich auf dem Bildschirm bewegt, wenn Sie das Gerät neigen.

Damit das Bild beim Ausführen der Anwendung angezeigt wird, müssen Sie es als Ressource im Argument „ RESOURCES “ der Methode „ qt_add_qml_module() “ in der Datei „ CMakeLists.txt “ angeben, die der Assistent für Sie erstellt hat:

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

Erstellen Sie die Hauptansicht „Accelbubble“

1. Wählen Sie in der Ansicht „ Projects “ die Option „ Main.qml “ aus. Ersetzen Sie in der Datei „ Main.qml “ den Inhalt durch den folgenden Code:

   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
       }
   
   }

   Dieser Code ändert die Standardeigenschaften von „ Window “ und fügt das soeben hinzugefügte Bild zur Ansicht hinzu. Sie können stattdessen auch jedes andere Bild oder jede andere Komponente verwenden.

2. Fügen Sie benutzerdefinierte Eigenschaften hinzu, um das Bild entsprechend der Breite und Höhe des Hauptfensters zu positionieren:

   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. Fügen Sie die folgende Importanweisung hinzu:

   import QtSensors

   Dies ist erforderlich, da wir die Blase anhand der Werte des Beschleunigungssensors verschieben möchten.

4. Fügen Sie die Komponente „ Accelerometer “ mit den erforderlichen Eigenschaften hinzu:

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

5. Fügen Sie die folgenden JavaScript-Funktionen hinzu, die die x- und y-Position der Blase anhand der aktuellen Beschleunigungssensorwerte berechnen:

   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. Fügen Sie den folgenden JavaScript-Code für das Signal „ onReadingChanged “ der Beschleunigungssensor-Komponente hinzu, damit sich die Blase bewegt, wenn sich die Beschleunigungssensorwerte ändern:

       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
           }
       }

   Sie müssen sicherstellen, dass sich die Position der Blase stets innerhalb der Bildschirmgrenzen befindet. Wenn der Beschleunigungssensor keinen numerischen Wert (NaN) zurückgibt, wird der Wert ignoriert und die Position der Blase nicht aktualisiert.

7. Fügen Sie ein „ SmoothedAnimation “-Verhalten für die Eigenschaften „ x “ und „ y “ der Blase hinzu, damit sich deren Bewegung flüssiger anzeigt.

       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
               }
           }
       ...

Geräteausrichtung sperren

Standardmäßig dreht sich die Anzeige, wenn sich die Geräteausrichtung zwischen Hoch- und Querformat ändert. Diese Anwendung sieht besser aus, wenn Sie die Bildschirmausrichtung auf das Hochformat festlegen.

Unter Android legen Sie die Bildschirmausrichtung in der Datei „ AndroidManifest.xml “ fest, die Sie unter „ Qt Creator “ generieren. So fixieren Sie die Ausrichtung im Hochformat:

1. Gehen Sie zu „ Tools “ > „ Android “ > „ Manifest XML Source “. Mit dem Befehl „ Qt Creator “ wird die Datei in einem „android“- Verzeichnis innerhalb Ihres Projektverzeichnisses erstellt und im Manifest-Editor geöffnet.
2. Wählen Sie im Manifest-Editor „ XML Source “ aus und setzen Sie das Attribut „ android:screenOrientation “ des Elements „ activity “ auf „ portrait “.

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

   Weitere Informationen finden Sie unter „Android-Manifest-Dateien bearbeiten“.

Abhängigkeiten hinzufügen

Die Anwendung verwendet die Module „ Qt Sensors “ und „ Qt SVG “, daher sollten Sie diese als Abhängigkeiten in der Datei „ CMakeLists.txt “ hinzufügen. So fügen Sie die Abhängigkeiten hinzu:

1. Fügen Sie die Komponenten „ Sensors “ und „ Svg “ zur Funktion „ find_package “ hinzu. Dadurch wird CMake angewiesen, die Qt-Installation zu suchen und die Module zu importieren:

   find_package(Qt6 REQUIRED COMPONENTS Quick Sensors Svg)

2. Fügen Sie die importierten Ziele zur Funktion „ target_link_libraries “ hinzu:

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

   Dadurch wird CMake mitgeteilt, dass die ausführbare Datei „ accelbubble “ die Module verwendet. CMake übergibt daraufhin die erforderlichen Argumente an den Linker sowie die entsprechenden Include-Verzeichnisse und Compiler-Definitionen an den C++-Compiler.

3. Um die Konfigurationsänderungen zu übernehmen, gehen Sie zu „ Build “ und wählen Sie „ Run CMake “ aus.

Weitere Informationen zur Datei „ CMakeLists.txt “ finden Sie unter „Erste Schritte mit CMake“.

Führen Sie die Anwendung aus

Sie können die Anwendung nun auf einem echten oder virtuellen Android-Gerät bereitstellen.

Wenn Sie ein echtes Gerät verwenden:

1. Aktivieren Sie das USB-Debugging auf dem Android-Gerät.
2. Schließen Sie das Gerät an den Entwicklungs-PC an.

Wenn mehrere Geräte angeschlossen sind, können Sie über „ Qt Creator “ das Gerät auswählen, auf dem die Anwendung ausgeführt werden soll.

Um die Anwendung auf dem Gerät auszuführen, drücken Sie Strg+R (Cmd+R).

Sobald die Anwendung auf dem Gerät gestartet ist, können Sie das Gerät neigen, um zu sehen, wie sich die Blase über den Bildschirm bewegt. Die Blase bewegt sich in Neigungsrichtung, und die Geschwindigkeit der Bewegung hängt vom Neigungswinkel ab. Je stärker Sie das Gerät neigen, desto schneller bewegt sich die Blase.