Qt Quick pour les projets Android Studio

Qt Quick Les exemples d'API pour Android sont des projets Android Studio

Les exemples de l'API « Qt Quick » pour Android sont fournis sous forme de projets Android Studio. Les dossiers de projet se trouvent dans le répertoire d'installation de Qt.

Par exemple, sous le chemin d'installation par défaut sous Windows, ils se trouvent ici :

C:\Qt\Examples\Qt-<patch-release-number>\platforms\android\<example-name>

Ces projets sont déjà configurés pour utiliser une version du plugin Gradle Qt compatible avec cette version de Qt.

Présentation

Cet exemple contient un projet Qml que vous pouvez importer dans Android Studio à l’aide du plugin Qt Tools for Android Studio. Il existe des projets Java et Kotlin qui utilisent le projet Qml comme vue (View) grâce à l’API QtQuickView.

Pour plus d’informations sur le fonctionnement de QML, consultez Qt Qml. Cette documentation se concentre sur la manière dont un composant QML est intégré dans des applications Android à l’aide de Java ou de Kotlin.

Des modifications dans « main() » sont requises par les API « Qt Quick » pour Android

Le fichier main.cpp d’une application Qt Quick type se présente comme suit :

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    QObject::connect(
        &engine,
        &QQmlApplicationEngine::objectCreationFailed,
        &app,
        []() { QCoreApplication::exit(-1); },
        Qt::QueuedConnection);
    engine.loadFromModule("MyQtQuickProject", "Main");

    return app.exec();
}

Dans main(), il n’est pas nécessaire de créer un moteur QML ni de charger du code QML qui sera géré ultérieurement par les API de vue d’ Qt Quick. Tout ce dont nous avons besoin dans main() est :

#include <QGuiApplication>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    return app.exec();
}

Configuration de la mise en page

Pour les projets Java et Kotlin, nous devons configurer la mise en page des QtQuickViewsdans app/src/main/res/layout/activity_main.xml.

À l’intérieur du fichier LinearLayout, nous configurons deux FrameLayouts pour chaque QtQuickView.

 <FrameLayout
    android:id="@+id/firstQmlFrame"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">
</FrameLayout>

<FrameLayout
    android:id="@+id/secondQmlFrame"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">
</FrameLayout>

Le fichier id est celui auquel fait référence la classe MainActivity codée en Kotlin ou en Java.

Importation des classes Java générées automatiquement pour les types QML

Les classes Java correspondant à nos types QML sont générées lors de la compilation du projet « Qt Quick ». Elles doivent être importées avant de pouvoir être utilisées dans notre MainActivity.

import org.qtproject.example.qtquickview.QmlModule.Main;
import org.qtproject.example.qtquickview.QmlModule.Second;

import org.qtproject.example.qtquickview.QmlModule.Main
import org.qtproject.example.qtquickview.QmlModule.Second

Méthode onCreate() de MainActivity

