创建一个QT for Android的传感器应用应用程序(摘自笔者2015年将出的《QT5权威指南》,本文为试读篇)
这个手册描述了使用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工具:
QtCreator生成一个默认的QML文件,在这个文件中可以创建应用程序的主窗口视图。
在应用程序的主窗口正中央显示一个SVG(主窗口视图图形)气泡的图片。
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添加以下的新的属性,通过这些属性来让将图片定位在应用程序的正中央。
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的位置
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,让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,让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 } } } |
默认情况下当设备的方向改变的时候,屏幕默认是跟着旋转的。如果屏幕的旋转方向固定,那么现实的效果会更加好。
在IOS平台上,您可以在一个Info.plist文件锁定设备的方向,这个plist文件在.pro文件中作为QMAKEINFO PLIST参数来指定。
更新accelbubble.pro文件,跟上以下库依赖信息:
QT += quick sensors svg xml |
ios { QTPLUGIN += qsvg qsvgicon qtsensors_ios QMAKE_INFO_PLIST = Info.plist } |
添加完了依赖以后,选择”构建” > “执行qmake”,将改变应用到项目的Makefile文件中去。
您需要添加Bluebubble.svg图片文件到要部署到手机设备上的应用程序资源文件夹里去。
选中项目中的qml.qrc文件,右击这个qrc文件,选择”添加现有文件”将Bluebubble.svg文件添加进去。
1启动Android设备上的USB调试功能,或者启动ios设备上的开发者模式。
如果您正在运行的是Androidv4.2.2,手机上将弹出一个对话框让您去确定使用允许USB调试模式连接到PC机上。要避免每次连接设备的时候弹出一个对话框,点击”总是允许电脑”,并选择OK.
当您一步步完成之后,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,让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权威指南》,本文为试读篇)相关推荐
- 一步步创建Qt Widget项目+TextFinder案例(摘自笔者2015年将出的《QT5权威指南》,本文为试读篇)
创建一个基于应用的QtWidget应用程序 这个手册描述了怎样使用QtCreater创建个一个小的Qt应用程序,Text Finder.它是Qt工具Text Finder例子的简写版本.这个应用 ...
- Qt Creator创建一个Qt Quick应用程序
Qt Creator创建一个Qt快速应用程序 创建一个Qt快速应用程序 创建项目 创建主视图 连接鼠标单击以陈述更改 动画过渡 创建一个Qt快速应用程序 本教程使用内置的QML类型,并说明了Qt Qu ...
- android 根目录uri,如何在根目录下创建一个文件夹Android
我需要在根目录下创建CAT_IMG文件夹,并在列表视图中检索它.但CAT_IMG文件夹不在根目录中创建.我在清单文件中添加了权限.请帮我在根目录下创建一个文件夹.如何在根目录下创建一个文件夹Andro ...
- 创建一个简单的Android应用程序
创建第一个Android应用程序 打开Android Studio,选择新创建一个Project: 点击创建时Android Studio会给我们提供一些基础模板,我们可以根据需要选择模板对应项目创建 ...
- 如何创建一个简单的实时(RealTime)应用程序
前一篇了解了如何在树莓派上编译安装实时内核,这次给出一个例程,了解如何编写一个简单的应用程序让他跑在实时内核上. 代码如下: /* * 使用单个pthread作为RT线程*/#include < ...
- 使用Tensorflow Lite创建一个Android AI应用
目录 下一步 在这里,我们使用TensorFlow Lite解释器检查图像并产生其输出. 这是将神经网络与Android上的TensorFlow Lite结合使用的系列文章中的第三篇.在本系列的第2部 ...
- 创建一个Android Cardboard 360 Video Viewer
建立 在开始构建视频查看器应用程序之前,您将需要通过Git将Cardboard Android SDK克隆到计算机上. 您可以在本系列的上一篇文章中找到有关此操作的说明. 对于我们的示例,使用最低AP ...
- Qt创建项目:手把手创建第一个Qt项目
上一节介绍了QtCreator编辑器的页面长什么样子,以及都有哪些功能区,每个功能区都是用来做什么的.这一节我就手把手带大家创建一个Qt项目. 创建项目 点击新建按钮 创建项目有两个入口,一个是在欢迎 ...
- 在 Android Studio 中创建一个简单的 QQ 登录界面
一,创建一个新的 Android Studio 项目 打开 Android Studio,选择 "Start a new Android Studio project",然后填写应 ...
最新文章
- PyTorch 学习笔记(四):权值初始化的十种方法
- 网页制作-表单元素2
- Android应用打开外部文件
- python flask route中装饰器的使用
- 执行java脚本_怎么用bat执行java应用程序
- .NET 中安全高效跨平台的模板引擎 Fluid 使用文档
- leetcode 1738. 找出第 K 大的异或坐标值
- 10年10亿才能烧好电子商务?
- linux服务器的又一管理利器webmin图解教程
- linux搭建raid5命令,Linux下用mdadm命令创建软RAID5
- PC常见故障及解决思路汇总(系统方面)
- 华为手机怎么开启生产模式 | 华为手机打开生产模式后有驱动没有安装好怎么办 | 华为荣耀9手机打开生产模式后有驱动有叹号怎么办
- 微信小程序利用腾讯云IM即时通讯发送文字+表情开发
- python 进化树_物种进化树构建
- 2022年第五届全国青少年人工智能创新挑战赛
- 史上最全的程序员求职渠道总结
- XSS靶场(haozi.me)
- Censored! POJ - 1625(AC自动机 + dp +高精度模板)
- 大学这么多比赛,我该参加哪个?
- Python下载MP4视频
热门文章
- OpenCASCADE绘制测试线束:几何命令之曲面创建
- boost::base_from_member相关的测试程序
- boost::scoped_thread相关的测试程序
- boost::shared_mutex相关的测试程序
- boost::math模块使用二项分布复制 NAG 库调用的测试程序
- boost::math::tools::continued_fraction_b用法的测试程序
- boost::hana::decltype_用法的测试程序
- boost::hana::Comparable用法的测试程序
- GDCM:gdcm::Global的测试程序
- boost::contract模块实现friend功能的测试程序