人人都能开发安卓AppAppInventor2应用开发实战13章.docx

《人人都能开发安卓AppAppInventor2应用开发实战13章.docx》由会员分享，可在线阅读，更多相关《人人都能开发安卓AppAppInventor2应用开发实战13章.docx（53页珍藏版）》请在三一办公上搜索。

1、人人都能开发安卓AppAppInventor2应用开发实战13章第1章 App Inventor 2 入门 本章介绍App Inventor 2 的基础知识、环境搭建及界面，为后面的应用开发打下基础。 2 1 : App Inventor2AU : 4 人人都能开发安卓App a）在计算机上创建项目 b）通过安卓设备实时调试 图1-1 Wi-Fi 真机开发方式 以下是方式一的步骤。 步骤1：下载安装MITAppInventorCompanion 配套App 可以扫描图1-2 中的二维码从谷歌Play Store 下载安装，这也是推荐方式。 另外也可以直接下载APK 方式安装，地图1-2 AI

2、Companion 下载地址 址为http:/appinv.us/xAI2cf34。 小窍门 如果你的安卓手机或平板电脑未安装二维码扫描App，也可以直接到谷歌应用市场搜索“MIT App Inventor Companion”然后安装。如果希望直接使用APK方式安装，请将手机设置为“信任未知源”，这在调试和安装软件时同样适用。 步骤2：将计算机和安卓设备连接到同一无线网络记住，只有当计算机和安装有配套App 的安卓设备连接到同一无线网络 时，才能将你正在开发的App 显示到安卓设备上，便于调试。换句话说，你的计算机和安卓设备必须在同一局域网。 步骤3：打开AppInventor的项目将它与安

3、卓设备连接 打开AppInventor，新建一个项目，单击“Project”“StartNew Project ”，然后输入一个项目名称。 接下来在AI2浏览器的顶部菜单中选择“Connect”“AICompanion”，如图1-3 所示。 第1 章App Inventor 2入门 5 图1-3 AI Companion 连接 然后浏览器中会出现一个二维码对话框。使用你的安卓设备像打开其他应用一样的方式开启AICompanion应用。然后单击“ScanQRcode”按钮开始扫描浏览器中的二维码，如图1-4 所示。 图1-4 扫描二维码 几秒钟之后，正在开发的App 就会显示在安卓设备上了。在D

4、esigner 或Blocks 界面做了修改之后，安卓设备会即时更新你的App，这种特性叫做“实时调试”。 假如你的手机没有摄像头，或者其他原因导致无法扫描，你也可以直接将二维码对话框中“Your code is ”下面的6 个字母输入安卓设备中打开的配套App 的输入框“Six Dight Code”中，然后单击“connect with code ” 按钮。 假如你设计的App 没有显示在安卓设备上，可能原因如下： 你的配套App 已经过期，需要更新。按步骤1 的方法重新安装即可。 你的安卓手机或平板电脑没有连接到Wi-Fi。确认你的配套App 下方显示了网络IP 地址。 你的安卓设备没有

5、和计算机连接到同一网络。确认计算机和手机连接的是同一Wi-Fi 网络。 6 人人都能开发安卓App 方式二：安装并运行AI2 模拟器 假如没有安卓手机或平板电脑，你仍然可以使用AI2 模拟器来调试App。AI2 提供了一个安卓模拟器，同安卓设备一样，但需要在你的计算机上运行。你可以在安卓模拟器中调试程序，并打包分发到其他安卓设备，甚至上传到 谷歌Play Store。很多学校或课后兴趣小组都使用模拟器这种方式来开发。注意：模拟器与真机在部分组件测试时可能有所不同。使用模拟器来开发，需要首先在计算机上安装相应的软件，步骤如下，如 图1-5 所示。 图1-5 使用模拟器调试 步骤1：在计算机上安装

6、AppInventorSetup软件包 下载软件包，双击打开软件包，像安装其他软件一样单击“Next ”按钮。 如以前使用过App Invnetor 1，请先卸载软件。另外在双击软件包时，可能会弹出“不可信任的发行者”对话框，请直接单击“确定”以继续。通常情况下App Inventor Setup 软件可以自己找到安装程序的位置，但假如该软件询问软件安装位置，直接输入“C:ProgramFilesAppinventor commands-for-Appinventor ”即可。如果 你使用的是64 位操作系统，请将Program Files 替换成Program Files。 步骤2：启动ai