Nous allons tout d’abord examiner la méthode onCreate() de la classe ` MainActivity` dans les projets Java et Kotlin.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    m_qmlViewBackgroundText = findViewById(R.id.qmlViewBackgroundText);
    m_qmlStatus = findViewById(R.id.qmlStatusText);
    m_androidControlsLayout = findViewById(R.id.javaRelative);
    m_colorBox = findViewById(R.id.qmlColorBox);
    m_switch = findViewById(R.id.disconnectQmlListenerSwitch);
    m_switch.setOnClickListener(view -> switchListener());
    QtQuickView m_firstQuickView = new QtQuickView(this);
    QtQuickView m_secondQuickView = new QtQuickView(this);

    // Set status change listener for m_qmlView
    // listener implemented below in OnStatusChanged
    m_firstQmlContent.setStatusChangeListener(this);
    m_secondQmlContent.setStatusChangeListener(this);
    final ViewGroup.LayoutParams params = new FrameLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    FrameLayout m_firstQmlFrameLayout = findViewById(R.id.firstQmlFrame);
    m_firstQmlFrameLayout.addView(m_firstQuickView, params);
    FrameLayout m_secondQmlFrameLayout = findViewById(R.id.secondQmlFrame);
    m_secondQmlFrameLayout.addView(m_secondQuickView, params);
    m_firstQuickView.loadContent(m_firstQmlContent);
    m_secondQuickView.loadContent(m_secondQmlContent);

    Button m_changeColorButton = findViewById(R.id.changeQmlColorButton);
    m_changeColorButton.setOnClickListener(view -> onClickListener());
    Button m_rotateQmlGridButton = findViewById(R.id.rotateQmlGridButton);
    m_rotateQmlGridButton.setOnClickListener(view -> rotateQmlGrid());
}

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    m_binding = ActivityMainBinding.inflate(layoutInflater)
    val view = m_binding.root
    setContentView(view)

    m_binding.disconnectQmlListenerSwitch.setOnCheckedChangeListener { button, checked ->
        switchListener(
            button,
            checked
        )
    }

    val firstQtQuickView = QtQuickView(this)
    val secondQtQuickView = QtQuickView(this)

    // Set status change listener for m_qmlView
    // listener implemented below in OnStatusChanged
    m_firstQmlContent.setStatusChangeListener(this)
    m_secondQmlContent.setStatusChangeListener(this)

    val params: ViewGroup.LayoutParams = FrameLayout.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT
    )
    m_binding.firstQmlFrame.addView(firstQtQuickView, params)
    m_binding.secondQmlFrame.addView(secondQtQuickView, params)
    firstQtQuickView.loadContent(m_firstQmlContent)
    secondQtQuickView.loadContent(m_secondQmlContent)

    m_binding.changeQmlColorButton.setOnClickListener { onClickListener() }
    m_binding.rotateQmlGridButton.setOnClickListener { rotateQmlGrid() }
}

m_binding = ActivityMainBinding.inflate(layoutInflater)
val view = m_binding.root
setContentView(view)

Dans la méthode ` onCreate() `, les variables déclarées précédemment sont initialisées avec de nouvelles instances de `QtQuickView`. Ces instances prennent comme arguments l'Context de l'activité Java/Kotlin.

QtQuickView m_firstQuickView = new QtQuickView(this);
QtQuickView m_secondQuickView = new QtQuickView(this);

val firstQtQuickView = QtQuickView(this)
val secondQtQuickView = QtQuickView(this)

Les instances QtQuickView sont ajoutées à la mise en page Android avec les paramètres de mise en page appropriés.

final ViewGroup.LayoutParams params = new FrameLayout.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
FrameLayout m_firstQmlFrameLayout = findViewById(R.id.firstQmlFrame);
m_firstQmlFrameLayout.addView(m_firstQuickView, params);
FrameLayout m_secondQmlFrameLayout = findViewById(R.id.secondQmlFrame);
m_secondQmlFrameLayout.addView(m_secondQuickView, params);

val params: ViewGroup.LayoutParams = FrameLayout.LayoutParams(
    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT
)
m_binding.firstQmlFrame.addView(firstQtQuickView, params)
m_binding.secondQmlFrame.addView(secondQtQuickView, params)

Les classes Java ` Main ` et ` Second ` héritent de la classe `QtQuickViewContent`. Ces classes sont générées à partir du projet QML que nous avons importé.

private final Main m_firstQmlContent = new Main();
private final Second m_secondQmlContent = new Second();

private val m_firstQmlContent: Main = Main()
private val m_secondQmlContent: Second = Second()

Le contenu de l'Qt Quick est chargé via la méthode QtQuickView.loadContent(), qui prend un objet QtQuickViewContent en argument.

m_firstQuickView.loadContent(m_firstQmlContent);
m_secondQuickView.loadContent(m_secondQmlContent);

firstQtQuickView.loadContent(m_firstQmlContent)
secondQtQuickView.loadContent(m_secondQmlContent)

Interaction avec les composants QML

Pour interagir avec les composants QML intégrés, nous implémentons l'interface QtQmlStatusChangeListener et redéfinissons la méthode onStatusChanged afin d'obtenir l'état de chargement du QtQuickViewContent en cours de chargement dans le QtQuickView.

public class MainActivity extends AppCompatActivity implements
QtQmlStatusChangeListener {
    ...
}

