这个手册描述了使用Qt Quick面访的方式在Android和ios设备上开发QtQuick应用程序的方法。我们使用Qt
Creator实现一个QtQuick应用程序,这个应用程序基于加速器的值来加速一个SVG(可伸缩矢量图形)。

设置开发环境:

要想能够在移动设备上构建和运行一个应用程序,您必须为设备平台设置开发环境,配置Qt Creator和手机设备之间的连接。

要想部署到Android设备,您必须下载和安装最新的Android
NDK和SDK.更新SDK去获取为开发所需的API和工具。除此之外,您必须安装Java的JDK和Apache
Ant.当您已经安装所有的这些工具以后,您必须在Qt Creator中指定它们的位置。如果想了解更多关于这方面的信息,请查看Qt
for Android(http://doc.qt.io/qt-5/android-support.html)和连接Android设备(http://doc.qt.io/qtcreator/creator-developing-android.html).

在IOS设备上开发,您必须安装Xcode,使用它去配置一个设备。对于这个来说,您需要从苹果收到一个苹果开发者的账号和ISO开发应用认证。如果想了解更多的详情信息,请查看连接IOS设备(http://doc.qt.io/qtcreator/creator-developing-ios.html)

创建项目:

1
选择File(文件) >
新建文件或项目 >
应用程序 > QtQuick Application > Choose.

2 在名称文本框中,输入accelbubble.

3在创建路径中输入项目文件存储的路径,例如E:\Examples   
,接着点击下一步(或在OSX平台上点击Continue).

4在Qt Quick component set下拉选中,选择Qt Quick Controls
1.1.

5选择针对Androidd和iPhone OS的构建套件,然后点击”下一步”.

注意:如果在”工具” > “选项”
> “构建和运行” > “构建套件”里指定了构建套件设置,那么构建套件将会被显示出来。笔者的设置如下:

关于Android配置,在配置它之前需要先安装JDK,下载好了SDK、NDK、Ant工具:

6在这个dialog窗口后选择”下一步”,使用默认的设置。

7查看项目设置,点击”完成”(或在OS
X平台上点击完成)

QtCreator生成一个默认的QML文件,在这个文件中可以创建应用程序的主窗口视图。

创建主窗口视图:

在应用程序的主窗口正中央显示一个SVG(主窗口视图图形)气泡的图片。

在您的项目中使用被Qt Sensors例子使用的BlueBubble.svg,Accel
Bubble,您必须从Qt安装路径下将它拷贝到项目路径下(和QML文件相同的子目录下)。例如:D:\Installed\QT\Examples\Qt-5.4\sensors\accelbubble\content。图片在Resources中有,您也可以使用其它任何类型的图片或者一个QML类型的图片代替(本案例中使用图片bubble.png代替)。

1
在编辑视图,鼠标右击qml.qrc,选择右键菜单中添加现有文件,将项目中的bubble.png资源添加进去。添加后的效果图如下:

在编辑视图里面,双击main.qml文件,在代码编辑视图中打开它。

2修改ApplicationWindow类型的属性,指定应用程序的名称,给定ApplicationWindow的id,设置可见,插入的代码片段如下:

import QtQuick 2.2
import QtQuick.Controls 1.1
 
ApplicationWindow {
    title:qsTr("Accelerate Bubble")
    id:mainWindow
    width: 640
    height: 480
    visible:true
 
}

3在导航区域,选中Label,按键盘上的delete键删除它。

4在“库” > “QML Type”,选择Image,并将它拖动到画布上。并在右侧的属性面板里source部分添加图片。

注意:您也可以在”库” > “资源”里看到已经添加进去的资源:

5选中上图中的图片,在属性面板里,Id域中键入bubble,使图片能够在其它地方引用它。

6在代码编辑区域,给以下的Image添加以下的新的属性,通过这些属性来让将图片定位在应用程序的正中央。

7设置图片位置的x和y的位置,并手动添加图片宽高属性。

6和7步骤后在qml中插入的代码片段如下:

Image
{

id:
bubble

source:
"bubble.png"

smooth:
true

property
real
centerX:
mainWindow.width
/ 2

property
real
centerY:
mainWindow.height
/ 2

property
real
bubbleCenter:bubble.width
/ 2

x:
centerX
- bubbleCenter       
//图片显示的x坐标

y:
centerY
- bubbleCenter       
//图片显示的y坐标

width:
100                      
//图片的宽度

height:
100                     
//图片的高度

}

如下是您在做出改变后accelbubble.qml文件的样子。

import
QtQuick
2.2

import
QtQuick.Controls
1.1

ApplicationWindow
{

title:
qsTr("Accelerate
Bubble")

id:mainWindow

width:
640

height:
480

visible:
true

Image
{

id:
bubble

source:
"bubble.png"

smooth:
true

property
real
centerX:
mainWindow.width
/ 2

property
real
centerY:
mainWindow.height
/ 2

property
real
bubbleCenter:bubble.width
/ 2

x:
centerX
- bubbleCenter       
//图片显示的x坐标

y:
centerY
- bubbleCenter       
//图片显示的y坐标

width:
100                      
//图片的宽度

height:
100                     
//图片的高度

}

}

到此步运行的结果如下:

既然可视的元素已经在指定位置了,我们可以通过改变加速传感器的值来改变的bubble的位置

1添加以下import声明到main.qml中。

import
QtSensors
5.3

2添加一个含有必要属性的Accelerometer类型的元素到main.qml中。

Accelerometer{

id:accel

dataRate:
100

active:true

}

3添加以下的JavaScript方法,实现基于当前Accelerometer的值来计算这个bubble的位置。

function
calcPitch(x,y,z)
{

return
-(Math.atan(y
/ Math.sqrt(x
* x
+ z
* z))
* 57.2957795);

}

function
calcRoll(x,y,z)

{

return
-(Math.atan(x
/ Math.sqrt(y
* y
+ z
* z))
* 57.2957795);

}

4为Accelerometer类型的onReadingChanged信号添加以下的JavaScript代码,让bubble随着Accelerometer的值变化而移动位置。

Accelerometer{

id:accel

dataRate:
100

active:true

onReadingChanged:
{

var
newX
=
(bubble.x
+ calcRoll(accel.reading.x,
accel.reading.y,
accel.reading.z)
* 0.1)

var
newY
=
(bubble.y
- calcPitch(accel.reading.x,
accel.reading.y,
accel.reading.z)
* 0.1)

//如果newX和newY都是空的,直接返回

if
(isNaN(newX)
|| isNaN(newY))

return;

//,让newX
=
0

if
(newX
< 0)

newX
=
0

if
(newX
> mainWindow.width
- bubble.width)

newX
=
mainWindow.width
- bubble.width

if
(newY
< 18)

newY
=
18

if
(newY
> mainWindow.height
- bubble.height)

newY
=
mainWindow.height
- bubble.height

bubble.x
= newX

bubble.y
= newY

}

}

要想确保bubble的位置总是在屏幕边界内部。如果Accelerometer返回的不是一个数值(NaN),值将会被忽略,bubble的位置将不产生更新。

在bubble的x和y属性上添加SmoothedAnimation行为,让它移动的时候看起来是平滑的。

import
QtQuick
2.2

import
QtQuick.Controls
1.1

import
QtSensors
5.3

ApplicationWindow
{

title:
qsTr("Accelerate
Bubble")

id:mainWindow

width:
640

height:
480

visible:
true

function
calcPitch(x,y,z)
{

return
-(Math.atan(y
/ Math.sqrt(x
* x
+ z
* z))
* 57.2957795);

}

function
calcRoll(x,y,z)

{

return
-(Math.atan(x
/ Math.sqrt(y
* y
+ z
* z))
* 57.2957795);

}

Image
{

id:
bubble

source:
"bubble.png"

smooth:
true

property
real
centerX:
mainWindow.width
/ 2

property
real
centerY:
mainWindow.height
/ 2

property
real
bubbleCenter:bubble.width
/ 2

x:
centerX
- bubbleCenter       
//图片显示的x坐标

y:
centerY
- bubbleCenter       
//图片显示的y坐标

width:
100                      
//图片的宽度

height:
100                     
//图片的高度

Behavior
on
y
{

SmoothedAnimation
{

easing.type:
Easing.Linear

duration:
100

}

}

Behavior
on
x
{

SmoothedAnimation
{

easing.type:
Easing.Linear

duration:
100

}

}

}

Accelerometer{

id:accel

dataRate:
100

active:true

onReadingChanged:
{

var
newX
=
(bubble.x
+ calcRoll(accel.reading.x,
accel.reading.y,

accel.reading.z)
* 0.1)

var
newY
=
(bubble.y
- calcPitch(accel.reading.x,
accel.reading.y,

accel.reading.z)
* 0.1)

//如果newX和newY都是空的,直接返回

if
(isNaN(newX)
|| isNaN(newY))

return;

//,让newX
=
0

if
(newX
< 0)

newX
=
0

if
(newX
> mainWindow.width
- bubble.width)

newX
=
mainWindow.width
- bubble.width

if
(newY
< 18)

newY
=
18

if
(newY
> mainWindow.height
- bubble.height)

newY
=
mainWindow.height
- bubble.height

bubble.x
= newX

bubble.y
= newY

}

}

}

锁定设备方向:

默认情况下当设备的方向改变的时候,屏幕默认是跟着旋转的。如果屏幕的旋转方向固定,那么现实的效果会更加好。

将Android手机中的旋转属性进行固定住。Qt Creator中生成的AndroidManifest.xml中可以指定它。如果想了解更多关于这方面的信息,请查看“编辑Manifest文件”(http://doc.qt.io/qtcreator/creator-deploying-android.html#editing-manifest-files).

在IOS平台上,您可以在一个Info.plist文件锁定设备的方向,这个plist文件在.pro文件中作为QMAKEINFO
PLIST参数来指定。

添加依赖信息

添加依赖:

更新accelbubble.pro文件,跟上以下库依赖信息:

QT += quick sensors
svg xml

在IOS平台上,您必须静态链接上面的库,通过添加插件的名称,明确指定插件QTPLUGIN参数的各各值。为ios构建指定一个qmake范围(在这个qmake里面也包含QMAKE
INFO PLIST参数信息)。

ios {

QTPLUGIN += qsvg qsvgicon qtsensors_ios

QMAKE_INFO_PLIST = Info.plist

}

添加完了依赖以后,选择”构建” > “执行qmake”,将改变应用到项目的Makefile文件中去。

添加资源:

您需要添加Bluebubble.svg图片文件到要部署到手机设备上的应用程序资源文件夹里去。

选中项目中的qml.qrc文件,右击这个qrc文件,选择”添加现有文件”将Bluebubble.svg文件添加进去。

运行应用程序:

应用程序被编译并且将部署到设备上:

1启动Android设备上的USB调试功能,或者启动ios设备上的开发者模式。

2将设备连接到开发电脑上。

如果您正在运行的是Androidv4.2.2,手机上将弹出一个对话框让您去确定使用允许USB调试模式连接到PC机上。要避免每次连接设备的时候弹出一个对话框,点击”总是允许电脑”,并选择OK.

3在设备上运行应用程序,按Ctrl+R。

示例代码:

当您一步步完成之后,main.qml文件看起来应该像下面的样子:

import
QtQuick
2.2

import
QtQuick.Controls
1.1

import
QtSensors
5.3

ApplicationWindow
{

title:
qsTr("Accelerate
Bubble")

id:mainWindow

width:
640

height:
480

visible:
true

function
calcPitch(x,y,z)
{

return
-(Math.atan(y
/ Math.sqrt(x
* x
+ z
* z))
* 57.2957795);

}

function
calcRoll(x,y,z)

{

return
-(Math.atan(x
/ Math.sqrt(y
* y
+ z
* z))
* 57.2957795);

}

Image
{

id:
bubble

source:
"bubble.png"

smooth:
true

property
real
centerX:
mainWindow.width
/ 2

property
real
centerY:
mainWindow.height
/ 2

property
real
bubbleCenter:bubble.width
/ 2

x:
centerX
- bubbleCenter       
//图片显示的x坐标

y:
centerY
- bubbleCenter       
//图片显示的y坐标

width:
100                      
//图片的宽度

height:
100                     
//图片的高度

Behavior
on
y
{

SmoothedAnimation
{

easing.type:
Easing.Linear

duration:
100

}

}

Behavior
on
x
{

SmoothedAnimation
{

easing.type:
Easing.Linear

duration:
100

}

}

}

Image
{

id:
blueubble

source:
"Bluebubble.svg"
//注意要让svg图显示在手机上,要在pro文件中添加Qt
+=
svg

smooth:
true

property
real
centerX:
mainWindow.width
/ 4

property
real
centerY:
mainWindow.height
/ 4

property
real
blueubbleCenter:blueubble.width
/ 2

x:
centerX
- blueubbleCenter    
//图片显示的x坐标

y:
centerY
- blueubbleCenter    
//图片显示的y坐标

width:
100                      
//图片的宽度

height:
100                     
//图片的高度

}

Accelerometer{

id:accel

dataRate:
100

active:true

onReadingChanged:
{

var
newX
=
(bubble.x
+ calcRoll(accel.reading.x,
accel.reading.y,

accel.reading.z)
* 0.1)

var
newY
=
(bubble.y
- calcPitch(accel.reading.x,
accel.reading.y,

accel.reading.z)
* 0.1)

//如果newX和newY都是空的,直接返回

if
(isNaN(newX)
|| isNaN(newY))

return;

//,让newX
=
0

if
(newX
< 0)

newX
=
0

if
(newX
> mainWindow.width
- bubble.width)

newX
=
mainWindow.width
- bubble.width

if
(newY
< 18)

newY
=
18

if
(newY
> mainWindow.height
- bubble.height)

newY
=
mainWindow.height
- bubble.height

bubble.x
= newX

bubble.y
= newY

}

}

menuBar:MenuBar
{

Menu{

title:qsTr("File")

MenuItem{

text:qsTr("&Open")

onTriggered:
console.log("Open
action
triggered");

}

MenuItem{

text:qsTr("Exit")

onTriggered:Qt.quit();

}

}

}

}

上面的例子在华为手机上运行的效果图如下:

创建一个QT for Android的传感器应用应用程序(摘自笔者2015年将出的《QT5权威指南》,本文为试读篇)的更多相关文章

  1. 一步步创建Qt Widget项目+TextFinder案例(摘自笔者2015年将出的《QT5权威指南》,本文为试读篇)

     创建一个基于应用的QtWidget应用程序 这个手册描述了怎样使用QtCreater创建个一个小的Qt应用程序,Text Finder.它是Qt工具Text Finder例子的简写版本.这个应用 ...

  2. 5.从零开始创建一个QT窗口按钮

    如何创建一个QT项目 如何创建一个QT项目 1.创建新项目 2.配置选择 3.增加按钮 4.按钮和窗体的大小标签图标设置 5.信号与槽 6.自定义信号与槽 代码 1.创建新项目 点击文件->新建 ...

  3. 创建一个ArcGIS for Android 新项目并显示出本地的地图

    1.准备工作:首先要配置好android的开发环境,然后在Eclipse中安装ArcGIS for Android的开发控件:在ArcCatalog中发布好本地的地图服务. 2.安装完ArcGIS f ...

  4. .NET创建一个即是可执行程序又是Windows服务的程序

    不得不说,.NET中安装服务很麻烦,即要创建Service,又要创建ServiceInstall,最后还要弄一堆命令来安装和卸载. 今天给大家提供一种方式,直接使用我们的程序来安装/卸载服务,并且可以 ...

  5. [置顶] 【Android实战】----从Retrofit源码分析到Java网络编程以及HTTP权威指南想到的

    一.简介 接上一篇[Android实战]----基于Retrofit实现多图片/文件.图文上传中曾说非常想搞明白为什么Retrofit那么屌.最近也看了一些其源码分析的文章以及亲自查看了源码,发现其对 ...

  6. 创建一个Android项目

    当我们的eclipse安装了SDK后,点击Window-->Perference-->DDMS.eclipse界面立即转为DDMS界面. 这时,我们可以打开我们的服务端(安卓模拟器或者是我 ...

  7. 【Android Developers Training】 1. 创建一个Android项目工程

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  8. [Android开发教程]Android官网developer training中文版教程 - 1.1.1 创建一个Android项目

    本系列持续更新中.转载请注明来源. 前言:近期打算系统学习一下Android开发,发现Android官网上的developer training也是个非常好的学习资料,于是想到一边学习一边写一个中文版 ...

  9. 1.第一个QT程序

    第一个QT程序 应用程序类QApplication 窗口类MyWidget 进入事件循环 a.exec() 头文件 mywidget.h QApplication 文件Demo_pro 我怎么知道我用 ...

随机推荐

  1. hdu 5131(2014 广州—模拟)

    题意:给你n个人以及他们的杀人数.先按杀人数从大到小排名输出,然后是一些询问 一个人名,①输出杀人数比他大的人数和+1:②如果有人杀人数和他一样而且名字的字典序比他小,输出人数+1,没有则无视. #i ...

  2. TDMA over WiFi

    0 引言 TDMA可以修正WiFi中DCF机制中连接速率不同终端间信道占用时间片公平性缺陷,从而提升整体WiFi网络的性能.著名的UBNT的网桥就用其独创的TDMA技术为其赢得了市场.以前是不同的公司 ...

  3. VS2012不能加载想要打开的项目/解决方案

    今天回宿舍用自己的电脑敲代码,想要打开之前的项目,可是VS2012打开之后项目却显示“无法加载” 查了之后才知道原来是由于某个安装包缺少引起的,具体做法请看如下 链接:http://jingyan.b ...

  4. 5步做一个 TensorFlow 聊天机器人:DeepQA

    项目截图: 实测截图: 一步一步教程: 1.下载这个项目: https://github.com/Conchylicultor/DeepQA 2.下载训练好的模型: https://drive.goo ...

  5. jquery easyui datagrid数据自动换行 panel用法

    nowrap:false 初始化panel $('#txtLeftPercent').panel({ title: '剩余权重:' + percent, height: 10, width: 180, ...

  6. Bash shell中的位置参数$#,$*,$@,$0,$1,$2...及特殊参数$?,$-等的含义

    http://hi.baidu.com/lolorosa/blog/item/5775a608bd670d33b0351da7.html $# 是传给脚本的参数个数 $@ 是传给脚本的所有参数的列表 ...

  7. Android------Android.mk调用shell脚本

    $(info $(shell ($(LOCAL_PATH)/echo_test.sh)))

  8. 个人在AS的一些安卓适配经验

    具体的安卓适配http://blog.csdn.net/qfanmingyiq/article/details/53219812 AS在屏幕适配方面做的比eclipse做得好得多. 以下AS中的一些具 ...

  9. iOS开源加密相册Agony的实现(三)

    简介 虽然目前市面上有一些不错的加密相册App,但不是内置广告,就是对上传的张数有所限制.本文介绍了一个加密相册的制作过程,该加密相册将包括多密码(输入不同的密码即可访问不同的空间,可掩人耳目).Wi ...

  10. linux C 获取与修改IP地址

    主要有两种方法: 一种是用system执行shell命令,如: system("ifconfig usb0 192.168.1.188"); 另一种用ioctl系统调用: int ...