7、Starter 我们需要辅助程序aiStarter 才能在浏览器中启动模拟器。该程序已经在步骤1 中安装App Inventor Setup 软件包时安装 好了，并在桌面创建了一个快捷方式，如图1-6 所示。 图1-6 aiStarter 桌面图标 双击该图标，便可启动辅助程序。在Windows 操作系统下该程序默认开机自启动。启动后将会出现图1-7 所示的窗口。 第1 章App Inventor 2入门 7 图1-7 aiStarter 启动界面 步骤3：打开AppInventor项目并连接到模拟器 同方式一一样，转到AppInventorCompanion，打开或创建一个项目。然后从App

8、Inventor 的顶部菜单中依次单击“Connenct”“Emulator”菜单项，如图1-8所示。 图1-8 连接模拟器 浏览器中央会弹出一个对话框，如图1-9 所示，告诉我们正在连接模拟器，可能需要几分钟时间。 同时，aiStarter 窗口会有一些更新的状态信息，如图1-10 所示。 接下来出现模拟器窗口，依次出现 如图1-11的模拟器启动过程。图1-11a为启动初始状态，启动成功后，会显示图1-11b所示的状态。启动成功到可以显示你正在开发的App，可能还需要几分钟时间，这期间模拟器会准备SD 卡：从模拟器顶部的状态栏中可以看到相应提示。完成该工作后，模拟器就会启动并显示你正在App

9、 Inventor 中创建的App。 图1-9 连接模拟器中 8 人人都能开发安卓App 图1-10 aiStarter 窗口状态 a） b） 图1-11 模拟器窗口 提示 由于App Inventor 还处于beta 测试版，软件功能在不断变化，相应的配套软件更新有可能会滞后。如果遇到模拟器有类似如图1-12 所示的画面，表示模拟器中的配套软件不是最新的版本，App Inventor 会自动更新它。 第1 章App Inventor 2入门 9 图1-12 更新模拟器 在浏览器中单击“OK”按钮，将会下载最新版的配套App，然后自动安装到模拟器中。安装时，需要在模拟器中确认替换App。 提示

10、 如果你正在创建的App 没有在模拟器中显示，请从以下方面排除故障。 确认是否是某一特定的项目不能显示？如果是某一项目的App 没有显示，而其他的工作正常，则可能是你的App 有问题。 确认是否有其他设备连接到你的计算机上？因为目前App Inventor 2 配套软件只能处理一台设备或模拟器。如果是这种情况，请关闭其他设备或模拟器。 确认你的配套软件是否安装正确？App Inventor 配套软件目录CommandsforAppInventor应该安装在C:ProgramFiles或C: Program Files，当安装目录不在默认目录时，配套软件将不能启动模拟器。 确定你的浏览器是否运行

11、了一些阻止连接模拟器的插件？已知的一个名叫NoScript的Firefox插件会阻止连接模拟器，假如你运行了类似的插件，使用AppInventor时最好禁用该插件。 App Inventor 是否提示你重启配套App ？AI 配套软件包括运行在计 10 人人都能开发安卓App 算机上的模拟器、aiStarter，还包括运行在模拟器中的配套App。如果App Inventor 不能和模拟器通信，它可能会提示你重启配套App。遇到这种情况，简单的方法就是关掉模拟器，然后重新开始步骤3。开始步骤3 前，需要单击“Reset Connection”选项。 你是否等了足够长的时间？模拟器启动需要一个过程

12、，特别是在你的计算机配置不是很高的情况下，需要耐心等待足够长的时间。 小窍门 模拟器其实和真实安卓设备类似，可以改变系统语言，让界面变成中文版。具体设置步骤为：单击“Menu ”，单击模拟器Setting，拖曳模拟器屏幕，定位到Language & Keyboard 并单击，继续单击Select Language，拖曳模拟器屏幕，单击简体。你的模拟器就显示中文界面了。 更改模拟器分辨率。默认的模拟器分辨率是最小的HVGA。在C:Program FilesAppInventorcommands-for-Appinventor 目录，找到run-emulator.bat，右击编辑，在最下方找到sk

