App Inventor开发工具的使用

admin管理员组

文章数量:1530255

App Inventor开发工具的使用

App Inventor（AI）是一款强大的可视化编程工具，其主要特点是通过组件和块代码设计，及拖拽抽屉方式，降低了记忆难度和开发难度。

关于App Inventor学习环境搭建，请参见https://blog.csdn/cnds123/article/details/105328277，在这篇博文中，App Inventor比较全面系统地App Inventor开发环境搭建及App Inventor程序的调试工具。

本文重点介绍如何使用App Inventor开发工具编写App Inventor程序。

进入开发工具（也称为进入开发平台或开发环境）后，界面和操作大同小异。 在此以张路先生汉化的国内的服务器ai2.17coding为例介绍App Inventor开发工具的使用。

建议使用chrome浏览器打开ai2.17coding，如下登录：

 

随着时间的变化或版本的更新，你看到的页面也许有变化。ai2.17coding在线开发工具，没有设置用户的权限，所有人创建的项目放到一起，可以被所有人看见修改、删除，因此要注意导出你的项目保存到本地。

打开App Inventor的编程环境如下图所示：

 

注意视图切换部分，英语是

单击“设计”和“编程”按钮可以切换“设计视图“和“编程视图”之间切换。

单击“编程”按钮后切换到“编程视图”：

 “设计视图“，是组件设计器，用于使用组件进行界面设计，根据你要实现的功能，选用合适的组件，来构成软件的界面。

组件是你用来创建应用的基本元素，有些组件非常简单，如“Label”（标签）组件，它用于在屏幕上显示文字；或者如“Button”（按钮）组件，轻按它则引起一个动作。其它组件则要更复杂：一个绘图的“Canvas”（画布）组件可以容纳静止图像或动画；“accelerometerSensor”（加速度传感器）组件是一种运动传感器，它的工作原理类似于Wii 控制器，它可以检测到设备的移动或摇晃；还有的组件用于编写并发送短信、播放音乐和视频以及从网站获取信息等等。

中部的白色区域称为工作区域【预览（Viewer）窗口】，用于放置应用中所需的组件，你可以按照自己的喜好来安排这些组件。预览窗口只能粗略地显示应用的外观，例如，与测试设备中的应用相比，在预览窗口中，一行文字可能会在不同的地方换行。如果想看到应用的实际外观，可以将应用下载到测试设备上（稍后我们会在“打包应用程序并下载”的部分详细介绍），或者下载App Inventor自带的模拟器。

预览窗口的左侧是组件面板（Palette），其中包含了可供选择的各类组件。该面板按类别划分为几个部分，默认情况下，只有用户界面（User Interface）组件可见，可以通过点击其他类别的标题，如Media（媒体）等，来查看其他组件。

预览窗口的右侧是组件列表（Components），显示了项目中的所有组件，拖动到预览窗口中的任何组件都将显示在该列表中。目前，该项目中只有一个组件：Screen1，它代表设备的屏幕。

组件列表下方是“素材”列表【媒体（Media）列表】，显示项目中的所有媒体（Media）资源（图像和声音），可以通过“上传”按钮添加。

最右边的部分用于显示组件的属性面板，在工作区域（预览窗口）中单击某个组件，将在属性（Properties）面板看到该组件的一系列属性。属性描述了组件的详细信息（如，单击Label组件可以看到它的颜色、文字内容、字体的属性。），可以修改属性值。当前显示的是屏幕（名为Screen1）的属性，包括背景颜色、背景图像及标题等。

App Inventor在新建一个项目就会默认创建一个组件，这个组件叫：Screen1，它是其它组件，如按钮，标签等的容器，这个Screen相当于手机的屏幕，是用户界面设计的地方。

可视组件（可以理解为应用中确实可见的组件），如：Label组件、Button组件；非可视的组件，如Sound（声音）组件、AccelerometerSensor（加速度传感器）组件，用于检测设备的移动或摇晃。可视组件可以添加到类似如手机的窗口中，；非可视组件被添加到类似如手机的窗口的下面。

