app inventor教程.docx
《app inventor教程.docx》由会员分享，可在线阅读，更多相关《app inventor教程.docx（50页珍藏版）》请在冰豆网上搜索。
appinventor教程
AppIventor
入门案例教程
1．注册帐号
1.1利用AppInventor广州电教馆服务器注册
1）安装google浏览器或者360极速浏览器或者火狐浏览器等（不支持ie）；
2）登入网址：
图1.1网站界面
3）点击
，申请一个帐号；
4）注册完毕后登入appinventor，如图1.2所示：
图1.2新建项目界面
1.2通过AppInventor离线版使用
1）打开离线安装程序压缩包
；
2）双击打开安装程序，开始AppInventor离线版
3）安装完毕，在桌面找到并打开AppInventor离线版
，出现如下如图1.3。
图1.3cmd运行界面
4）查看本机IP地址，如图1.4所示。
图1.4本机IP地址
5）打开浏览器，在网址栏输入上一步所得到的本机IP地址+:
8888（注意冒号:
是英文输入）即可打开AppInventor登入界面。
如本机IP地址为：
192.168.2.105，则在网址栏输入192.168.2.105:
8888打开AppInventor界面。
6）
2．案例1HelloAI
2.1案例展示
HelloAI的使用流程如图2.1所示。
a）主界面“来点我啊！
”，点击绿色机器人；
b）点击后，小机器人变大了；
c）再次点击，机器人再次变化；
d）第三次点击，机器人第三次变化造型；
e）第四次点击，机器人造型变为超人；
f）第五次点击，跳出提示栏“是否退出”。
（a）起始界面
（b）1次点击后
（c）2次点击后
（d）3次点击后
（e）4次点击后
（f）5次点击后
图2.1HelloAI使用流程
2.2HelloAI组件设计
1）素材准备
通过以上案例展示，我们对“安安诞生记”的界面、交互和行为都有所了解。
为了实现这个效果，需要准备一些素材：
五张图片。
这些素材可以在本案例实验资源包中找到，你也可以将这些换成你自己感兴趣的素材。
在AppInventor中，支持的图片文件格式有.png、.gif和.jpg等；支持的音频文件格式有.arm、.mpg和.mp3等。
2）界面设计
登入AppInventor后，点击新建项目，命名为：
“HelloAI”。
a）上传刚才准备好的素材，如图2.2所示。
图2.2上传素材
b）设置screen组件属性，在AppInventor中，每一个App都至少有一个Screen组件。
在新建项目时就缺省建立了一个Screen1组件，这是后面应用开发的基础。
在这个Screen1组件中需要根据需求设置相应属性值，这些属性将会影响到App的界面和交互效果。
设置如表2-1及图2.3所示。
表2-1屏幕组件属性
属性
解释
修改值
应用说明
关于屏幕，可以用于注释
默认
水平对齐
控制屏幕中的组件水平对齐方式
居中
垂直对齐
控制屏幕中的组件垂直对齐方式。
仅当“允许滚动”属性为假时，才能设置。
默认
背景颜色
屏幕的背景颜色
白色
背景图片
“背景颜色”为透明时，设置的背景图片才能显示
默认
关屏动画
关闭屏时的动画效果
默认
图标
应用安装后的图标
Android1.png
图2.3screen1属性设置
c）加入其它组件，设置相应的属性，完成界面设计。
从“用户界面”组件中拖取一个“按钮”组件到Screen1中，重命名为“按钮1”设置“图像”为android1.png；再拖取“标签”组件到Screen1中，重命名为“来点”，并设置文本内容为“来点我啊！
”。
重复上述步骤，并添加“对话框”组件，最终界面效果如图2.4所示。
图2.4界面最终设计
为了达到每点击一次小机器人切换一次形象和文字的效果，我们将除了“按钮1”和标签“来点”之外的按钮和标签组件属性的“显示状态”都不勾选。
2.3HelloAI的逻辑设计
对App进行行为编辑，需要点击开发网页右上角的“逻辑设计”按钮，切换到逻辑设计界面进行。
通过前面的案例展示可知，当点击按钮时会触发一系列行为，其流程如图2.5所示。
图2.5软件运行流程
逻辑设计界面如图2.6所示。
图2.6逻辑设计界面
逻辑设计界面的左侧为模块栏，除了内置的通用模块外，还有我们在组件设计界面的设置的模块逻辑语言。
每个模块点开都有若干相应功能的图形化程序语句，通过搭建图形化程序语句实现软件功能。
点击“按钮1”实现的功能代码如图2.7所示。
图2.7按钮1代码
其作用是使“按钮1”由显示变为隐藏，同时无法被点击；使“按钮2”由隐藏变为显示，同时可以被点击。
使标签“来点”由显示变为隐藏，标签“要变身”由隐藏变为显示。
同理，“按钮2”、“按钮3”、“按钮4”的代码也可以做出来了，如图2.8所示。
图2.8按钮2至4的代码
“按钮5”实现的功能与前四个按钮不太相同，当“按钮5”被点击，则整个程序运行结束，出现提示信息“是否退出”，其下有两个选项，如“2.1案例展示”中的图2.1的（f）。
当选择“否”，则回到“按钮1”界面，隐藏“按钮5”；当选择“是”，则退出程序。
其实现的代码如图2.9所示。
图2.9按钮5的代码
2.4App的调试与运行
AppINventor提供了3种调试的手段，其中的模拟器运行没能测试成功，这里就不多做介绍，主要调试手段是使用Android系统手机通过连接与电脑统一网络的WIFI，再使用AI伴侣进行连接调试，下面我们做详细介绍使用方法。
1）在手机上安装AI伴侣，下载地址为：
2）手机连接与电脑统一网络下的WIFI，并打开“MITAI2Companion”，界面如图2.10所示；
图2.10MITAI2Companion界面
3）在打开开发网页，如图2.11所示，点击“连接-AI伴侣”。
图2.11连接AI伴侣
4）出现二维码，可以使用如图2.10所示scanQRcode扫描。
也可以直接在光标出输入如图2.12所示“Yourcodeis：
”后面对应的字符串。
图2.12连接二维码
完成后手机上就会出现应用运行的界面了。
如果连接失败可能有以下几种原因：
1）可能是安装的“AI伴侣”App版本太旧，可以通过升级或者下载安装最新版本的“AI伴侣”App解决。
2）检查设备是否正常连网。
3）电脑和移动设备可能连接的不是同一无线网络，需要保证电脑和移动设备连接的无线网络一致。
4）所在地的网关协议不允许无线连接，这种情况下仍然可以通过模拟器或者USB接口连接手机进行应用的调试运行。
调试完成后，就可以打包成APK了，AI2提供可两种打包方式如图2.13所示。
图2.13打包APK
1）打包apk并显示二维码。
这种方式会在服务器端打包生成好apk，并给出一个可供下载的二维码。
用户可以直接扫码进行app的下载安装。
这种方式不必把apk安装包下载到电脑上，对于调试比较方便，但这个二维码下载链接只有两个小时的有效期，过期就不能下载了。
2）打包apk并下载到电脑。
.当打包生成好apk后会把这个apk安装包下载到电脑上。
用户可以通过其他方式安装到自己的手机。
这种方式可以直接把apk文件分享给其他人，方便其他人安装。
3．案例2点我
3.1案例展示
“点我”的应用演示过程如图3.1所示。
a）打开应用，显示熊猫的笑脸，标题栏成烂菜绿色；
b）当熊猫被按压后，图片变为大笑的金馆长，同时发出“哈哈哈”的笑声，松手后，图片变回熊猫笑脸，同时笑声停止；
c）当手机被摇晃，也会发出“哈哈哈”的笑声，同时手机发生震动。
（a）起始界面
（b）按压后界面
图3.1运行界面展示
3.2点我组件设计
1）素材准备
通过以上案例展示，我们对界面、交互和行为都有所了解。
为了实现这个效果，需要准备的素材为图片两张，笑声文件一个。
2）界面设计
用自己的账号登录开发网站后，新建一个项目，命名为“haha”。
把项目要用到的素材先上传到开发网站后，就可以开始设计用户界面了。
按照图3.2添加所有需要的组件，按照表3-1设置所有组件的属性。
图3.2设计界面
表3-1组件设置
组件
用途
命名
属性设置
Screen
存放组件的容器
——
AppName：
点我
背景颜色：
白色
标签
用来显示文字
标签1
字号：
20
宽度：
充满
文本：
哈哈
文本对齐：
居中
文本颜色：
白色
按钮
用来相应按压屏幕行为
按钮1
高度：
充满
宽度：
充满
图像：
11.jpg
图像
用来显示图片，做按钮按压后切换的图
图像1
图片：
21.jpg
图像
同上
图像2
图片：
11.jpg
音效
当按钮被按压，播放“哈哈”的笑声
音效1
源文件：
6.MP3
加速度传感器
用来感应当手机被晃动时，发出笑声
加速度传感器1
敏感度：
适中
对话框
做退出提示
对话框1
——
3.3点我的逻辑设计
初始化Screen1，使标签1的背景颜色变为烂菜绿色，其代码如图3.3所示。
图3.3Screen1初始化代码
合成颜色的代码从“颜色”模块中选取。
判断“按钮1”是否被按压及是否被松开的程序代码如图3.4所示。
图3.4按钮1被按压与被松开的代码
判断手机是否被晃动是利用到了手机主板上内置的加速度传感器电路来实现的。
当我们晃动手机时，手机的加速度从0变为非0的值，这时候加速度传感器就能感应到其加速度的变化，从而得到加速度数据。
其实现的代码如图3.5所示。
图3.5加速度传感器的代码
最后就是每一个程序都应该有的一按返回键提示是否退出的功能了，这个功能在上一个案例中已经介绍过了，我们可以改变“对话框”的内容来提高App的娱乐效果，其功能代码如图3.6所示。
图3.6退出提示代码
4．案例3画板
4.1案例展示
（a）起始界面
（b）调整画笔大小
（c）调整颜色和画笔大小
（d）清除按钮，清除绘画笔迹
（e）选择图片，并在图片上绘画
（f）还原画布，将画布还原成白色背景
（g）拍照，并在照片上绘画
4.2画板组件设计
画板的界面设计如图4.1所示。
图4.1画板的界面设计
在界面设计时，为了是布局美观合理，我们需要使用“界面布局”组件，来实现界面排版的合理性。
组件的属性设置请自行探索。
4.3画板的逻辑设计
在绘画时，有两种绘画的种类，一种是点，一种是线。
点的大小由屏幕上显示的“滑动条”组件实现，在画布上画点的实现方法如下图4.2所示。
图4.2在画布上画点代码
线是由无数个点组成的，所以想在手机上实现画出线条的效果，就是在画布上显示出你手指划过屏幕的每一个点。
当然显示每一个点是不现实的，所以只要我们所显示的点的数量足够多，从整体上看，就是一条线条了。
线条的粗细有屏幕上显示的“滑动条组件”实现，在画布上画出线条的代码如图4.3所示。
图4.3在画布上画线代码
选择图像作画是通过调用手机相册中的图片来作为画布背景，从而在上面作画，其代码如图4.4所示。
图4.4选择图像代码
现在每部手机上都有摄像功能，我们要利用这个功能就要通过“照相机”组件，我们通过拍照并调用其图像作为画布背景，并在上面绘画。
其过程为先调用手机的摄像头硬件拍照，当拍照完成后，将图片设为画布背景。
其功能代码如图4.5所示。
图4.5摄像头代码
“画布”组件有一个代码为“清除画布”，其功能是清除画布上的笔迹，所以我们将“清除画布”的功能映射到名为“清除”的按钮组件，当我们对绘画内容不满意时，则使用这个按钮功能清除笔迹。
但是这里有各问题是当我们将画布的背景设置为拍照内容或者相册里的图像时，我们就无法将画布的背景还原为白色，所以我们可以通过命为“还原画布”的按钮组件来实现将背景还原为白色的功能。
其实现代码如果4.6所示。
图4.6清除及还原画布的功能代码
5．案例4捕捉皮卡丘
5.1案例展示
本次案例我们将用到一个新的组件——图像精灵，其功能是可以在画布上实现图像运动的效果。
利用“精灵”组件，我们可以用来设计一些简单的游戏。
捕捉皮卡丘的演示过程如图5.1所示。
（a）起始界面，点击开始游戏进入游戏
（b）游戏界面，皮卡丘随机在屏幕上出现，点击皮卡丘就能捕捉它了
（c）没捕捉到一只皮卡丘，界面上方的“抓到”的数字就会加一;没错过一只，“逃走”的数字就会加一；点击重新开始，回到起始界面
图5.1捕捉皮卡丘演示流程
5.2捕捉皮卡丘的组件设计
1）素材准备
本次案例准备了三个图片素材和两个音频素材，都在相应的素材包里。
大家也可以换上自己喜欢的图片素材和音频素材。
2）界面设计
本次案例的界面有两个，打开App时，起始界面显示，游戏界面隐藏；当点击开始后起始界面隐藏，效果如案例1。
在ui元素排版中，因为Screen无法自由的将组件摆放至任意位置，所以为了达到我们想要的界面布局效果，我们在本案例中利用到了将“标签”组件设置为透明，然后来做一些位置上的补充，以达到我们想要的ui排版效果。
需要的组件和组件属性如图5.2及表5-1所示。
图5.2组件设计界面
表5-1组件属性
组件
用途
命名
属性设置
Screen
防止其他组件的容器
——
AppName：
捕捉皮卡丘
背景图片background.png
标题展示：
不勾选
屏幕方向：
锁定竖屏
标签
用来排版
排版1
背景颜色：
透明
文本：
编辑为合适排版的内容
文本颜色：
透明
字号：
调整为合适排版的大小
标签
用来排版
标签2
背景颜色：
透明
文本颜色：
透明
文本：
编辑为合适排版的内容
字号：
调整为合适排版的大小
表格布局
实现开始按钮处于屏幕居中位置
表格布局1
列数：
3
行数：
2
按钮
用于跳转至游戏界面
开始
高度：
30percent
宽度：
70pecent
图像：
key.png
垂直布局
标签与画布的垂直布局
垂直布局1
背景颜色：
透明
显示状态：
不勾选
水平布局
实现标签与重开按钮水平排列
水平布局1
背景颜色：
透明
标签
显示“抓到”
抓到
背景颜色：
透明
字号：
24
文本：
抓到：
标签
显示抓到数字
抓到数
背景颜色：
透明
字号：
24
文本：
0
按钮
实现回到起始界面
重开
背景颜色：
透明
字号：
14
文本：
重新开始
标签
显示“逃走”
逃走
背景颜色：
逃走
字号：
24
文本：
逃走：
标签
显示逃走数
逃走数
背景颜色：
透明
字号：
24
文本：
0
画布
容纳图像精灵
画布1
背景图片：
background.png
图像精灵
用于显示运动的皮卡丘
图像精灵1
高度：
100像素
宽度：
100像素
图片：
pikaqiu.png
X坐标：
50
Y坐标：
50
音效
播放皮卡丘叫声
音效1
源文件：
pikaqiuStart.wav
计时器
使图像精灵随机变换位置
计时器1
启用计时：
不勾选
计时间隔：
1000
5.3捕捉皮卡丘的逻辑设计
本案例的流程图如图5.3所示。
图5.3捕捉皮卡丘基本流程图
首先实现的是图像精灵“皮卡丘”在界面上随机运动。
这些“皮卡丘”的运动轨迹是跳跃式的，每个1秒就在变换一次位置，这个位置的地点都是随机的。
为了实现这个效果，有两个主要的问题要解决：
1）如何控制“皮卡丘”的出现位置；
2）如何改变“皮卡丘”位置的行为规律性地定时出现？
在AppInventor里面，针对绘图和动画应用，专门提供了3个组件：
画布、图像精灵和球形精灵。
画布是绘图和动画的基础，图像精灵和球形精灵只能放置在画布上才能工作。
在画布里可以设置绘画的画笔颜色、线宽等属性，还提供多种绘画的方法（过程）供开发者调用，比如画圆、画线、画点、画字、保存等；另外还提供了多种事件的响应入口，比如被触碰、被划动、被拖动等，开发者可以在这些事情处理器中拼入响应模块，实现App的行为。
小球在画布中出现的位置是由其坐标决定的。
画布的坐标系和直角坐标系不同，如图5.4（a）所示，画布坐标系的原点（0，0）在左上角，X坐标轴往右递增，Y坐标轴往下递增。
小球的X坐标取值为其最左端离画布左边距的像素点，Y坐标为其最上方离画布上边距的像素点。
如果小球的坐标为（0，0），则在画布中的位置如图5.4（b）所示。
（a）（b）
图5.4画布坐标轴
小球的平面坐标值（x,y）决定了小球在画布上的平面位置。
如果希望小球出现在画布上任意位置时都能保持完整，那么要注意小球不能有部分超出画布边界。
这可以通过限制小球的坐标取值范围来实现。
只要小球的X坐标的取值区间为[0,画布宽度-小球直径]，Y坐标的取值区间为[0,画布高度-小球直径]就能达到要求。
同理，图像精灵亦是如此。
使“皮卡丘”在画布上随机运动，即在它们的坐标取值区间随机产生数字即可。
代码如图5.5所示。
图5.5皮卡丘随机移动的代码
这里我们运用到了一个“定义过程”的代码模块，这个模块实现的功能就是当代码模块里写好程序后，我们可以在任意其他代码模块中利用“定义过程”模块的名字来调用此代码，从而简化代码，使其易读性提高，类似于C语言中的条用子程序。
“皮卡丘”每隔1秒会变换一次位置，这就要求每隔1秒这些让“皮卡丘”移动位置的代码需要被执行一次。
这有点像每隔一天（24小时）闹钟都会闹铃，催我起床一样。
AppInventor中提供了“计时器”组件来实现这种有时间规律的事件处理。
计时器有两个主要属性，“启用计时”属性和闹钟开关一样，决定计时器是否工作。
“计时间隔”属性则决定了事件发生的周期，在本例中事件间隔是1000，即1000毫秒，那么这个计时器会每隔1秒产生一个计时事件，将执行在“计时”事件处理器中拼入的代码模块。
计时器的工作原理如图5.6所示，每隔一个计时间隔的时间就会产生一个峰值脉冲，在这个峰值时刻会触发计时处理器去执行相应的代码，而峰值之间的时间段则不引发操作。
图5.6计时器原理
通过计时器使“皮卡丘”工作的代码如图5.7所示。
图5.7计时器工作代码
当开始游戏按钮被点击后，我们要使该按钮隐藏，同时计时器工作，画布和图像精灵显示，然后播放音效，其功能代码如图5.8所示。
图5.8开始按钮的代码
检测玩家的是否抓到皮卡丘使用的是画布中“被触碰”时间处理器。
当手指触碰到画布时，就会激活该事件处理器。
触碰到皮卡丘则抓到计数加一，如果没触碰到皮卡丘则逃跑数加一。
程序如图5.9所示。
图5.9图像精灵代码
“重新开始”按钮的作用是重置两个计数，并回到起始界面，功能相对简单，代码如图5.10所示。
图5.10重新开始按钮代码
6．案例5记事本
6.1案例展示
记事本主要应用了“文本输入框”和“微数据库”组件，从而实现保存简单的文字功能。
功能演示如图6.1所示。
（a）主界面
（b）输入文字内容
（c）清除按钮功能
（d）保存文字功能，退出应用后重新打开文本内容依然存在
图6.1记事本功能展示
6.2记事本的组件设计
记事本的案例没有用到图片及音乐素材，这里就不提及了，大家可以自行添加背景图片。
本案例的组件设计及组件属性如图6.2所示及表6-1所示。
图6.2记事本组件设计
表6-1各组件属性
组件
用途
命名
属性设置
文本输入框
用于输入记事内容
文本输入框1
背景颜色：
透明
高度：
充满
宽度：
充满
提示：
留下你的心情~
允许多行：
勾选
水平布局
使按钮水平排列
水平布局1
水平对齐：
居中
背景颜色：
透明
6.3记事本的逻辑设计
保存编写的内容我们用“微数据库”组件来实现，其代码“保存数据”的参数槽有两个，一个是“标签”，另外一个是“存储值”。
其中“标签”相当于一个门牌号，当要“获取数据”时，就用到“标签”的值来查找所对应的数据。
存储数据的功能代码如图6.3所示。
图6.3保存数据的代码
当第一次打开记事本应用时，我们未保存过数据，微数据库中没有相应数据，这时获取数据是得不到数据，则App可能发生错误，所以我们要设置当没有存储数据时，或者的返回值为空。
其功能代码如图6.4所示。
图6.4初始化代码
清除数据的代码如图6.5所示。
图6.5清除功能代码
7．案例6计时器
7.1案例展示
本案例通过“计时器”组件来实现计时功能，具体使用流程如图7.1所示。
起始界面
输入倒计时时间
点击开始按钮，开始倒计时
点击暂停按钮，暂停时间
点击开始按钮，继续倒计时
点击重置按钮，回复起始状态
图7.1记事本演示流程
7.2计时器的组件设计
本案例用到了一个秒表的声音文件，其组件设计如图7.2和表7-1所示。
图7.2组件设计界面
表7-1组件属性
组件
用途
命名
属性设置
文本输入框
用于输入倒计时时间
文本输入框1
仅限数字：
勾选
7.3计时器的逻辑设计
在本案例中，我们在设置一个全局变量“时间”，其代码为
当输入框的计数时间输入完毕，点击“开始”按钮，开始倒计时。
“开始”按钮还有另外一个功能就是当时间暂停后，点击它能恢复倒计时，这是我们就要判断“时间”的值是否小于输入值且不等于零，当满足条件，则继续倒计时。
其功能代码如图7.3所示。
图7.3开始按钮功能代码
计时器工作时，每秒将“时间”减一，直到“时间”为零，同时使手机震动以提醒。
其功能代码如图7.4所示。
图7.4计时器功能代码
“暂停”和“重置”按钮的功能代码如图7.5所示。
图7.5两个按钮的代码
8．案例7猜数字游戏
8.1案例展示
本案例的游戏规则是：
从数个玩家中挑选出一个裁判，裁判在游戏起始界面输入一个“引爆数”，然后将手机传给其他玩家输入数字；当玩家输入的数字正好等于裁判输入的“引爆数”，则判定该玩家输了，接受惩罚；否则继续传递手机，让下一位玩家竞猜，直至引爆“炸弹”。
游戏流程展示如图8.1所示。
（a）起始界面，提示输入要让玩家猜的数字
（b）输入一个数字，让玩家竞猜
（c）当玩家输入一个大于待猜数的数字时，游戏发出提示，并范围变成1-竞猜数
（d）点击继续，玩家继续游戏，输入一个小于待猜数的数字
（e）这时游戏发出提示，并将范围刷新为竞猜数-100
（f）点击继续，玩家输入的竞猜数等于待猜数
（g）游戏提示游戏结束，炸弹爆炸
（h）点击继续，则继续游戏，反则退出游戏
（i）在任意界面按返回键，提示是否退出游戏
图8.1游戏展示
8.2猜数字的组件设计
1）素材准备
本案例应用到了两个图片文件，均在资源包里。
2）界面设计
界面组件的放置及组件属性如图8.2和表8-1所示。
图8.2界面组件布局
表8-1组件属性
升级会员 