13、in HVGA-AppInventor，可以更改为C:Program FilesAppInventorcommands-for-Appinventorfrom-Android-SDKplatforms android-8skins 目录下的分辨率，如skin WVGA854。 方式三：使用USB 数据线连接安卓手机或平板电脑 当你使用安卓手机或平板电脑连接AppInventor时，设备中配套App管理着与计算机中的配套软件通过计算机中浏览器建立的连接。方式一中步骤1 已经说明了如何安装配套App，并且说明了使用无线网络来建立这种连接实时调试应用是AppInventor官方推荐的连接方式。 但是

14、仍然会有一些场所不提供Wi-Fi网络，或者禁止连接Wi-Fi网络的设备彼此通信，例如，某些学校、酒店、会议中心等。尽管经验丰富的计算机使用者可以使用小型路由器来建立小型无线网络，或者使用笔记本无线网卡提供小型无线网络，但是App Inventor 还是提供了使用USB数据线来连接安卓手机或平板电脑的方式，如图1-13所示。 在Windows操作系统上使用USB数据线来连接AppInventor和安卓设备最大的不便就是安装驱动程序，并且不同厂家的设备需要不同的驱动程序。因此，你需要查询设备官方网站来获取驱动程序。 第1 章App Inventor 2入门 11 a）在计算机上创建项目 b）通过安

15、卓设备实时调试 图1-13 USB 调试 步骤1：在计算机上安装AppInventorSetup软件包该步骤同方式二步骤1。 步骤2：下载安装MITAppInventorCompanion的配套App 该步骤同方式一步骤1。 步骤3：启动aiStarter 该步骤同方式二步骤2。 步骤4：在计算机上为安卓设备安装驱动程序，并打开调试模式如之前所述，在Windows上使用USB数据线调试安卓应用，需要在系 统设置里打开开发者选项，确保打开USB调试模式。在Android3.2或以下版本操作系统的设备上，你可以在设置应用程序开发者选项中找到相关选项；在Android4.0或以上版本的设备上，相关选

16、项直接在设置开发者选项里。 提示 Android 4.2或以上版本的设备中，开发者选项默认是隐藏的。要使该选项可见，在设置关于手机中单击几次Build Number，然后返回设置将可以看到开发者选项。 步骤5：使用USB 数据连接计算机和安卓设备 要使用USB 数据线连接安卓设备并调试应用，需要为安卓设备安装驱动程序。安卓设备连接计算机有很多种模式，比如大容量存储设备模式、多媒体设备模式，甚至上网卡模式。App Inventor官方建议使用大容量存储设备模式来连接计算机，并安装相应的驱动程序。由于制造安卓手机或平板电脑的厂商较多，请仔细阅读说明书或在线支持网站来安装驱动程序。 BI 1-14

17、III( VIt A 1-1 Project &N Myprojects Start new project Importprojectformmycomputer Importprojectfromaresponsitory Deleteproject 第1 章App Inventor 2入门 13 英文 Save project Save project as Checkpoint Export select project to my computer Export all project Import keystore Export keystore Delete keystore 中

18、文 功能 保存项目 保存 另存项目 另存为 检查点 方便返回项目的项目点 导出项目到计算机 导出 导出全部项目 全部导出 导入密钥 在应用商店更导出密钥 新应用时必须使用同一密钥 删除密钥 第二个界面为设计界面，新建或单击任一项目后会进入该界面，如图1-15 所示。 图1-15 设计界面 设计界面也称UI 界面，也就是设计程序外观，即设计用户直接看到的界面，该界面有4 个栏目。第一栏为面板栏，用于选择组件，选取的组件需要拖曳到第二栏。第二栏为视图栏，是用户直接面对的项目外观。第三栏上方为组件栏，显示已添加的组件；下方为媒体栏，用来上传声音、图片等素材。第四栏为属性栏 ，用来设置组件的属性。第三

19、个界面为程序模块界面，单击右上角的Blocks 进入，如图1-16 所 示。Blocks 是程序后台的模块。左侧为模块栏，用于将需要的模块拖曳到右侧视图栏。右侧视 图栏为程序核心，各程序模块需拼接在一起。视图栏左下角显示警告信息，右下角为垃圾桶，可以将不用的模块拖到垃圾桶删除。 14 人人都能开发安卓App 图1-16 程序模块界面 提示 模块操作有几个快捷键，如Ctrl+C 复制、Ctrl+V 粘贴、Delete 删除， Ctrl+ 鼠标滚轮可放大缩小视图。将鼠标悬停在模块上，会出现模块使用说明。右击模块，弹出菜单如表1-2 所示；在背景空白处右击，弹出菜单如 表1-3 所示。 表1-2 模

20、块右键菜单 英 Duplicate Add Comment Collapse Block Expand Block Disable Block Delete Block Help 文 中 文 复制 添加注释 折叠模块 展开模块 失活模块 删除模块 帮助 功 复制模块 能 方便自己和他人读懂程序 将模块折叠，节省视图空间 展开折叠模块 当前模块无法使用，用于调试程序 删除 在线帮助网页 表1-3 背景右键菜单 英 Collapse Blocks Expand Blocks Arrange Blocks Horizontally Arrange Blocks Vertically Arrange

21、Blocks by Category Help 文 中 文 折叠所有模块 展开所有模块 水平排列 垂直排列 按类别排列 帮助 功 能 节省视图空间 展开模块查看模块内容 模块水平排列 模块垂直排列 按类别排列模块 在线帮助网页 第2章 App Inventor 2 开发基础要素 本章通过几个简单的小程序来学习App Inventor2的基本组件、指令和流程控制语句。 16 !2-1 TtttlgJB. “HelloWorld 1. ! W ll 1) 2http:/ai2.appinventor.init.edu/, O2-2 7a , 第2 章App Inventor 2开发基础要素 17

