kl800.com省心范文网

App Inventor 安卓手机应用开发简易入门 第二章第1节


《App Inventor 安卓手机应用开发简易入门》选修课程

第二章

第二章 One and One——组件入门
本章概要
本章将通过引导创建 OneAndOne、HappyBox、HappyDay 的课程实例,熟悉 组件的基本应用,了解 Block 编程的风格,学会测试和调试自己的 App。在界面 设计和可视化块编程有一个应用的实践,达到入门级的熟悉状态,可以真正步入 自己创建应用的起点。

第 1 节 个人专属 App 就这么简单

本节概要:
学会启动 App Inventor 的工作界面,熟悉各个界面布局,和各个工具栏相应 位置和相应方式,通过 OneAndOne 的课程例子引导,开始学生对 App Inventor 的启程之旅。

学习要点
? ? ? 启动离线 App Inventor、熟悉相应流程 用户组件 Label 和 Button 的使用 如何利用简单级组件创设有趣的应用 OneAndOne

实例探究:
应用?

OneAndOne 的定义:一个组件加一个组件,这样的前提下可以做出什么样的

我们可以通过这个课程实例的应用,来实践验证一下:点击应用中的按钮之 后 Label 标签跳出设置好的名字。

图 2-1-1: 程序界面

图 2-1-2:运行结果

离线环境的启动
9

《App Inventor 安卓手机应用开发简易入门》选修课程

第二章

离线环境的启动,打开前文所提资源列表中离线服务器包,启动的 AIServer 和 Bulidserver 两个,如果 App Inventor 客户端没有打开的话也一并打开,机房 里我把这三个快捷方式放在一起,合并成启动三项。

图组 2-1-3 启动各项服务命令并提示成功启动 Tip:离线版本有可能会出现无法正常使用的时候,在都启动的时候无法正常进入。一 般只需右键 Google 浏览器重新加载即可。如果不行,也只需关闭再打开,基本都能解决问 题。

界面设计与组件构成:
App: OneAndOne 元件构成(类型) 一个文本标签组件 一个按钮组件 图表 2-1-4 组件名字 LabName btnGetname 主概 用于显示名字的 触发显示名字的

组件的拖放和设置

图 2-1-5 Label 标签和 Button 按钮的设置

组件重命名
在用户组件区(C 区)选择组件,点击 rename(重命名)(图 2-1-6)

10

《App Inventor 安卓手机应用开发简易入门》选修课程

第二章

图表 2-1-7: 组件类型 Button Label 原名字(old name) Button1 Label1 新名字(newname) BtnGetName LabName

提问思考:组件为什么需要重命名?
从用户组件区拖曳组件到视图设计,并修改相应属性,课例所用组件属性修 改如下(表 2-1-8) :
组件名字 属性名 Text TextAligment LabName TextColor Width Text BtnGetname TextAligment TextColor Width 属性值 your name Center Orange Fill parent Get Center Orange Fill parent 说明 默认显示文本 居中对齐 黄色 紧挨上层组件一样(指和 screen 一样大) 默认显示文本 居中对齐 黄色 紧挨上层组件一样

例子——文本框 label 截图如下:

图 2-1-9:组件对应属性栏

Block 块编程拼接搭建
切换到 blocks 界面,观察发现组件设计界面与左侧 blocks 下组件相互对应

11

《App Inventor 安卓手机应用开发简易入门》选修课程

第二章

图组 2-1-10 可以发现 design 界面和 block 界面关于 screen1 下的组件是一一对应的

具体操作如下图所示 1 点击 BtnGetName 按钮拖曳一个 click 事件框 ○

图 2-1-11

2 点击 labName 的设置 text 属性框与 click 框相接(接口正匹配) ○

图 2-1-12 Tip: 在下图 2-1-13 操作中,从 Built-in 处选择 text 拖入一个空白文本模 块拼接后键入字符,也可以先键入字符再拼接,此处无影响,即模块以最后形状 为准,中途没有先后操作关系。
12

