Qt Android – Hello Android!

Tworzymy pierwszą aplikację na Androida przy użyciu Qt.

Edit & Design Mode


W tym rozdziale przyjrzymy się dokładniej „widokom” (trybom), jakie oferuje nam Qt Creator do edycji aplikacji, a są nimi:

  • Edit mode
  • Design mode

 

Edit mode

Tryb edycji służy do manualnego edytowania kodu (skrypty QML można także edytować w trybie Design), tzn to właśnie w nim piszemy samodzielnie kod, znany jest już nam z [Qt Desktop].

qt-qedit-mode

  1. Active Projects – jest drzewkiem aktualnie otworzonych projektów ułożonych w hierarchię
  2. Open Documents – lista aktualnie otworzonych dokumentów
  3. Editor – edytor kodu źródłowego.

 

Hierarchia Projektu

qt-edit-mode-hierarchy

Warto zauważyć w jaki sposób układane są pliki źródłowe projektu oraz co zawierają:

  • hello-android/ – jest to główny folder projektu (root)
    • „hello-android.pro” – jest plikiem konfiguracyjnym projektu (wykorzystywanym przez qmake), w którym możemy m.in. dodawać kolejne moduły Qt
    • Sources/ – zawiera pliki źródłowe projektu (tzn. kod C++), nie będziemy go używać w prostszych projektach – wystarczą nam skrypty pisane w QML
      • „main.cpp” – automatycznie generowany plik przez Qt, służy do stworzenia i uruchomienia silnika QML
    • Resources/ – folder zawierający pliki zasobów, w tym skrypty QML
      • qml.qrc/ – zasób zawierający pliki QML
        • „main.qml” – plik skryptowy, od którego zaczyna się uruchomienie aplikacji bazującej na QML (można to zachowanie zmienić przez podanie innej ścieżki w „main.cpp”)
        • „MainForm.ui.qml” – plik opisujący wygląd i startowe zachowanie aplikacji, powinien być edytowany wyłącznie w Design Mode.

Design Mode

qt-qdesign-mode

Jak wspomniałem pośrednio wcześniej: ten tryb służy do wizualnego edytowania aplikacji (głównie wyglądu), jednakże ten tryb nie jest ograniczony jedynie do edycji plików „*.ui.qml”, lecz umożliwia także do wpływania na kod plików „*.qml”. Zachęcam czytelnika do samodzielnego zobaczenia jak wygląda bazowa aplikacja po wybraniu (pojedynczym kliknięciu) z drzewka hierarchii obiektów (Edit Mode): „main.qml” oraz „MainForm.ui.qml” w trybie Design.

  1. Library – pokazuje listę gotowych obiektów do skorzystania (a także zasobów i zaimportowanych modułów), mechanika dodania obiektu do aplikacji to „drag-and-drop”
  2. Navigator – posiada drzewko obiektów aktualnie umieszczonych w aplikacji
  3. Connections – posiada informacje o stworzonych połączeniach sygnałów i slotów stworzonych w trybie Design
  4. Properties – widok edycji poszczególnych właściwości obiektu, warto nadawać własne id, bo to dzięki niemu jesteśmy w stanie odnieść się do konkretnego obiektu w kodzie
  5. Edit – Widok edycji aplikacji, jest to jednocześnie pewnego rodzaju wygląd na to jak będzie wyglądała aplikacja

Ten tryb będziemy dokładniej eksplorować już wkrótce, dlatego daruję sobie szczegółowe opisy w tym miejscu.

 

Hello Android!


Hello World

Pierwszą rzeczą jaką wykonamy będzie prosty program wyświetlający statyczny napis, ale który będzie skalował się z ekranem. Do dzisiejszej lekcji utwórz sobie domyślny projekt Qt Quick dla Androida i przejdź w Design Mode dla pliku „main.qml”.

Usuń MainForm z Navigatora i klikając na Window zmień parametry na przykładowo: Title -> „Hello Android!”;  Color -> #171717.

Następnie metodą „drag-and-drop” przeciągnij Text na Window i ustaw wartości parametrów na:

  • id = motd
  • Aligment = (center, center),
  • Text = „Hello Android!”
  • TextColor = #ffffff
  • StyleColor = #9e24ff
  • (font) Size = 32px
  • (font) Style = Sunken

qt-hello-android-1

Powyższy kod został wygenerowany przez Qt w trybie Design. Warto jest poświęcić chwilę na zrozumienie co właściwie wykonał za nas kod. Jak się okazuje wcale to nie jest nic skomplikowanego i bez trudu bylibyśmy w stanie napisać coś podobnego.

Całość składa się z zagnieżdzających (zgodnie z hierarchią) „klas”, w których ustawiamy parametry. Składniowo może to przypominać mieszankę CSS oraz JS.

Aby sprawić żeby tekst się skalował względem rodzica (w naszym przypadku względem głównego okna aplikacji) wystarczy wejść w kartę Properties -> Layout i zaznaczyć Anchor: „Fill parent item”.

Anchors – czyli „kotwice” są ważnym elementem do poprawnego skalowania aplikacji, tak ustawienie w niej elementów nie psuło się dla każdej rozdzielczości ekranu. O nich wspomnimy sobie jeszcze kiedyś indziej.

Teraz wystarczy uruchomić tryb debugowania, aby cieszyć się napisem „Hello Android” na naszym telefonie!

Źródła projektu znajdują się w [repozytorium] projektu.

Code ON!


  • Crax

    🙂 Może nie pojawia się już tak dużo postów jak kiedyś, nadal udaje ci się jednak wybrać najlepszy tema i przygotować dobry poradnik.
    Nic doda nic ująć, idealnie trafiłeś z tym tematem, wielkie dzięki.

    Pozdrawiam, i z niecierpliwością czekam na kolejny artykuł.

    Powodzenia, Code ON!

  • Maciej Gwiżdż

    Przykład zrobiony, wszystko działa 🙂 Tam masz małą literówkę #1717171 <- Szkoda, że nie poszliśmy kroczek dalej i nie wstawiłeś jakiegoś buttona, który by wywoływał jakąś interakcję 🙂