22、单击继续按钮。 图2-2 欢迎界面 2）在项目界面栏单击新建项目，如图2-3所示。 图2-3 新建项目 弹出命名项目界面，命名为“HelloWorld”，如图2-4所示。在这里要注意，项目名只能以英文字母开头，且名中只能包括英文字母、下划线和数字，不能包含空格或中文。 图2-4 项目名为“HelloWorld ” 3）在左侧面板的用户界面中单击标签 组件，并按住鼠标左键将其拖曳到中间视图窗口，如 18 人人都能开发安卓App 图2-5 所示。表2-1 为Hello World 的组件说明。 图2-5 选取Lable 组件 表2-1 HelloWorld 的组件 组 Label 件 所属工具组

23、User Interface 命 名 作 用 Label1 显示文本“Hello World ” 出 Lable 组件可以直接在屏幕上输文本信息，用户无法进行修改，无法触发事件，常用来对项目功能等进行描述。在右侧的属性面板找到Text，将“TextforLabel1”修改为“HelloWorld!”，如图2-6所示，其他项目如字体颜色、大小、属性等在这里暂不修改。这样HelloWorld 项目编写完成。 2. AI Companion 调试 种，这里使用Wi-Fi模式AI配套App 进行调试，过程略。 图2-6将Lable1的Text修改为“HelloWorld!” 第2 章App Inven

24、tor 2开发基础要素 19 3. 程序打包 上面的程序只能你自己使用，如果你想分享给朋友或上传到App 市场，那就需要打包成apk 文件，App Inventor 实现了一键打包的功能，在计算机端单击“ Bulid ”“ App”，完成打包工作，如图2-7 所示。 图2-7 打包apk 到计算机 打包过程如图2-8所示，当进度条显示100%后即可完成程序打图2-8 打包过程 这样我们的第一个HelloWorld 应用就全部完成了。这个过程中没有任何代码，充分显示了App Inventor 的便利性。 任务小结 本节主要介绍了App 的开发、调试、打包流程，这也是AI 开发的基础流程，后面我们

25、将省略一些常规步骤，因此需要熟练掌握。这里提到的Lable 组件是介绍的第一个组件。Lable 组件常用来描述软件的功能，它只有属性，没有事件和方法。 自我实践 1. 学习使用USB 数据线和模拟器调试应用。 2. 设置HelloWorld 应用的字体属性。 2-9 ij=fAppggfJEl 第2 章App Inventor 2开发基础要素 21 单击“下一页”按钮，显示下一页漫画。 单击“上一页”按钮，显示上一页漫画。 到达最后一页，下一页按钮无法单击，提示已到最后一页。 到达第一页，上一页按钮无法单击，提示已到第一页。 UI设计 首先找到漫画书素材，统一图片大小，命名为1.jpg、2.j