如何进行界面设计（向类似如手机的窗口添加组件）呢？例如向类似如手机的窗口添加“Label”（标签）组件，在组件面板（Palette），单击Label（标签）组件，按下鼠标左键将其拖动到类似如手机的窗口中。在组件设计器右侧可以看到Label（标签）组件的Properties（属性）框，可以根据你的要求进行设置。

 

“编程视图”，用于编程设计，AI（App Inventor）编程语言被称为块语言。在块编辑器窗口中，可以为组件设定行为：做什么以及何时做。

在块编辑器窗口的左侧，“代码块”（Blocks）标题下面，可以看到许多分属不同类别的内置块，内置块分为8大类，是制作应用的重要支撑。内置块下方是我们在设计视图中创建的所用的所有组件，如：Screen1、标签1（Label1），点击它们就像打开抽屉，将看到一组适用于该组件的可选程序块。

如何使用代码块（编程设计）呢？

下图展示的是点击“按钮1”时的显示，就像打开了按钮1”这个“抽屉”，可以看到一组适用于该组件的可选代码块（Blocks）：

可以将“抽屉”中的代码块拖动到到工作区中。不同的代码块合理地拼接在一起就能构成一段程序。

 

代码块的颜色和形状的含义。代码块的形状：下凹槽为逻辑块，左凹槽接收属性值；凹凸形状能否吻合决定代码块能否正确组合。代码块的颜色代表了不同的功能，触发事件代码块为土黄色，调用方法代码块为深紫色，设置属性代码块为深绿色，读取属性代码块为浅绿色。

垃圾桶图标的作用：将逻辑块拖动到右下角的垃圾桶图标，删除所拖动逻辑块。

背包图标的作用：将逻辑块拖动到右上角的背包图标，可以在多个屏幕中共享逻辑块，也就是逻辑块的“复制”与“粘贴”功能。

 

提醒：现在，对这些描述，先有个基本了解即可，如果你感到迷惑不解，先不用担心，随着学习的深入，你再回头来看这些概括描述，就能形成总体认识。

App Inventor开发流程

（一）功能设计

思考要实现什么功能，据此准备素材（图片文件、声音文件）等。对于小型软件（功能简单的软件）这一步可以省略，对于大型软件，这一步是不可缺少的。

 

（二）创建新项目

 

（三）在“设计视图“中进行界面设计

根据你要实现的功能，选用合适的组件，来构成软件的界面

 

（四）在“编程视图”中编程设计，

在块编辑器中使用“代码块”（Blocks）编程，为组件设定行为：做什么以及何时做。

 

（五）测试

上述环节可能需要反复循环，直至作品符合要求。

 

（六）发布

在App Inventor开发工具中使用“编译“菜单编译成apk文件，给用户使用。

 

下面，给出具体的例子。

功能设计

素材：kitty.png；meow.mp3

源文件：HelloPurr.aia

【功能描述】

单击图片，发出猫叫声，显示文字“我害羞，别碰我！”；摇晃手机，手机震动，显示文字“我头晕，别摇我！”。

 

创建新项目

 

界面组件设计:

Screen组件的属性，需要注意的指出一下：

图标（Icon ）属性，也必须要你的应用生成APK后，安装在手机和平板上，才可以看到你生成应用的图标，如果不设置图标，就会以默认的App Inventor应用图标代替。

垂直对齐（AlignVertical），要注意一点，如果“允许滚动”属性勾选了，那“垂直对齐”的“居下”的无法设置。

其他属性采用默认。

本项目中，需要你用拖动的方法添加4个组件：

Button1组件、Label1组件、Sound1组件、AcceleromerSensor1组件，它们的属性设置参见下图：

设置好后显示如下图：

 

编程设计

 

测试效果

例子比较简单，主要是让新手有一个直观易懂的了解，有了这些，深入学习就有了基础。

本文标签： 开发工具appinventor