Qt – Androidアプリ開発 – 画面要素作成
津路です。今日は。
Qt – Androidアプリ開発環境に引き続き、アプリを作っていきます。
チュートリアルに従って、作るのは、accelerate Bubbleという、バブルイメージを、センサーによって、加速させるアプリです。
その前に、Android Studioをアップデートしておきます。
イメージは、サンプルの中から、BlueBubble.svgというファイルをコピーして使います。
そしてまず、新規プロジェクトを作成するステップです。
プロジェクト画面からプロジェクトボタンを押して、Qt Quick Application – Swipeを選択、
名前を入力し、保存ディレクトリを選択して、qmakeをビルドシステムとし、Quick Control Styleには、Defaultとし、translationにはJapaneseを選択します。
作成されるファイルは、以下です。
first-sample.pro
first-sample_ja_JP.ts
main.cpp
main.qml
Page1Form.ui.qml
Page2Form.ui.qml
qml.qrc
qtquickcontrols2.conf
qmlは、Javascriptをベースにした言語ということです。
まず、Page1Form.ui.qmlを開きますと、デザインモードになります。
ラベルが中央に配置されていて、これを削除します。
新たに、RectangleというWidgetを追加します。これには、最初、どこにWidgetのリストがあるのかよくわかりませんでしたが、左ペインのライブラリの下でエレメントタブを選択し、My QML Componentsを閉じると、ようやく見えました。フィルタにRectangleを入力すると、簡単です。
Rectangleを中央に配置し、プロパティのIDにmainWindowと入力し、(Fill to Parent)で親のレイアウトに合わせます。
次に、左ペインで、プロジェクトの下に、既存のファイルを追加にて、プロジェクトフォルダにコピーしてきたbluebubble.svgを追加します。チュートリアルでは、自動的に追加されるとなっていますが。。
そして、ライブラリの下のリソースタブを選択し、読み込んだsvgを、Rectangleの中央にドラッグアンドドロップします。
右ペインのIDには、bubble と入力。
ここからは、イメージを加速させるための仕組みを書いていくので、ちょっと複雑です。
左ペインで、先ほどのmainWindowを選択し、その下にbubbleがあることを確認して、エクスポートアイコンをクリックします。
mainWindow, bubbleをエクスポート