26、pg、3.jpg、4.jpg，通过Media 面板上传。漫画书UI 界面为：上方图片显示漫画，下方为上一页、下一页按钮，两个按钮显示在同一排。图2-10 显示了应用在设计界面中的截图，按图来创建水平布局组件，最后添加提示组件。Image 的属性设置为Picture ：1.jpg，Width ：320，Height ：250。Button1 的属性Text 设置为“上一页”，Button2的属性Text 设置为“下一页”。Screen 属性Title 设置为漫画书。 图2-10 漫画书App UI 设计 表2-2 是整个App 所需要的组件说明。 表2-2 组件说明 组 Screen 件 所属工

27、具组 命 Screen1 名 作 标题 用 UI 属性 Title：漫画书 Picture：1.jpg Width：320 Height：250 Image User Interface Image1 显示漫画中的图片 22 人人都能开发安卓App 组 Button Button 件 所属工具组 命 名 作 用 UI 属性 Text：上一页 Text：下一页 User Interface Button1 User Interface Button2 上一页 下一页 Horizontal Arrangement Layout 水平放置“上 默认 HorizontalArrangement1 一页

28、”和“下一页”按钮 提示已到第一页或最后一页 默认 Notier User Interface Notier1 基础知识 1. 变量 变量来源于数学，是计算机语言中能存储计算结果或表示值的抽象概念。在AI 中，变量首先要声明，声明后的变量才可以通过get 模块调用。声明时需要定义变量名，变量名要以英文字母或下划线开头，不能以数字开头，不能使用中文。变量命名的原则是便于理解程序，可以使用英文或拼音等简写。AI 中的变量类型有数字型、字符型、列表型和逻辑型。变量声明时需要初始化赋值，变量类型根据赋值的类型来确定，如变量值为true 则为逻辑型，empty list 为列表型。变量包括全局 变量和局

29、部变量。全局变量在整个App 中都可以调用，而局部变量只能在事件模块中调用，如图2-11 所示。 2. 属性 组件属性是AI 中用来设置组件的大小、颜色、位置、速度等功能，模块用绿色显示。属性多为成对出现，如set Button.Text to 表示设置按钮的文本，而Button.Text 为调用Button 的文本。组件属性都有其自身属性，多用来与list 结合使用，如图2-12 所示。另外属性设置可以在前端UI 界面设置，也可以在Blocks 模块中设置，可以根据习惯需要选择，在前端UI 设置比较直观方便，建议使用此种方法。 图2-11 全局变量与局部变量 图2-12 组件属性示例 第2

30、章App Inventor 2开发基础要素 23 3. 事件 事件类型是App Inventor 的一个重要概念，用来连接不同的程序动作，如按钮的单击、长按等，当单击按钮或满足其他条件 时激活其他的程序运行，Blocks 中一般用when Click、do表示，为暗黄色马蹄形，如图2-13 所示。 不是所有的组件都有事件类型。AppInventor包括的事件类型见表2-3。 表2-3 事件类型 图2-13 事件类型示例 事件类型 用户发起的事件 初始化事件 计时器事件 动画事件 外部事件 举 例 当用户单击Button1 时，执行 当应用启动时，执行 当20 毫秒过去时，执行 当两个物体碰撞时

31、，执行 当手机收到短信时，执行 4. 方法 方法是直接触发组件的一个内部程序，如隐藏键盘、弹出对话框、保存数据等，不是所有的组件都有方法类型。方法不能单独使用，必须在事件模块中才能激活，模块中用紫色来表示，如图2-14 所示。 5. ifthenelse 流程控制 任何编程语言都有流程控制，AI 中使用了简单的流程控制语句，例如，ifthenelse 为条件控制流程，满足if 条件时，执行then 中的语句，否则执行else 中的语句，如图2-15 所示。 图2-14 方法类型示例 图2-15 ifthenelse流程控制 小窍门 此处为双向条件控制模块，需要在单向条件控制来建立：拖曳else