class MainActivity : AppCompatActivity(), QtQmlStatusChangeListener {
    ...
}

Implémentation de l'onStatusChanged:

@Override
public void onStatusChanged(QtQmlStatus qtQmlStatus, QtQuickViewContent content) {
    Log.i(TAG, "Status of QtQuickView: " + qtQmlStatus);

    // Show current QML View status in a textview
    m_qmlStatus.setText(getString(R.string.qml_view_status, m_statusNames.get(qtQmlStatus)));
    updateColorDisplay();

    if (content == m_firstQmlContent) {
        // Connect signal listener to "onClicked" signal from main.qml
        // addSignalListener returns int which can be used later to identify the listener
        if (qtQmlStatus == QtQmlStatus.READY && m_switch.isChecked()) {
            m_qmlButtonSignalListenerId = m_firstQmlContent.connectOnClickedListener(
                    (String name, Void v) -> {
                        Log.i(TAG, "QML button clicked");
                        m_androidControlsLayout.setBackgroundColor(Color.parseColor(
                                m_colors.getColor()
                        ));
                    });
        }
    }
}

override fun onStatusChanged(status: QtQmlStatus?, content: QtQuickViewContent?) {
    Log.v(TAG, "Status of QtQuickView: $status")

    // Show current QML View status in a textview
    m_binding.qmlStatusText.text = getString(R.string.qml_view_status, m_statusNames[status])

    updateColorDisplay()

    if (content == m_firstQmlContent) {
        // Connect signal listener to "onClicked" signal from main.qml
        // addSignalListener returns int which can be used later to identify the listener
        if (status == QtQmlStatus.READY && m_binding.disconnectQmlListenerSwitch.isChecked) {
            m_qmlButtonSignalListenerId =
                m_firstQmlContent.connectOnClickedListener { _: String, _: Void? ->
                    Log.i(TAG, "QML button clicked")
                    m_binding.kotlinRelative.setBackgroundColor(
                        Color.parseColor(
                            m_colors.getColor()
                        )
                    )
                }
        }
    }
}

L'MainActivity est défini comme l'statusChangeListener de m_mainQmlContent et m_secondQmlContent à l'aide de la méthode QtQuickViewContent.setStatusChangeListener.

m_firstQmlContent.setStatusChangeListener(this);
m_secondQmlContent.setStatusChangeListener(this);

m_firstQmlContent.setStatusChangeListener(this)
m_secondQmlContent.setStatusChangeListener(this)

La fonction de rappel redéfinie ` onStatusChanged() ` reçoit le signal ` StatusChanged() ` contenant l'état actuel, une énumération `QtQmlStatus`, du chargement de l'QtQuickViewContent s actuel dans la `QtQuickView`. S'il est confirmé que cet ` QtQmlStatus ` est ` QtQmlStatus.READY`, nous pouvons commencer à interagir avec la vue QML.

Récupération et définition des valeurs des propriétés des composants QML

La lecture et la modification des valeurs des propriétés des composants QML s’effectuent via les méthodes décrites dans la classe ` Main.java `. Dans ce cas, nous utilisons les méthodes ` m_mainQmlContent.setColorStringProperty() ` et ` m_mainQmlContent.getColorStringProperty() `. Ces méthodes sont générées en fonction des propriétés incluses par le composant QML.

public void onClickListener() {
    // Set the QML view root object property "colorStringFormat" value to
    // color from Colors.getColor()
    m_firstQmlContent.setColorStringFormat(m_colors.getColor());
    updateColorDisplay();
}
private void updateColorDisplay() {
    String qmlBackgroundColor = m_firstQmlContent.getColorStringFormat();
    // Display the QML View background color code
    m_qmlViewBackgroundText.setText(qmlBackgroundColor);

    // Display the QML View background color in a view
    // if qmlBackGroundColor is not null
    if (qmlBackgroundColor != null) {
        m_colorBox.setBackgroundColor(Color.parseColor(qmlBackgroundColor));
    }
}

