APP INVENTOR 一款图形化编程制作app的软件

浩南哥

  在我们平时的生活中，手机已经是越来越得到广泛的应用。现在手机上面的APP可以说是琳琅满目。那你们知道制作APP的方法吗？现在对于我们就有一个图形化编程软件，能够帮助大家快速制作一个APP了。那就让我们来认识一下它吧。

  APP INVENTOR 是由谷歌公司发表的简易Android平台编写软件，可以编写简单的APP应用，这篇文章主要介绍APP INVENTOR的大体使用方法，并演示完成一个简单的APP小程序。

App Inventor的编程主要是在浏览器下进行，分为设计和编码两大界面，其设计主界面如图1-1所示，编码主界面如图1-2所示：

图 1-1 设计主界面

图1-2 编码主界面

   启动App Inventor需要在浏览器中访localhost：8888。如果你是第一次使用App Inventor，你会看到项目（Projects）页面，即设计主界面，其中间是空白界面，当新建项目后，就可开始编程。单击页面左上角的项目栏，选择新建项目，如图1-3所示，输入项目名称“TEXT”，然后单击确定。

图1-3

图1-4

  设计主界面分为四块，分别为组件面板、工作区域、组件列表、属性面板。接下来一一介绍这四个面板。

  首先是组件面板，组件面板分为用户界面、组件布局等分类，如图1-4所示，里面包括了制作APP的常用控件，组件是创建应用的组成元素，就像菜谱中的原料。有些组件非常简单，如“Label”（标签），它只管在屏幕上显示文字；或者如“Button”（按钮），轻按它可以发起一个动作。其它组件则要更复杂：一个绘图的“Canvas”（画布）组件可以容纳静止图像或动画；“accelerometerSensor”（加速度传感器）组件是一种运动传感器，它的工作原理类似于Wii【2】控制器，它可以检测到设备的移动或摇晃；还有的组件用于编写并发送短信、播放音乐和视频以及从网站获取信息等等。可直接拖拽到工作区域，当拖拽到工作区域的同时，在组件列表中会显示对应的控件名，在属性面板中可以修改所拖控件的属性，例如大小颜色。

  点击右上角的“编程”，则进入编码主界面，分为代码块和工作区域，点击代码块中的任一内置块，则会显示如图1-5所示的代码模块。点击代码模块，就可拖拽代码到工作区域，并且可以实现代码的拼接。如图1-6所示。

                                  

图1-5

图1-6

  当代码拼接完成，则可选择编译，如图1-7所示，将封装好的APK下载到手机，即可运行APP。

图1-7

  整个APPINVENTOR的编码流程如上所示，现在我们来介绍一个功能十分简单的小程序编写。

  App Inventor的存储类组件中，有一个文件管理器（file）组件，可用于读取文本文件。文件的来源可以是存储在手机中指定文件夹下的文件，也可以是在项目创建时加载到项目中的文件。

这一功能可用于数据的读取，例如，一位母亲在孩子出生后，每半年为孩子测量身高，并保存到一个文本文件中，格式如下（单位为cm，共37项数据）：53.8,  73.0,   81.8,  88.9,   95.3,  100.5,104.1, 108.1, 111.8, 115.7, 119.6, 123.3, 126.6, 129.9, 133.7, 137.2, 130.4,143.6, 146.5, 149.4, 152.0, 154.9, 158.1, 161.7, 166.0, 170.2, 174.2, 177.2,179.4,  181.0, 182.0, 182.8, 183.2, 183.5, 183.7, 183.9, 183.9

  将数据保存为high.txt，文件编码为默认的ANSI，用App Inventor将数据读入程序，并绘制孩子的身高增长曲线。（之前我画蛇添足般地将文件保存为UTF-8格式，结果在使用四舍五入功能时出错！）

一、用户界面及画布组件属性设置

二、编码

1、档屏幕初始化时，在画布上绘制坐标轴

  画布的宽、高均为300像素。为了美观，在画布边缘保留了20像素的空白，每隔10个像素画一个小标记，每隔50个像素画一个大标记，同时标注数字。横坐标为年龄，纵坐标为身高，单位为分米（10厘米）。坐标绘制效果如下图：

2、点击【开始绘图】按钮时，加载文件，并将文件中的数据分解为列表，然后调用绘图过程。

  需要提醒一点，绘制线段的循环次数比列表长度少一次，因为每次循环的绘制过程需要两个点的坐标。

绘制结果如下：

三、有两种方式可以加载文件：

1、直接将文件保存到手机sd卡中文件夹AppInventor/Data下，上面的例子就是采用这种方式。

2、将文件下载到项目中，

此时，文件管理器组件的文件名属性需要修改为"/AppInventor/assets/high.txt"，如下图所示：

这个例程提供了一个思路：将数据存放在文本文件中，用文件管理器组件及列表变量可以对数据进行整理，并用不同方法（表格或图示）呈现出来。