32、 模块到 if 模块中。 24 人人都能开发安卓App 模块编辑 1. 定义全局变量 定义全局变量number，表示漫画书的页码，初始值为1。页码随着按钮单击增加和减少。操作方式为在Blocks 界面 中Variables模块拖曳initializeglobalnumber to到Viewer界面，如图2-16所示。 2.“下一页”按钮事件 当每次单击“下一页”按钮时，全局变量number 在自身数值上加1，然后显示当前页码图片，当到达第4页时，“下一页”按钮变成不可单击 ，同时显示提示“已是最后一页”，如图2-17所示。 图2-17 “下一页”按钮事件 图2-16 定义全局变量number

33、注意，上面的模块使用了ifthenelse 流程控制。3.“上一页”按钮事件与“下一页”按钮的事件类似，如图2-18 所示。 图2-18 “上一页”按钮事件 25 26 人人都能开发安卓App Camera组件使用。 横屏使用。 UI 布局。 任务描述 涂鸦板App 界面设计可参考图2-19，实现的功能如下： 图2-19 涂鸦板App 实例图 横屏。 通过手指在画布上画线。 选取不同颜色。 通过滑动条调整画笔粗细。 保存涂鸦图像到指定位置并命名。 打开保存的图像。 对拍照后的图像进行涂鸦。 UI设计 新建项目palette，Screen命名为涂鸦板。为增大涂鸦板的空间，使用横屏操作。横屏操作只

34、需在Screen的ScreenOrientation属性选择Landscape即可。布局采用了复合布局，首先是上下布局，使用两个HorizontalArrangement分开。上方再分为左右布局，左侧通过VerticalArrangement 来选择颜色，右侧为画布区域。下方分别为保存、清除、拍照按钮、图片库组件、标签组件以及滑块组件，最后增加照相机组件和时钟组件。注意体会嵌套布局，前端UI设计如图2-20所示。 第2 章App Inventor 2开发基础要素 27 组 件 所属工具组 命 名 作 用 UI 属性 ScreenOrientation：横屏 上下布局 Landscape Tit

35、le：涂鸦板 Width：Fill parent Height：Fill parent 默认 BackgroundColor：black Text： Width：50 Height：Fill parent BackgroundColor：Red Text： Width：50 Height：Fill parent 图2-20 涂鸦板App UI 设计 表2-4 是整个App 所需要的组件说明。 表2-4 组件说明 Screen Screen1 Horizontal Arrangement1 Horizontal Arrangement Vertical Arrangement Layout La

36、yout Layout 放置颜色选择Vertical Arrangement1 按钮 Horizontal Arrangement2 Horizontal Arrangement Button Button 放置功能按钮 User Btn_Black Interface User Btn_Red Interface 选取黑色 选取红色 Button User Btn_Green Interface 选取绿色 BackgroundColor：Green Text： Width：50 Height：Fill parent 28 人人都能开发安卓App 组 件 所属工具组 命 名 作 用 UI 属性

37、 BackgroundColor：Pink Text：Width：50 Height：Fill parent BackgroundColor：Yellow Text：Width：50 Height：Fill parent Width：Fill parent Height：200 Text：保存 Text：清除 Text：拍照 Text：打开 Text：笔刷 Max value：10 Min value：1 ThumbPosition：5 Width：150 默认 默认 Button User Interface Btn_Pink 选取粉色 Button User Interface User

38、Interface User Interface User Interface User Interface Media User Interface Btn_Yellow 选取黄色 Canvas Button Button Button ImagePicker Label Canvas1 Btn_Save Btn_Clear Btn_Camera 画布区域 保存画布 清除画布 调用照相机组 件拍照 打开图片库 ImagePicker1 Label1 Slider1 调整笔刷粗细 提示文字 Slider User Interface User Interface Media Clock Cam

39、era Clock1 Camera1 调用系统时间 命名保存图片 调用手机镜头 拍照 基础知识 组件宽高如何设置？ AI组件的宽高属性有3个选项，分别是自动、填充父类 和自定义大小，系统默认为自动。自动一般为组件的默认大小，填充父类为与父类宽高相同，如有Canvas或Layout，则与Canvas和Layout相同；如没有，则与Screen相同。自定义大小单位为像素。要选择合适的属性，需要在手机中不断调试。 模块编辑 1. 画线模块 涂鸦主要是通过在Canvas 上的画线操作来完成的，响应事件为Canvas 第2 章App Inventor 2开发基础要素 29 的Dragged，响应方法为D

