人人都能开发安卓App：App Inventor 2应用开发实战-试读1-3章

第1章AppInventor2入门本章介绍AppInventor2的基础知识、环境搭建及界面，为后面的应用开发打下基础。∷　人人都能开发安卓App4　　　　　　a）在计算机上创建项目　　　　　　　　　　　b）通过安卓设备实时调试图1-1　Wi-Fi真机开发方式以下是方式一的步骤。步骤1：下载安装MITAppInventorCompanion配套App可以扫描图1-2中的二维码从谷歌PlayStore下载安装，这也是推荐方式。另外也可以直接下载APK方式安装，地址为http://appinv.us/xAI2cf34。小窍门☆如果你的安卓手机或平板电脑未安装二维码扫描App，也可以直接到谷歌应用市场搜索“MITAppInventorCompanion”然后安装。如果希望直接使用APK方式安装，请将手机设置为“信任未知源”，这在调试和安装软件时同样适用。步骤2：将计算机和安卓设备连接到同一无线网络记住，只有当计算机和安装有配套App的安卓设备连接到同一无线网络时，才能将你正在开发的App显示到安卓设备上，便于调试。换句话说，你的计算机和安卓设备必须在同一局域网。步骤3：打开AppInventor的项目将它与安卓设备连接打开AppInventor，新建一个项目，单击“Project”→“StartNewProject”，然后输入一个项目名称（只能使用英文字母、数字或下划线组成项目名称）。接下来在AI2浏览器的顶部菜单中选择“Connect”→“AICompanion”，如图1-3所示。图1-2　AICompanion下载地址第1章　AppInventor2入门　∷5图1-3　AICompanion连接然后浏览器中会出现一个二维码对话框。使用你的安卓设备像打开其他应用一样的方式开启AICompanion应用。然后单击“ScanQRcode”按钮开始扫描浏览器中的二维码，如图1-4所示。图1-4　扫描二维码几秒钟之后，正在开发的App就会显示在安卓设备上了。在Designer或Blocks界面做了修改之后，安卓设备会即时更新你的App，这种特性叫做“实时调试”。假如你的手机没有摄像头，或者其他原因导致无法扫描，你也可以直接将二维码对话框中“Yourcodeis”下面的6个字母输入安卓设备中打开的配套App的输入框“SixDightCode”中，然后单击“connectwithcode”按钮。假如你 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 的App没有显示在安卓设备上，可能原因如下：●你的配套App已经过期，需要更新。按步骤1的方法重新安装即可。●你的安卓手机或平板电脑没有连接到Wi-Fi。确认你的配套App下方显示了网络IP地址。●你的安卓设备没有和计算机连接到同一网络。确认计算机和手机连接的是同一Wi-Fi网络。∷　人人都能开发安卓App6方式二：安装并运行AI2模拟器假如没有安卓手机或平板电脑，你仍然可以使用AI2模拟器来调试App。AI2提供了一个安卓模拟器，同安卓设备一样，但需要在你的计算机上运行。你可以在安卓模拟器中调试程序，并打包分发到其他安卓设备，甚至上传到谷歌PlayStore。很多学校或课后兴趣小组都使用模拟器这种方式来开发。注意：模拟器与真机在部分组件测试时可能有所不同。使用模拟器来开发，需要首先在计算机上安装相应的软件，步骤如下，如图1-5所示。步骤1：在计算机上安装AppInventorSetup软件包下载软件包（网址：http://appinv.us/aisetup_windows），双击打开软件包，像安装其他软件一样单击“Next”按钮（注意：必须使用管理员权限安装软件包）。如以前使用过AppInvnetor1，请先卸载软件。另外在双击软件包时，可能会弹出“不可信任的发行者”对话框，请直接单击“确定”以继续。通常情况下AppInventorSetup软件可以自己找到安装程序的位置，但假如该软件询问软件安装位置，直接输入“C:\ProgramFiles\Appinventor\commands-for-Appinventor”即可。如果你使用的是64位操作系统，请将ProgramFiles替换成ProgramFiles（x86）。步骤2：启动aiStarter我们需要辅助程序aiStarter才能在浏览器中启动模拟器。该程序已经在步骤1中安装AppInventorSetup软件包时安装好了，并在桌面创建了一个快捷方式，如图1-6所示。双击该图标，便可启动辅助程序。在Windows操作系统下该程序默认开机自启动。启动后将会出现图1-7所示的窗口。图1-5　使用模拟器调试图1-6　aiStarter桌面图标第1章　AppInventor2入门　∷7图1-7　aiStarter启动界面步骤3：打开AppInventor项目并连接到模拟器同方式一一样，转到AppInventorCompanion（网址ai2.appinventor.mit.edu），打开或创建一个项目。然后从AppInventor的顶部菜单中依次单击“Connenct”→“Emulator”菜单项，如图1-8所示。图1-8　连接模拟器浏览器中央会弹出一个对话框，如图1-9所示，告诉我们正在连接模拟器，可能需要几分钟时间。同时，aiStarter窗口会有一些更新的状态信息，如图1-10所示。接下来出现模拟器窗口，依次出现如图1-11的模拟器启动过程。图1-11a为启动初始状态，启动成功后，会显示图1-11b所示的状态。启动成功到可以显示你正在开发的App，可能还需要几分钟时间，这期间模拟器会准备SD卡：从模拟器顶部的状态栏中可以看到相应提示。完成该工作后，模拟器就会启动并显示你正在AppInventor中创建的App。图1-9　连接模拟器中∷　人人都能开发安卓App8图1-10　aiStarter窗口状态　　　　　　　　　　　　　　　a）　　　　　　　　　　　　　　　　b）图1-11　模拟器窗口提示由于AppInventor还处于beta测试版，软件功能在不断变化，相应的配套软件更新有可能会滞后。如果遇到模拟器有类似如图1-12所示的画面，表示模拟器中的配套软件不是最新的版本，AppInventor会自动更新它。第1章　AppInventor2入门　∷9图1-12　更新模拟器在浏览器中单击“OK”按钮，将会下载最新版的配套App，然后自动安装到模拟器中。安装时，需要在模拟器中确认替换App。提示如果你正在创建的App没有在模拟器中显示，请从以下方面排除故障。●确认是否是某一特定的项目不能显示？如果是某一项目的App没有显示，而其他的工作正常，则可能是你的App有问题。●确认是否有其他设备连接到你的计算机上？因为目前AppInventor2配套软件只能处理一台设备或模拟器。如果是这种情况，请关闭其他设备或模拟器。●确认你的配套软件是否安装正确？AppInventor配套软件目录CommandsforAppInventor应该安装在C:\ProgramFiles或C:\ProgramFiles（x86），当安装目录不在默认目录时，配套软件将不能启动模拟器。●确定你的浏览器是否运行了一些阻止连接模拟器的插件？已知的一个名叫NoScript的Firefox插件会阻止连接模拟器，假如你运行了类似的插件，使用AppInventor时最好禁用该插件。●AppInventor是否提示你重启配套App？AI配套软件包括运行在计∷　人人都能开发安卓App10算机上的模拟器、aiStarter，还包括运行在模拟器中的配套App。如果AppInventor不能和模拟器通信，它可能会提示你重启配套App。遇到这种情况，简单的方法就是关掉模拟器，然后重新开始步骤3。开始步骤3前，需要单击“ResetConnection”选项。●你是否等了足够长的时间？模拟器启动需要一个过程，特别是在你的计算机配置不是很高的情况下，需要耐心等待足够长的时间。小窍门☆模拟器其实和真实安卓设备类似，可以改变系统语言，让界面变成中文版。具体设置步骤为：单击“Menu”，单击模拟器Setting，拖曳模拟器屏幕，定位到Language&Keyboard并单击，继续单击SelectLanguage，拖曳模拟器屏幕，单击简体（中文）。你的模拟器就显示中文界面了。更改模拟器分辨率。默认的模拟器分辨率是最小的HVGA。在C:\ProgramFiles\AppInventor\commands-for-Appinventor目录，找到run-emulator.bat，右击编辑，在最下方找到skinHVGA-AppInventor，可以更改为C:\ProgramFiles\AppInventor\commands-for-Appinventor\from-Android-SDK\platforms\android-8\skins目录下的分辨率，如skinWVGA854。方式三：使用USB数据线连接安卓手机或平板电脑当你使用安卓手机或平板电脑连接AppInventor时，设备中配套App管理着与计算机中的配套软件通过计算机中浏览器建立的连接。方式一中步骤1已经说明了如何安装配套App，并且说明了使用无线网络来建立这种连接实时调试应用是AppInventor官方推荐的连接方式。但是仍然会有一些场所不提供Wi-Fi网络，或者禁止连接Wi-Fi网络的设备彼此通信，例如，某些学校、酒店、会议中心等。尽管经验丰富的计算机使用者可以使用小型路由器（例如小度Wi-Fi、360Wi-Fi）来建立小型无线网络，或者使用笔记本无线网卡提供小型无线网络，但是AppInventor还是提供了使用USB数据线来连接安卓手机或平板电脑的方式，如图1-13所示。在Windows操作系统上使用USB数据线来连接AppInventor和安卓设备最大的不便就是安装驱动程序（Mac和Linux操作系统不需要特别安装驱动程序），并且不同厂家的设备需要不同的驱动程序。因此，你需要查询设备官方网站来获取驱动程序。第1章　AppInventor2入门　∷11　　　　　　a）在计算机上创建项目　　　　　　　　　　　b）通过安卓设备实时调试图1-13　USB调试步骤1：在计算机上安装AppInventorSetup软件包该步骤同方式二步骤1。步骤2：下载安装MITAppInventorCompanion的配套App该步骤同方式一步骤1。步骤3：启动aiStarter该步骤同方式二步骤2。步骤4：在计算机上为安卓设备安装驱动程序，并打开调试模式如之前所述，在Windows上使用USB数据线调试安卓应用，需要在系统设置里打开开发者选项，确保打开USB调试模式。在Android3.2或以下版本操作系统的设备上，你可以在设置→应用程序→开发者选项中找到相关选项；在Android4.0或以上版本的设备上，相关选项直接在设置→开发者选项里。提示Android4.2或以上版本的设备中，开发者选项默认是隐藏的。要使该选项可见，在设置→关于手机中单击几次BuildNumber，然后返回设置将可以看到开发者选项。步骤5：使用USB数据连接计算机和安卓设备要使用USB数据线连接安卓设备并调试应用，需要为安卓设备安装驱动程序。安卓设备连接计算机有很多种模式，比如大容量存储设备模式、多媒体设备模式，甚至上网卡模式。AppInventor官方建议使用大容量存储设备模式来连接计算机，并安装相应的驱动程序。由于制造安卓手机或平板电脑的厂商较多，请仔细阅读 说明书 房屋状态说明书下载罗氏说明书下载焊机说明书下载罗氏说明书下载GGD说明书下载 或在线支持网站来安装驱动程序。第1章　AppInventor2入门　∷13英文中文功能Saveproject保存项目保存Saveprojectas另存项目另存为Checkpoint检查点方便返回项目的项目点Exportselectprojecttomycomputer导出项目到计算机导出Exportallproject导出全部项目全部导出Importkeystore导入密钥在应用商店（PlayStore）更新应用时必须使用同一密钥Exportkeystore导出密钥Deletekeystore删除密钥第二个界面为设计界面，新建或单击任一项目后会进入该界面，如图1-15所示。图1-15　设计界面设计界面也称UI界面，也就是设计程序外观，即设计用户直接看到的界面，该界面有4个栏目。第一栏为面板栏（Palette），用于选择组件，选取的组件需要拖曳到第二栏。第二栏为视图栏（Viewer），是用户直接面对的项目外观。第三栏上方为组件栏（Components），显示已添加的组件；下方为媒体栏（Media），用来上传声音、图片等素材。第四栏为属性栏（Properties），用来设置组件的属性。第三个界面为程序模块界面，单击右上角的Blocks进入，如图1-16所示。Blocks是程序后台的模块。左侧为模块栏（Blocks），用于将需要的模块拖曳到右侧视图栏。右侧视图栏为程序核心，各程序模块需拼接在一起。视图栏左下角显示警告信息，右下角为垃圾桶，可以将不用的模块拖到垃圾桶删除。（续）∷　人人都能开发安卓App14图1-16　程序模块界面提示模块操作有几个快捷键，如Ctrl+C复制、Ctrl+V粘贴、Delete删除，Ctrl+鼠标滚轮可放大缩小视图。将鼠标悬停在模块上，会出现模块使用说明。右击模块，弹出菜单如表1-2所示；在背景空白处右击，弹出菜单如表1-3所示。表1-2　模块右键菜单英　　文中　　文功　　能Duplicate复制复制模块AddComment添加注释方便自己和他人读懂程序CollapseBlock折叠模块将模块折叠，节省视图空间ExpandBlock展开模块展开折叠模块（折叠后激活）DisableBlock失活模块当前模块无法使用，用于调试程序DeleteBlock删除模块删除Help帮助在线帮助网页表1-3　背景右键菜单英　　文中　　文功　　能CollapseBlocks折叠所有模块节省视图空间ExpandBlocks展开所有模块展开模块查看模块内容ArrangeBlocksHorizontally水平排列模块水平排列ArrangeBlocksVertically垂直排列模块垂直排列ArrangeBlocksbyCategory按类别排列按类别排列模块Help帮助在线帮助网页第2章AppInventor2开发基础要素本章通过几个简单的小程序来学习AppInventor2的基本组件、指令和 流程 快递问题件怎么处理流程河南自建厂房流程下载关于规范招聘需求审批流程制作流程表下载邮件下载流程设计 控制语句。第2章　AppInventor2开发基础要素　∷17单击继续按钮（Continue）。图2-2　欢迎界面2）在项目界面（Project）栏单击新建项目（NewProject），如图2-3所示。图2-3　新建项目弹出命名项目界面，命名为“HelloWorld”，如图2-4所示。在这里要注意，项目名只能以英文字母开头，且名中只能包括英文字母、下划线和数字，不能包含空格或中文。图2-4　项目名为“HelloWorld”3）在左侧面板（Palette）的用户界面（UserInterface）中单击标签（Lable）组件，并按住鼠标左键将其拖曳到中间视图（Viewer）窗口，如∷　人人都能开发安卓App18图2-5所示。表2-1为HelloWorld的组件说明。图2-5　选取Lable组件表2-1　HelloWorld的组件组　　件所属工具组命　　名作　　用LabelUserInterfaceLabel1显示文本“HelloWorld”Lable组件可以直接在屏幕上输出文本信息，用户无法进行修改，无法触发事件，常用来对项目功能等进行描述。在右侧的属性面板（Properties）找到Text，将“TextforLabel1”修改为“HelloWorld!”，如图2-6所示，其他项目如字体颜色、大小、属性等在这里暂不修改。这样HelloWorld项目编写完成。2.AICompanion调试第1章介绍了程序调试方法有三种，这里使用Wi-Fi模式AI配套App（AICompanion）进行调试，过程略。图2-6　将Lable1的Text修改为“HelloWorld!”第2章　AppInventor2开发基础要素　∷193.程序打包上面的程序只能你自己使用，如果你想分享给朋友或上传到App市场，那就需要打包成apk文件，AppInventor实现了一键打包的功能，在计算机端单击“Bulid”→“App（save.apktomycomputor）”，完成打包工作，如图2-7所示。图2-7　打包apk到计算机打包过程如图2-8所示，当进度条显示100%后即可完成程序打包。图2-8　打包过程这样我们的第一个HelloWorld应用就全部完成了。这个过程中没有使用任何代码，充分显示了AppInventor的便利性。任务小结本节主要介绍了App的开发、调试、打包流程，这也是AI开发的基础流程，后面我们将省略一些常规步骤，因此需要熟练掌握。这里提到的Lable组件是介绍的第一个组件（AI中的基本元素）。Lable组件常用来描述软件的功能，它只有属性，没有事件和方法。自我实践1.学习使用USB数据线和模拟器调试应用。2.设置HelloWorld应用的字体属性。第2章　AppInventor2开发基础要素　∷21●单击“下一页”按钮，显示下一页漫画。●单击“上一页”按钮，显示上一页漫画。●到达最后一页，下一页按钮无法单击，提示已到最后一页。●到达第一页，上一页按钮无法单击，提示已到第一页。UI设计首先找到漫画书素材，统一图片大小，命名为1.jpg、2.jpg、3.jpg、4.jpg，通过Media面板上传。漫画书UI界面为：上方图片（Image）显示漫画，下方为上一页、下一页按钮（Button），两个按钮显示在同一排。图2-10显示了应用在设计界面中的截图，按图来创建水平布局（HorizontalArrangement）组件，最后添加提示（Notifier）组件。Image的属性设置为Picture：1.jpg，Width：320，Height：250。Button1的属性Text设置为“上一页”，Button2的属性Text设置为“下一页”。Screen属性Title设置为漫画书。图2-10　漫画书AppUI设计表2-2是整个App所需要的组件说明。表2-2　组件说明组　　件所属工具组命　　名作　　用UI属性Screen—Screen1标题Title：漫画书ImageUserInterfaceImage1显示漫画中的图片Picture：1.jpgWidth：320Height：250∷　人人都能开发安卓App22组　　件所属工具组命　　名作　　用UI属性ButtonUserInterfaceButton1上一页Text：上一页ButtonUserInterfaceButton2下一页Text：下一页HorizontalArrangementLayoutHorizontalArrangement1水平放置“上一页”和“下一页”按钮默认NotifierUserInterfaceNotifier1提示已到第一页或最后一页默认基础知识1.变量变量来源于数学，是计算机语言中能存储计算结果或表示值的抽象概念。在AI中，变量首先要声明，声明后的变量才可以通过get模块调用。声明时需要定义变量名，变量名要以英文字母或下划线开头，不能以数字开头，不能使用中文。变量命名的原则是便于理解程序，可以使用英文或拼音等简写。AI中的变量类型有数字型（number）、字符型（text）、列表型（list）和逻辑型（logic）。变量声明时需要初始化赋值，变量类型根据赋值的类型来确定，如变量值为true则为逻辑型，emptylist为列表型。变量包括全局（globle）变量和局部（local）变量。全局变量在整个App中都可以调用，而局部变量只能在事件模块中调用，如图2-11所示。2.属性组件属性是AI中用来设置组件的大小、颜色、位置、速度等功能，模块用绿色显示。属性多为成对出现，如setButton.Textto表示设置按钮的文本，而Button.Text为调用Button的文本。组件属性都有其自身属性，多用来与list结合使用，如图2-12所示。另外属性设置可以在前端UI界面设置，也可以在Blocks模块中设置，可以根据习惯需要选择，在前端UI设置比较直观方便，建议使用此种方法。　　　　　　　　　图2-11　全局变量与局部变量　　　　　　图2-12　组件属性示例　　　　（续）第2章　AppInventor2开发基础要素　∷233.事件事件类型是AppInventor的一个重要概念，用来连接不同的程序动作，如按钮的单击、长按等，当单击按钮或满足其他条件时激活其他的程序运行，Blocks中一般用when…Click、do…表示，为暗黄色马蹄形，如图2-13所示。不是所有的组件都有事件类型。AppInventor包括的事件类型见表2-3。表2-3　事件类型事件类型举　　例用户发起的事件当用户单击Button1时，执行……初始化事件当应用启动时，执行……计时器事件当20毫秒过去时，执行……动画事件当两个物体碰撞时，执行……外部事件当手机收到短信时，执行……4.方法方法是直接触发组件的一个内部程序，如隐藏键盘、弹出对话框、保存数据等，不是所有的组件都有方法类型。方法不能单独使用，必须在事件模块中才能激活，模块中用紫色来表示，如图2-14所示。5.if…then…else流程控制任何编程语言都有流程控制，AI中使用了简单的流程控制语句，例如，if…then…else为条件控制流程，满足if条件时，执行then中的语句，否则执行else中的语句，如图2-15所示。　　　　　　　　　　　　　　图2-14　方法类型示例　　　　　　图2-15　if…then…else流程控制小窍门☆此处为双向条件控制模块，需要在单向条件控制模块中单击扩充项目图示来建立：拖曳else模块到if模块中。图2-13　事件类型示例∷　人人都能开发安卓App24模块编辑1.定义全局变量定义全局变量number，表示漫画书的页码，初始值为1。页码随着按钮单击增加和减少。操作方式为在Blocks界面中Variables模块拖曳initializeglobalnumberto到Viewer界面，如图2-16所示。2.“下一页”按钮事件当每次单击“下一页”按钮时，全局变量number在自身数值上加1，然后显示当前页码图片，当到达第4页时，“下一页”按钮变成不可单击（false），同时显示提示“已是最后一页”，如图2-17所示。图2-17　“下一页”按钮事件注意，上面的模块使用了if…then…else流程控制。3.“上一页”按钮事件与“下一页”按钮的事件类似，如图2-18所示。图2-18　“上一页”按钮事件图2-16　定义全局变量number∷　人人都能开发安卓App26●Camera组件使用。●横屏使用。●UI布局。任务描述涂鸦板App界面设计可参考图2-19，实现的功能如下：图2-19　涂鸦板App实例图●横屏。●通过手指在画布上画线。●选取不同颜色。●通过滑动条调整画笔粗细。●保存涂鸦图像到指定位置并命名。●打开保存的图像。●对拍照后的图像进行涂鸦。UI设计新建项目palette，Screen命名为涂鸦板。为增大涂鸦板的空间，使用横屏操作。横屏操作只需在Screen的ScreenOrientation属性选择Landscape即可。布局采用了复合布局，首先是上下布局，使用两个HorizontalArrangement分开。上方再分为左右布局，左侧通过VerticalArrangement来选择颜色，右侧为画布区域。下方分别为保存、清除、拍照按钮、图片库组件、标签组件以及滑块组件，最后增加照相机组件和时钟组件。注意体会嵌套布局，前端UI设计如图2-20所示。第2章　AppInventor2开发基础要素　∷27图2-20　涂鸦板AppUI设计表2-4是整个App所需要的组件说明。表2-4　组件说明组　　件所属工具组命　　名作　　用UI属性Screen—Screen1横屏ScreenOrientation：LandscapeTitle：涂鸦板HorizontalArrangementLayoutHorizontalArrangement1上下布局Width：FillparentVerticalArrangementLayoutVerticalArrangement1放置颜色选择按钮Height：FillparentHorizontalArrangementLayoutHorizontalArrangement2放置功能按钮默认ButtonUserInterfaceBtn_Black选取黑色BackgroundColor：blackText：Width：50Height：FillparentButtonUserInterfaceBtn_Red选取红色BackgroundColor：RedText：Width：50Height：FillparentButtonUserInterfaceBtn_Green选取绿色BackgroundColor：GreenText：Width：50Height：Fillparent∷　人人都能开发安卓App28组　　件所属工具组命　　名作　　用UI属性ButtonUserInterfaceBtn_Pink选取粉色BackgroundColor：PinkText：Width：50Height：FillparentButtonUserInterfaceBtn_Yellow选取黄色BackgroundColor：YellowText：Width：50Height：FillparentCanvasUserInterfaceCanvas1画布区域Width：FillparentHeight：200ButtonUserInterfaceBtn_Save保存画布Text：保存ButtonUserInterfaceBtn_Clear清除画布Text：清除ButtonUserInterfaceBtn_Camera调用照相机组件拍照Text：拍照ImagePickerMediaImagePicker1打开图片库Text：打开LabelUserInterfaceLabel1提示文字Text：笔刷SliderUserInterfaceSlider1调整笔刷粗细Maxvalue：10Minvalue：1ThumbPosition：5Width：150ClockUserInterfaceClock1调用系统时间命名保存图片默认CameraMediaCamera1调用手机镜头拍照默认基础知识组件宽高如何设置？AI组件的宽高属性有3个选项，分别是自动（Automatic）、填充父类（Fillparent）和自定义大小，系统默认为自动。自动一般为组件的默认大小，填充父类为与父类宽高相同，如有Canvas或Layout，则与Canvas和Layout相同；如没有，则与Screen相同。自定义大小单位为像素。要选择合适的属性，需要在手机中不断调试。模块编辑1.画线模块涂鸦主要是通过在Canvas上的画线操作来完成的，响应事件为Canvas（续）第2章　AppInventor2开发基础要素　∷29的Dragged（拖曳），响应方法为DrawLine。Dragged事件产生3个坐标参数，分别为start（起始点）、prev（前一点）、current（当前点），在涂鸦时需要选用prev及current作为DrawLine事件的参数，如图2-21所示。图2-21　画线模块2.选取颜色当单击不同颜色按钮时，画笔颜色变为相应的颜色，依次制作5个按钮事件，如图2-22所示。3.画笔粗细调整画笔粗细，这里使用Slider组件滑动调整，根据滚动条位置获取画笔粗细大小，如图2-23所示。图2-23　调整画笔粗细4.保存功能保存涂鸦完成的图片，可以通过调用Canvas的Save方法，系统默认保存位置在mydocuments/pictures路径。为了方便，可以将图片另存为的图片库路径修改为dcim/camera/，调用Canvas的SaveAs方法。同时，为了能够保存不同图片，以系统时间来命名，如图2-24所示。图2-24　保存图片图2-22　选取颜色第2章　AppInventor2开发基础要素　∷31及，人们越来越习惯通过手机来 记录 混凝土 养护记录下载土方回填监理旁站记录免费下载集备记录下载集备记录下载集备记录下载 一些提醒事项或众多复杂的密码，使用AI也可以制作一款个性化的便签App。学习目标●Textbox组件使用。●Listview组件使用。●TinyDB组件使用。●List变量使用。●Procedure模块使用。●基于用户体验的细节考虑。任务描述便签App界面设计可参考图2-28，实现的功能如下。图2-28　便签App实例图●显示所有便签内容。●添加新便签。●选择修改便签。●删除便签。●清空便签。∷　人人都能开发安卓App32UI设计新建项目Memo，Screen命名为便签。UI设计采用上下布局，最上方是输入和显示栏，用来增加和修改便签，使用Textbox组件；中间是功能按钮，使用HorizontalArrangement和4个Button组件；下方为显示区域，使用ListView组件，最后添加TinyDB组件。通过查阅ListView说明，使用该组件时需将Screen的Scrollable（滚动）属性设置为false，可以直接在面板属性取消勾选。由于ListView的默认背景为黑色，为统一色调，将Screen的背景也设置为黑色，前端UI设计如图2-29所示。图2-29　便签UI设计表2-5是整个App所需要的组件说明。表2-5　便签组件说明组　　件所属工具组命　　名作　　用UI属性Screen—Screen1基础设置Title：便签BackgroundColor：BlackScrollable：不选TextBoxUserInterfaceTextBox1增加修改便签，显示选中便签Hint：Width：FillparentHorizontalArrangementLayoutHorizontalArrangement2放置功能按钮Width：FillparentButtonUserInterfaceBtn_Add增加便签Text：添加Width：Fillparent第2章　AppInventor2开发基础要素　∷33组　　件所属工具组命　　名作　　用UI属性ButtonUserInterfaceBtn_Edit修改便签Text：修改Width：FillparentButtonUserInterfaceBtn_Del删除便签Text：删除Width：FillparentButtonUserInterfaceBtn_Clear清空便签Text：清空Width：FillparentListViewUserInterfaceListView1显示选择便签默认TinyDBStorageTinyDB1永久存储便签无基础知识1.List变量List是AI中三种类型变量之一，也是最复杂的一种。它是数据的集合，不仅可以是数字、文本，甚至还可以是组件本身。比较接近Python语言的list。List的长度表示List中元素的多少，List不像其他语言的数组可以有键名，它只有索引。但与其他语言不同的是，List索引不是从0开始，而是从1开始，这是要特别注意的，如果索引的值大于List的长度，系统也会报错。另外List支持嵌套形式，List中的子元素可以是List。由于List没有二维数组的性质，在模仿二维数组的功能时，一般采用两个List对应同一索引的方式。List可以方便地实现列表的增加、替换、删除，AI2中已经支持List定义时直接进行赋值。2.TinyDB组件TinyDB是AI中提供的一个小型数据库组件，用来永久存储用户信息。程序中的变量是临时存储，当程序关闭时，这些变量将不复存在。而数据库中的信息保存在手机存储器中，将会永久保存。TinyDB使用了最简单的tag-value（标签-值）模式进行一对一存储。相同的tag值，新的value将代替旧的value。3.Procedure模块函数的使用大大简化了数学的运算，Procedure就是类似函数的一个模块，将程序中需要重复调用的事件、方法打包在一起，需要使用时直接调用，简化操作。同时，可以将有类似变量的部分抽象为参数，形成带参数的程序。Procedure可以仅运行事件、方法，也可以根据需要返回一个值。如（续）∷　人人都能开发安卓App34果你有其他编程语言的基础，可以看出Procedure类似于其他语言的自定义函数。模块编辑1.定义全局变量由于便签内容是一条一条的，可以用List保存所有便签，而便签索引来对应每一条便签。因此需要定义两个全局变量，一个命名为memo，初始值为空list，用来保存便签内容；一个命名为index，初始值为1，表示便签索引，如图2-30所示。2.程序初始化由于便签保存在TinyDB数据库中，因此程序初始化时，需要先判断数据库是否为空，如果不为空，也就是已经保存了便签，则将便签以ListView的形式显示出来，初始化程序可以调用Screen的Initialize事件。数据库保存的tag名定义为memo。如图2-31所示。图2-31　初始化程序3.显示模块便签的增加、修改和删除都涉及Listview及数据库的更新显示，为简化操作，定义名为show的Procedure，如图2-32所示。第一行代码为更新数据库内容，第二行为更新ListView的显示，第三行为将状态栏清空，第四行为隐藏键盘。注意第三行、第四行的代码是基于用户体验的细节考虑，删除它们对整个程序影响不大，但用户操作起来会不太方便，读者可仔细体会。这也是App设计的一个重要理念，以用户体验为核心去设计和编辑程序。图2-30　定义全局变量第2章　AppInventor2开发基础要素　∷35图2-32　显示模块4.增加便签增加便签只需将TextBox输入的内容作为item加入List即可，最后调用显示模块，如图3-33所示。注意这种模式，默认新的元素将在List的最后，也就是显示在ListView的最下端。而根据人们使用便签的习惯，一般将最新的内容放在最前，因此使用如图2-34所示的方式更符合用户的需求，这也是基于用户体验的细节考虑。　图2-33　在尾部增加便签　　　　　　　图2-34　在头部增加便签5.修改便签首先选中需要修改的便签，这里使用ListView的AfterPicking事件，同时获取当前的索引位置，其次修改便签，在当前索引位置替换元素，最后仍然是调用显示模块，如图2-35所示。图2-35　修改便签6.删除便签删除便签与修改便签类似，直接删除list索引对应的元素即可，如图2-36所示。第2章　AppInventor2开发基础要素　∷37任务描述本节的任务是几个简单的小问题，相信你早已学过，那么用AI如何实现呢？●1～100的求和。●鸡兔同笼问题。●由小到大排序。由于本节重在模块操作，故省去UI设计。模块编辑任务一：1～100的求和。方法1：foreach流程当单击Button1时，将计算值输出到Label1标签。定义局部变量name，初始值为0，使用foreachnumberfrom…do模块，局部变量number将从1开始取值，每次步进值为1，一直到100，执行的程序为局部变量name和当前number变量相加后再赋予name变量。最后注意输出时，由于name是局部变量，setLabel模块只能放在in模块内，而不能放在in模块外，如图2-38所示。图2-38　100内求和方法1模块方法2：while流程定义局部变量name，初始值为0，whlie流程：当符合test条件name<100时，将循环执行do中的模块，因此要注意防止出现死循环，如图2-39所示。与方法1不同，方法2定义了全局变量sum，初始值为0，由于是全局变量，setLabel模块可以放在in模块外。另外，注意方法1和方法2在同样的程序中是可以存在的，尽管定义了相同的局部变量名name，但由于是局部变量，不会发生冲突，全局变量不能使用同样的名称。当然，为∷　人人都能开发安卓App38了程序清晰明了，尽量使用不同的变量名。图2-39　100内求和方法2模块任务二：鸡兔同笼问题。“鸡兔同笼问题”是我国古算书《孙子算经》中著名的数学问题，原文为“今有雉（鸡）兔同笼，上有三十五头，下有九十四足。问雉兔各几何。”小学、中学都有其各自的解法，那么如何用计算机程序来解决此类问题呢？这里用Lab_Cock输出鸡的个数，Lab_Rabbit输出兔的个数，如图2-40所示。由于只有35个头，那么无论是鸡还是兔最多都只有35只，通过foreach从1到35的嵌套循环，当满足鸡和兔的头是35个，脚是94个的时候，得到正确 答案 八年级地理上册填图题岩土工程勘察试题省略号的作用及举例应急救援安全知识车间5s试题及答案 ，即鸡23只，兔12只。如果人工用这样的方法计算，要进行35×35=1225次判断，工作量是非常巨大的，但是若用计算机、手机电子设备计算，速度非常快，眨眼之间就可以得出结果，这也为我们解决数学问题带来了新思路。图2-40　鸡兔同笼模块第2章　AppInventor2开发基础要素　∷39任务三：排序问题。排序问题为将5个正整数从小到大顺序输出，计算机用到的排序算法很多，如选择排序、冒泡排序等，这里使用的算法是：列表第一个元素开始与后边4个元素比较，如果第一个元素大于后面的一个元素，则两个元素交换，更换完成后再由第2个元素开始与后面3个元素比较，依次循环。每次更换顺序后输出，如图2-41所示。排序的序列为44、34、24、14、4，需要调整顺序为由小到大。更换元素时借用局部变量temp，完成替换，替换后输出换行。最后经过11次更换，输出结果为：图2-41　排序44　34　24　14　434　44　24　14　424　44　34　14　414　44　34　24　44　44　34　24　14∷　人人都能开发安卓App404　34　44　24　144　24　44　34　144　14　44　34　244　14　34　44　244　14　24　44　344　14　24　34　44小窍门☆文本中需要换行时，可使用\n。任务小结本节介绍了计算机软件在数学领域的应用和解题思路，要学会使用计算机的思维去解决数学问题。流程控制语句foreach和while在编程中具有十分重要的作用，需要仔细体会。自我实践1.用AI计算10的阶乘。2.用AI输出杨辉三角。3.用冒泡排序法进行排序。41第3章多媒体应用本章开发语音、播放器等移动设备多媒体应用。第3章　多媒体应用　∷43有5M的限制，不要选取过大的视频，这里视频命名为movie.3gp，仅有3s。微电影UI界面设计为横屏，上方为视频显示区，使用VideoPlayer组件，下方为控制区，用来播放、暂停、全屏以及音量调整，如图3-2所示，表3-1为相关组件说明。图3-2　微电影UI设计表3-1　微电影组件说明组　　件所属工具组命　　名作　　用UI属性Screen—Screen1横屏标题AlignHorizontal：CenterScreenOrientation：LandscapeTitle：微电影VideoPlayerMediaVideoPlayer1视频播放器Source：movie.3gpHorizontalArrangementLayoutHorizontalArrangement1水平布局Width：200ButtonUserInterfaceBegin开始播放影片Text：开始ButtonUserInterfacePause暂停播放影片Text：暂停ButtonUserInterfaceFull全屏播放Text：全屏LabelUserInterfaceLabel1片长Text：片长LabelUserInterfaceLabel2片长值Text：∷　人人都能开发安卓App44组　　件所属工具组命　　名作　　用UI属性HorizontalArrangementLayoutHorizontalArrangement2音量布局Width：200LabelUserInterfaceLabel3音量Text：音量SliderUserInterfaceSlider1音量调整Maxvalue：100Minvalue：0ThumbPosition：50模块编辑1.程序初始化在播放音频或视频时，经常会出现703错误，主要原因就是程序加载时还没有加载完音频、视频就运行了程序。避免这一错误的方法就是程序初始化时先加载素材，如图3-3所示。2.播放控制播放控制实现按钮单击时播放或暂停，同时播放时获取到影片的长度（单位为毫秒），播放完成后自动循环，这些功能VideoPlayer组件都已经有封装好的事件和方法，如图3-4所示。图3-4　播放控制3.音量控制音量控制使用Slider组件，如图3-5所示。4.全屏控制全屏控制需要单击全屏按钮时全屏播放，单击回退按钮时退出全屏。尽管VideoPlayer组件提供了全屏播放的属性，但经测试，使用这一属性时，部分手机会出现图3-3　程序初始化图3-5　音量控制（续）∷　人人都能开发安卓App46任务描述电影墙App界面设计可参考图3-7，实现功能如下：●单击“放大”按钮，每个影片放大播放，“放大”按钮变为“缩小”按钮。●单击“缩小”按钮，每个影片缩小播放，“缩小”按钮变为“放大”按钮。●单击“全屏”按钮，全屏播放，单击回退按钮退出全屏。UI设计新建项目VideoWall，首先找到电影素材，MIT官方提供的影片名分别命名为bigbuckbunny.3gp，nasa.3gp，sintel.3gp，通过Media面板上传。UI也为横屏布局，背景设计为黑色。三个电影的UI基本一致，通过Layout嵌套进行布局，每个布局中两个按钮，为放大和全屏，如图3-8所示，表3-2是项目相关组件说明。图3-8　电影墙UI设计图3-7　电影墙App实例图第3章　多媒体应用　∷47表3-2　电影墙组件组　　件所属工具组命　　名作　　用UI属性Screen—Screen1横屏、标题、背景BackgroundColor：BlackScreenOrientation：LandscapeTitle：电影墙HorizontalArrangementLayoutHorizontalArrangement1水平布局Width：FillparentVerticalArrangementLayoutVerticalArrangement1垂直布局Width：FillparentVideoPlayerMediaVideoPlayer1视频播放器Source：bigbuckbunny.3gpWidth：FillparentHeight：36ButtonUserInterfaceResize1放大或缩小Text：放大Width：FillparentButtonUserInterfaceFull1全屏Text：全屏Width：FillparentVerticalArrangementLayoutVerticalArrangement2垂直布局Width：FillparentVideoPlayerMediaVideoPlayer2视频播放器Source：nasa.3gpWidth：FillparentHeight：36ButtonUserInterfaceResize2放大或缩小Text：放大Width：FillparentButtonUserInterfaceFull2全屏Text：全屏Width：FillparentVerticalArrangementLayoutVerticalArrangement3垂直布局Width：FillparentVideoPlayerMediaVideoPlayer3视频播放器Source：sintel.3gpWidth：FillparentHeight：36ButtonUserInterfaceResize3放大或缩小Text：放大Width：FillparentButtonUserInterfaceFull3全屏Text：全屏Width：Fillparent模块编辑1.定义全局变量定义全局变量vid1_zoomed、vid2_zoomed、vid3_zooomed，表示视频∷　人人都能开发安卓App48播放器是否缩放，初始值为false，如图3-9所示。2.定义带参数程序由于3个视频在处理上是一样的，为了减少模块，我们可以使用带参数程序（Procedure）封装，简化操作，如图3-10所示。该程序定义名为resizeVideoPlayer，还有3个参数，Videoplayer、zoomed、button，分别表示视频播放器组件、是否缩放变量、按钮组件。注意理解参数代表的多样性。程序内部按照是否缩放进行了两个操作。如果没有放大，视频播放器高度为36，按钮显示为放大。相反，如果已经放大，视频播放器高度设置为144，按钮显示为缩小。图3-10　定义带参数程序3.视频播放器放大或缩小由于3个播放器一样，这里只显示一个“缩小”按钮，如图3-11所示。调用带参数程序，由于vid1_zoomed初始变量为false，因此单击后执行else模块部分，播放器变大，按钮显示改为缩小。同时将vid1_zoomed全局变量取非，变为true。再次单击时，执行then模块。注意两图3-9　定义全局变量∷　人人都能开发安卓App504，5，6，7”大多数人都知道，但是你能靠耳朵分辨出来吗？学习目标●Sound组件使用。●Spinner组件使用。●随机数。任务描述练耳App界面设计可参考图3-13，实现功能如下：●随机播放“1，2，3，4，5，6，7”中的一个音。●在下拉框选项中进行选择。●对选择进行判断，正确的显示正确，错误的显示错误，并给出正确答案。●实现重复播放功能，这个功能在程序上虽然可有可无，但是从专业功能上来说是必要的，练耳需要多次反复地听音进行练习。图3-13　练耳App实例图UI设计新建项目ear