《第3章第一个App Inventor程序》-(课件).pptVIP

第3章 第一个App Inventor程序 哈尔滨工程大学 王向辉 本章学习目标： 了解App Inventor的程序开发流程 掌握界面编辑器的使用方法 掌握模块编辑器的使用方法 本章将详细的介绍如何开发第一个App Inventor程序——HelloAppInventor。在第二章的基础上，讲解如何使用App Inventor建立新工程、使用界面设计器开发用户界面、使用模块编辑器开发程序逻辑，以及使用手机或模拟器进行程序调试。 创建 新工程 界面 设计 逻辑模块开发 程序 调试 App Inventor程序开发流程 前言 3.1 创建新工程 HelloAppInventor示例非常的简单，界面如下图所示，用户在界面上点击“请按我”按钮，则会在按钮下方出现“Hello！App Inventor”。 3.1 创建新工程 进入App Inventor后， 在“My Projects”页面中点击“New”按钮，新建一个App Inventor工程。在弹出的对话框“New App Inventor for Android Project”中，“Project Name”后面的输入框中填入新建App Inventor工程的名称，这里填入HelloAppInventor作为工程名称，然后点击“OK”按钮完成工程创建，如右图所示。 3.1 创建新工程 工程创建完成后，“Projects”中会显示刚刚创建的工程，如下图所示。工程名称“HelloAppInventor”前面有一个复选框，作用是进行批量删除操作，如果选择这个复选框，“Delete”按钮就会变为可点击的状态。 3.2 界面设计 点击新创建的工程名称“HelloAppInventor”，App Inventor会打开界面设计器页面，如左图所示。这样，用户就可以开始进行HelloAppInventor的界面设计。 3.2 界面设计 App Inventor会自动创建一个屏幕页Screen1，可以在模块区中看到屏幕页Screen1。屏幕页是界面控件的承载体，供用户在其上面摆放各种界面控件。 在属性设置区（Properties）中，将Screen1屏幕页的标题（Title）属性从“Screen1”更改为“Hello AppInventor”，设计区（Viewer）中HelloAppInventor示例的标题也会立即更改为“Hello AppInventor”，如右图所示。 3.2 界面设计 选取界面控件——按钮 3.2 界面设计 控件重命名 选择按钮控件后，模块区也会出现刚刚放置的按钮控件，如右图所示，缺省的名称为“Button1”。为了在后面的逻辑设计中，可以方便的知道这些控件在界面上是做什么用的,可以将控件重命名，例如“Button1”按钮，就可以重新命名为“ButtonClickMe”或是“button_click_me”等。 3.2 界面设计 设置控件属性值 属性 缺省值 修改值 BackgroundColor Default Green FontSize 14.0 30 Text Text for Button1 请按我 Width Automatic Fill parent 下面修改属性设定区中Button1按钮的属性，所有的修改内容如上表所示。修改Button1按钮的属性的目的是让按钮看起来更加醒目，且可以显示中文提示“请按我”，使用者就可以轻易的判读出这个控件是一个按钮。 3.2 界面设计 将按钮的背景颜色修改为绿色，修改方法是将BackgroundColor属性由默认的“Default”改为“Green”，如右图所示。 设置控件属性值 Width属性是控制按钮宽度的属性，缺省值是“Automatic”，另一种设置方法是“Fill parent”，这样的设置方法，按钮的宽度会填充满整个父控件，如下图所示。 3.2 界面设计 修改Button1按钮的字体大小是通过修改FontSize属性实现的，FontSize属性的缺省值是“14.0”，将其修改为“30”即可。Text属性是控制按钮的显示内容，将其从缺省的“Text for Button1”改为“请按我”。如下图所示。 设置控件属性值 3.2 界面设计 设置控件属性值 Button1控件的属性设置完成后，设计区中生成的HelloAppInventor界面如左图所示。因为按钮宽度属性设置为“Fill parent”，按钮的宽度达到了最大值。 3.2 界面设计 选取界面控件——标签 接下来选取第二个控件，从控件库的Basic组件区中，将一个标签（Label）控件拖拽到屏幕页中，此时显示的文字为“Text for Label1”，如右图所示。 3