《App Inventor 安卓手机应用开发简易入门》选修课程

第二章

图组 2-1-13

代码解读
该模块比较简单,就是按钮的一个 click 事件,让标签显示文本。

程序测试模拟
接下来我们就进入测试 App 阶段,这次选择以模拟器测试,也是对于机房教 学比较常用的方法,图 2-1-14 如下:

耐心等待,在进入程序测试,启动模拟器需要花费一定的时间,未结束之前 过程不要点击 cancel。

图 2-1-15

图 2-1-15

图 2-1-16

Tip:进入调试时,Block 代码模块和 UI 界面可以即时修改,不用重新启动模拟器,下
13

《App Inventor 安卓手机应用开发简易入门》选修课程

第二章

文就是即时修改了文本,在模拟器中直接运行测试的截图,所以在教学时,提醒学生不必退 出模拟器。

图 2-1-16

项目的保存和导出
? 保存文档相对简单一点。

图 2-1-17 保存文档

图 2-1-18 导出文档

? 导出文档
1.点击 my project 2.勾选项目 3.选择 export selected project (aia) to my computer

导出的下载地址为默认下载目录 机房一般设置为:我的电脑——我的文档—— Download 目录

思维拓展任务
1.学习案例 1-1 完成,案例的美化界面该如何实践? 2.进阶任务: 找两个组件构成新版的 one and one ,通过自己的联系建立两个组件之间的 响应,试一试能不能做一个点击一下出现图片或者音乐呢?

本节结节 下节预告:
下一章节我们将进入宝箱模式

14


app inventor入门手册

入门1.设置您的手机和电脑 App inventor 需要在 web 浏览器和 Java Web Star...设置>应用>勾选”未知源”(允许运行 android market 以外程 序) 点击开发>勾...

app inventor学习案例 Android软件在线编程

app inventor学习案例 Android软件在线编程_计算机软件及应用_IT/计算机_专业资料。...遇见 app invent(谷歌一款在线编 程手机软件),基于积木式模块化编程,简单易学。...

App Inventor手机通信录设计报告

App Inventor手机通信录设计报告_计算机软件应用_IT/计算机_专业资料。App Inventor...二、设计成果组件设计 逻辑设计 1.程序启动:当程序启动后,会显示第一个联系...

手机APP开发工具

手机APP开发工具_计算机软件应用_IT/计算机_专业资料。泽思网络 – 移动营销全...谷歌推出的 App Inventor Android App 开发工具可以让你仅通过拖拉式的简单操作...

APPinventor GPS定位程序说明_图文

关于如何在APPinventor平台下面做手机定位的程序 ...ActivityStarter1 组件,呼叫的 action 为 android....第五章 程序调试与测试在开发过程中,遇到两个难题...

Windows版App Inventor 2脱机版安装说明与操作1

Windows 版 App Inventor 2.0 脱机版软件 安装说明...下载 Java 开发工具(JDK)执行 AiLiveComplete 之前...1/2 相关文档推荐 第2章windows XP操作系统... ...

app inventor 软件开发文档

app inventor 软件开发文档_计算机软件及应用_IT/...Android 手机程序开发 《软件开发文档》 学专学姓 ...第二次调用 PlayBackNote 时,count=2: Sound1....

app-inventor2-初中教案_图文

“Hello Word”并根据 AppInventor 的自身特性,融入...旅 (一)项目分析 通过简单应用,了解开发环境...测试 1.用 usb 数据线连接安卓手机,打开 usb 调试...

AppInventor移动应用开发课程纲要

App Inventor 是一个完全在线开发Android 编程...一个简单的“短信应答应用程序段 背景分析 相比...内容 3——14 第一单元作品欣 1、什么是 APP。 ...

利用App Inventor制作中小学安卓平台英语学习资源实例分析

利用App Inventor制作中小学安卓平台英语学习资源实例...浏览器环境下,免费用于开发安卓智能手 机应用程序的...安卓平台学习资源的特点如下。 (1)进入学习状态简单...