1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
|
/****************************************************************************
**
** Copyright (C) 2022 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
// **********************************************************************
// NOTE: the sections are not ordered by their logical order to avoid
// reshuffling the file each time the index order changes (i.e., often).
// Run the fixnavi.pl script to adjust the links to the index order.
// **********************************************************************
/*!
\previouspage creator-writing-program.html
\example accelbubble
\nextpage creator-project-managing.html
\title Creating a Mobile Application
This tutorial describes how to use \QC to develop Qt Quick applications for
Android and iOS devices when using Qt 6 as the minimum Qt version and CMake
as the build system.
We implement a Qt Quick application that accelerates an SVG (Scalable Vector
Graphics) image based on the changing accelerometer values.
\note You must have the \l{Qt Sensors} module from Qt 6.2 or later installed
to be able to follow this tutorial.
\image creator_android_tutorial_ex_app.png
\section1 Setting up the Development Environment
To build the application for and run it on a mobile device, you must
set up the development environment for the device platform and configure a
connection between \QC and the mobile device.
To develop for Android devices, you must install \l{Qt for Android}
and set up the development environment, as instructed in
\l{Connecting Android Devices}.
To develop for iOS devices, you must install Xcode and use it to configure
a device. For this, you need an Apple developer account and iOS Developer
Program certificate that you receive from Apple. For more information, see
\l{Connecting iOS Devices}.
\include qtquick-tutorial-create-empty-project.qdocinc qtquick empty application
\section1 Adding Images as Resources
The main view of the application displays an SVG bubble image that moves
around the screen when you tilt the device.
We use \e {Bluebubble.svg} in this tutorial, but you can use any other
image or component instead.
For the image to appear when you run the application, you must specify it
as a resource in the \c RESOURCES section of \e CMakeLists.txt file that
the wizard created for you:
\quotefromfile accelbubble/CMakeLists.txt
\skipto qt_add_qml_module
\printuntil )
\section1 Creating the Accelbubble Main View
We create the main view in the \e main.qml file by adding an \l Image
component with \e Bluebubble.svg as the source:
\quotefromfile accelbubble/main.qml
\skipto Image
\printuntil smooth
Next, we add custom properties to position the image in respect to the width
and height of the main window:
\printuntil y:
We now want to add code to move the bubble based on Accelerometer sensor
values. First, we add the following import statement:
\quotefromfile accelbubble/main.qml
\skipto QtSensors
\printline QtSensors
Next, we add the \l{Accelerometer} component with the necessary properties:
\skipto Accelerometer
\printuntil active
Then, we add the following JavaScript functions that calculate the
x and y position of the bubble based on the current Accelerometer
values:
\quotefromfile accelbubble/main.qml
\skipto function
\printuntil }
\printuntil }
We add the following JavaScript code for \c onReadingChanged signal of
Accelerometer component to make the bubble move when the Accelerometer
values change:
\quotefromfile accelbubble/main.qml
\skipto onReadingChanged
\printuntil }
We want to ensure that the position of the bubble is always
within the bounds of the screen. If the Accelerometer returns
\e {not a number} (NaN), the value is ignored and the bubble
position is not updated.
We add \l SmoothedAnimation behavior on the \c x and \c y properties of
the bubble to make its movement look smoother.
\quotefromfile accelbubble/main.qml
\skipto Behavior
\printuntil x
\printuntil }
\printuntil }
\section1 Locking Device Orientation
The device display is rotated by default when the device orientation
changes between portrait and landscape. For this example, it would be
better for the screen orientation to be fixed.
To lock the orientation to portrait or landscape on Android, specify it in
an \e AndroidManifest.xml that you can generate in \QC. For more information,
see \l{Editing Manifest Files}.
\image qtquick-mobile-tutorial-manifest.png "Accelbubble manifest file"
To generate and use a manifest file, you must specify the Android package
source directory, \c QT_ANDROID_PACKAGE_SOURCE_DIR in the \e CMakeLists.txt
file:
\quotefromfile accelbubble/CMakeLists.txt
\skipto set_property
\printuntil )
Because our CMake version is older than 3.19, we must add a manual
finalization step to the \c qt_add_executable function:
\quotefromfile accelbubble/CMakeLists.txt
\skipto qt_add_executable
\printuntil )
We also need to add the \c qt_finalize_executable function:
\skipto qt_finalize_executable
\printuntil )
On iOS, you can lock the device orientation in an \e Info.plist file
that you specify in the \e CMakeLists.txt file as the value of the
\c MACOSX_BUNDLE_INFO_PLIST variable:
\quotefromfile accelbubble/CMakeLists.txt
\skipto set_target_properties
\printuntil )
\section1 Adding Dependencies
You must tell the build system which Qt modules your application needs by
specifying dependencies in the project file. Select \uicontrol Projects to
update the CMake configuration with the following Qt module information:
\c Sensors, \c Svg, \c Xml.
The \e CMakeLists.txt file should contain the following entries that tell
CMake to look up the Qt installation and import the Qt Sensors, Qt SVG,
and Qt XML modules needed by the application:
\quotefromfile accelbubble/CMakeLists.txt
\skipto find_package
\printuntil REQUIRED
You also need to add the Qt modules to the list of target link libraries.
\c target_link_libraries tells CMake that the accelbubble executable uses
the Qt Sensors, Qt SVG, and Qt XML modules by referencing the targets
imported by the \c find_package() call above. This adds the necessary
arguments to the linker and makes sure that the appropriate include
directories and compiler definitions are passed to the C++ compiler.
\skipto target_link_libraries(appaccelbubble
\printuntil Qt6
After adding the dependencies, select \uicontrol Build >
\uicontrol {Run CMake} to apply configuration changes.
For more information about the CMakeLists.txt file, see
\l{Getting started with CMake}.
\section1 Running the Application
The application is complete and ready to be deployed to a device:
\list 1
\li Enable \e{USB Debugging} on the Android device or \e{developer mode}
on the iOS device.
\li Connect the device to the development PC.
If you are using a device running Android v4.2.2, it should prompt you to
verify the connection to allow USB debugging from the PC it is connected
to. To avoid such prompts every time you connect the device, select the
\uicontrol {Always allow from this computer} check box, and then select
\uicontrol OK.
\li To run the application on the device, press \key {Ctrl+R}.
\endlist
*/
|