private fun onClickListener() {
    // Set the QML view root object property "colorStringFormat" value to
    // color from Colors.getColor()
    m_firstQmlContent.colorStringFormat = m_colors.getColor()
    updateColorDisplay()
}

private fun updateColorDisplay() {
    val qmlBackgroundColor = m_firstQmlContent.colorStringFormat
    // Display the QML View background color code
    m_binding.qmlViewBackgroundText.text = qmlBackgroundColor
    // Display the QML View background color in a view
    // if qmlBackgroundColor is not null
    if (qmlBackgroundColor != null) {
        m_binding.qmlColorBox.setBackgroundColor(Color.parseColor(qmlBackgroundColor))
    }
}

Avec la méthode ` m_mainQmlContent.setColorStringProperty() `, nous attribuons à la propriété ` colorStringFormat ` de l'objet ` m_mainQmlContent ` une valeur de couleur aléatoire récupérée à partir de la classe ` Colors.java ` (ou ` Colors.kt`).

La méthode ` m_mainQmlContent.getColorStringProperty() ` est utilisée ici pour récupérer la couleur d’arrière-plan actuelle de l’objet racine de `m_mainQmlContent`, puis l’afficher à l’utilisateur du côté Java/Kotlin de l’application Android.

m_secondQmlContent Il existe un composant QML « Grid » que nous pouvons faire pivoter depuis le côté Java à l’aide de la méthode générée « m_secondQmlContent.setGridRotation() ».

private void rotateQmlGrid() {
    Integer previousGridRotation = m_secondQmlContent.getGridRotation();
    if (previousGridRotation != null) {
        m_secondQmlContent.setGridRotation(previousGridRotation + 45);
    }
}

private fun rotateQmlGrid() {
    val previousGridRotation = m_secondQmlContent.gridRotation
    if (previousGridRotation != null) {
        m_secondQmlContent.gridRotation = previousGridRotation + 45
    }
}

Écouteurs de signaux

La classe ` QtQuickViewContent ` propose des méthodes ` connectSignalListener() ` et ` disconnectSignalListener() ` qui permettent de connecter et de déconnecter des écouteurs de signaux entre les signaux déclarés dans l’objet racine du composant QML. La méthode ` QtQuickViewContent.connectSignalListener() ` renvoie un identifiant unique d’écouteur de signal, que nous stockons et utilisons ultérieurement pour identifier et déconnecter l’écouteur.

Ici, nous connectons un écouteur de signal au signal « onClicked() » du composant QML :

if (qtQmlStatus == QtQmlStatus.READY && m_switch.isChecked()) {
    m_qmlButtonSignalListenerId = m_firstQmlContent.connectOnClickedListener(
            (String name, Void v) -> {
                Log.i(TAG, "QML button clicked");
                m_androidControlsLayout.setBackgroundColor(Color.parseColor(
                        m_colors.getColor()
                ));
            });
}

if (status == QtQmlStatus.READY && m_binding.disconnectQmlListenerSwitch.isChecked) {
    m_qmlButtonSignalListenerId =
        m_firstQmlContent.connectOnClickedListener { _: String, _: Void? ->
            Log.i(TAG, "QML button clicked")
            m_binding.kotlinRelative.setBackgroundColor(
                Color.parseColor(
                    m_colors.getColor()
                )
            )
        }
}

Le signal « onClicked() » est émis à chaque fois que l'on clique sur le bouton du composant QML. Cet écouteur reçoit alors ce signal, et la couleur d'arrière-plan de la mise en page contenant la partie Android de l'application est définie sur une valeur de couleur aléatoire extraite de la classe « Colors.java ».

Ensuite, l’écouteur de signal est déconnecté à l’aide de la méthode ` QtQuickViewContent.disconnectSignalListener() ` en lui transmettant l’identifiant unique de l’écouteur de signal.

m_firstQmlContent.disconnectSignalListener(m_qmlButtonSignalListenerId);

m_firstQmlContent.disconnectSignalListener(m_qmlButtonSignalListenerId)

Si ce n'est pas déjà fait, consultez le cours « Qt Academy : Intégration de contenu 3D d'Qt Quick dans une application Android », qui présente les outils et les API mentionnés dans cet exemple.