40、rawLine。Dragged事件产生3个坐标参数，分别为start、prev、current，在涂鸦时需要选用prev及current作为DrawLine事件的参数，如图2-21所示。 图2-21 画线模块 当单击不同颜色按钮时，画笔颜色变 为相应的颜色，依次制作5 个按钮事件， 如图2-22 所示。 3. 画笔粗细 调整画笔粗细，这里使用Slider 组 2. 选取颜色 件滑动调整，根据滚动条位置获取画笔粗细大小，如图2-23 所示。 图2-22 选取颜色 图2-23 调整画笔粗细 4. 保存功能 保存涂鸦完成的图片，可以通过调用Canvas的Save方法，系统默认保存位置在mydocum

41、ents/pictures路径。为了方便，可以将图片另存为的图片库路径修改为dcim/camera/，调用Canvas的SaveAs方法。同时，为了能够保存不同图片，以系统时间来命名，如图2-24 所示。 图2-24 保存图片 2-26 gNItl8 IZI 2-27 T3 Bl/ /trat+tnr z-oxzzo are,-xa+n=. 第2 章App Inventor 2开发基础要素 31 及，人们越来越习惯通过手机来记录一些提醒事项或众多复杂的密码，使用 AI 也可以制作一款个性化的便签App。 学习目标 Textbox 组件使用。 Listview组件使用。 TinyDB组件使用。

42、List 变量使用。 Procedure 模块使用。 基于用户体验的细节考虑。 任务描述 便签App 界面设计可参考图2-28，实现的功能如下。 图2-28 便签App 实例图 显示所有便签内容。 添加新便签。 选择修改便签。 删除便签。 清空便签。 32 人人都能开发安卓App UI设计 新建项目Memo，Screen命名为便签。UI设计采用上下布局，最上方是输入和显示栏，用来增加和修改便签，使用Textbox 组件；中间是功能按钮，使用HorizontalArrangement和4个Button组件；下方为显示区域，使用ListView组件，最后添加TinyDB组件。通过查阅ListVie

43、w说明，使用该组件时需将Screen的Scrollable属性设置为false，可以直接在面板属性取消勾选。由于ListView的默认背景为黑色，为统一色调，将Screen 的背景也设置为黑色，前端UI设计如图2-29所示。 图2-29 便签UI 设计 表2-5 是整个App 所需要的组件说明。 表2-5 便签组件说明 组 件 所属工具组 命 Screen1 名 作 用 UI 属性 Title：便签 BackgroundColor：Black Scrollable：不选 Hint：Width：Fill parent Width：Fill parent Text：添加Width：Fill par

44、ent Screen User Interface 基础设置 增加修改便签，显示选中便签 放置功能按钮 增加便签 TextBox Horizontal Arrangement TextBox1 Horizontal Arrangement2 Layout User Interface Button Btn_Add 第2 章App Inventor 2开发基础要素 33 组 件 所属工具组 User Interface User Interface User Interface User Interface Storage 命 名 作 用 UI 属性 Text：修改Width：Fill pare

45、nt Text：删除Width：Fill parent Text：清空Width：Fill parent 默认 无 Button Btn_Edit 修改便签 删除便签 清空便签 显示选择便签 永久存储便签 Button Btn_Del Button Btn_Clear ListView TinyDB ListView1 TinyDB1 基础知识 1. List变量 List 是AI 中三种类型变量之一，也是最复杂的一种。它是数据的集合，不仅可以是数字、文本，甚至还可以是组件本身。比较接近Python 语言的list。List 的长度表示List 中元素的多少，List 不像其他语言的数组可以有

46、键名，它只有索引。但与其他语言不同的是，List 索引不是从0 开始，而是从1 开始，这是要特别注意的，如果索引的值大于List 的长度，系统也会报错。另外List 支持嵌套形式，List 中的子元素可以是List。由于List 没有二维数组的性质，在模仿二维数组的功能时，一般采用两个List 对应同一索引的方式。List 可以方便地实现列表的增加、替换、删除，AI2 中已经支持List 定义时直接进行赋值。 2. TinyDB组件 TinyDB 是AI 中提供的一个小型数据库组件，用来永久存储用户信息。程序中的变量是临时存储，当程序关闭时，这些变量将不复存在。而数据库中的信息保存在手机存储器中，将会永久保存。