APP-Inventor实例及讲解.docx

第1章HelloPurr本章将开启你的创建应用之旅。这里介绍了AppInventor的关犍要素组件设计器及块编辑器，并手把手地引导读者创建第一个应用:HeIIoPurro在完成本章的学习之后，就可以起先创建自己的应用了。每当搭建了新的开发环境，通常运行的第一个程序就是显示“HelloWorld",来证明系统已经就绪。这个传统可以追溯到20世纪70年头,从BrianKemighan在贝尔试验室运用C语言起先（Brian现在是谷歌APPlnVentor团队的访问学者！）。运用APPInVentor,即便是创建最简洁的应用，也可以实现声音的播放以及对屏幕触摸的响应，而不只是显示文字。想想都令人感到兴奋，那么，让我们立刻起先吧。第一个应用是“Hell。PUIT"（如图11）,当你触摸这只猫时，它会发出“喷呜”声:当你摇摆它时，则将发出嘟嘟的宸颤。图1-1HeIIoPurr应用学习要点本章用到了以下组件和概念： 选择组件来创建应用：确定了应用的外观； 为组件设定行为：做什么以及何时做： 运用组件设计器选择组件，在AndrOid设备上，有些组件可以显示，有些则不行见： 从本地计算机加载媒体文件（声音或图像），并添加到应用中； 用块编辑器来组装程序块，以此来设定组件行为： 用AppInventor的实时测试功能对应用进行测试。你可以一边创建应用,一边在手机上看到它们外观以及运行状况： 将应用打包并下载到AndrOid设备上。AppInventor的开发环境AppInventor的编程环境包括以下三个重要组成部分，如图1-2所示： 如图1-2A所示，组件设计器运行在阅读器中，创建应用过程中，用它来进行组件的选择，并进行属性设置： 如图1-2B所示，像组件设计器一样，块编辑器也在阅读得中运行，用于创建组件的行为： 测试设备：在开发应用过程中，可以用AndrOid设备对应用进行同步的运行及测试：假如你手边没有Android设备，你可以运用系统中集成的Android模拟器来测试应用。PaletteUserInterface1.ayoutMediaDrawingandAnimationSensorsAcceleromeefSensorBa(deScaf®1.ocabonSensor囹NearField®YOnentationSensor力SocialStorageConnectivity1.EGOeMINDSTORMS®ViewerNorvvisiblecomponentsSoundlAcceIefometefSensorIMediameowkitty.图1-2A组件设计器HeIIpPurrSeen1WAddScreenxRemoveSeenHelloPiirrAddScreenRemoveScreenViewerGJ公oShowWarningsBlocksBuiItHn口ControlH1.ogicBuathText1.istsColorsHvanablesProcedures-Saeenll1.abeilJBUttOnl,SOUnal*AccderometefSensorI®AnycomponentRenameDeleteProjectMediaKrttypngmeow.mp3Uploadnew,图1-2B块编辑器在阅读器中访问即可启动APPInventore假如你是第一次运用AppInVentOr,你会看到弹出的项目(Projects)窗口，它多半是空的，因为你还没有创建过任何项目。单击页面左上角的“ProjeCtoStartnewProjeCt.”创建一个项目，输入"HeIIoPun"作为项目名称（留意不带空格）,然后单击0K。打开的第一个窗口是组件设计器（Designer）,你可以单击窗口右上角的Blocks按钮来切换到块编辑那。在Project右侧的Connect下拉菜单中有三个可选项（三类测试设备），如图1-3所示。图1-3单击“Connect"并选择"AICompanion'.（应用开发伴侣，或简称A伴侣）假如手边的Android设备可以通过WIFI访问互联网，用该设备访问GooglePlay,搜寻MIT的AlCOmpaniOr,下载、安装并启动它。然后在"Connect”下拉菜单中选择“AlCompanion",并依据弹出窗口以及Al伴侣中的提示进行操作。除此之外，也可以运用Android模拟器来测试应用，选择"ConnectOEmuIatOrn来加我Android模拟器，大约要等30秒钟。假如一切正常，将会看到组件设计器窗口、块编辑器按钮，假如你选择了EmUIator选项，你还可以看到模拟器窗口（屏幕上看起来应当像插图1-2A和1-2B,但窗口中大部分是空的）。假如您还有问题，请重温网站中的安装说明。设计组件我们运用的第一个工具就是（也只能是）组件设计器。组件是你用来创建应用的基本元素，就像菜谱中的原料。有些组件特别简洁，1.abe（标签）组件，它用于在醉幕上显示文字；或者如“Button"（按钮）组件，粒按它则引起一个动作。其它组件则要更困难：一个绘图的"Canvas”（画布）组件可以容纳静止图像或动画；"accelerometerSensorl'（加速度传感器）组件是一种运动传感器，它的工作原理类似于Wii限制器，它可以检测到设备的移动或摇摆：还有的组件用于编写并发送短信、播放音乐和视频以及从网站获得信息等等。当你打开DeSigner时，其外观如插图1-4所示。图1-4AppInventor的组件设计器Designer被划分为如下几个区域：中部的白色区域称为预览窗口(Viewer),用于放置应用中所需的组件，你可以依据自己的喜好来支配这些组件。预览窗口只能粗略地显示应用的外观，例如，及测试设备中的应用相比，在预览窗口中，一行文字可能会在不同的地方换行。假如想看到应用的实际外观，可以将应用下载到测试设备上（稍后我们会在"打包应用程序并下载”的部分具体介绍，或者下载APPInventor自带的模拟器。 预览窗口的左侧是组件面板（PaIette）,其中包含了可供选择的各类组件。该面板按类别划分为几个部分，默认状况下，只有用户界面（USerInterfaCe）组件可见，可以通过点击其他类别的标题，如Media（媒体）等，来查看其他组件。 预览窗口的右侧是组件列表（ComPOnentS）,显示了项目中的全部组件，拖动到预览窗口中的任何组件都将显示在该列表中。目前，该项目中只有一个组件：Screem,它代表设备的屏幕。 组件列表下方是媒体列表（Media）,显示项目中的全部媒体资源（图像和声音）。本项目中尚未添加任何媒体资源，不过很快就会添加。最右边的部分用于显示组件的屈性（ProPerties）,在预览窗口中单击某个组件，将在PrOPertieS下方看到该组件的一系列属性。属性描述了组件的具体信息（如，单击1.abel组件可以看到它的颜色、文字内容、字体的属性。），可以修改属性假。当前显示的是屏幕（名为Screenl）的屈性，包括背景颜色、背景图像及标题等。HeIIoPurr应用中须要两个可视组件（可以理解为应用中的确可见的组件）：1.abeI组件显示文字“宠物小猫"，而BUtton组件中有一张猫的图片；还须要一个非可视的SoUnd（声音）组件，用来播放声音，如猫叫声：还有一个ACCeIerOmeterSenSor（加速度传感器）组件，用于检测设备的移动或摇摆。不必担忧，我们将按步一步地教你运用这些组件。创建一个1.abel（标签）添加的第一个组件是1.abel：1 .转到组件面板（Palette）,单击1.abel（列表中的第五个），并将其拖动到预览窗口（VieWer）中。你会看到一个矩形框出现在预览窗口中，框里写着Textfor1.abel1o2 .看组件设计器右侧的PrOPertieS（属性）框,它显示了1.abel的属性。在中间位置有一个TeXt属性，下面是1.abel中显示的文字。将文字改为“宠物小猫”并按回车键。你会看到在预览窗口中的文字也变更了。3 .单击BaCkgrOUndCoIOr（背景色）下面的方框来变更1.abel的背景色,目前属性位为NOne（无背景色），从显示的颜色列表中选择蓝色，并将1.abel的TeXtCoIor（文字颜色）屈性改为黄色。最终将FontSizeC?号）属性改为20.Designer的外观如图1-5所示：图1-5应用中有了一个1.abel（标签）要确保Android测试设备或模拟器处于连接状态。在设计器中添加的1.abel会在测试设备上显示出来。在APPlnVentOr中，在设计器中为应用添加组件，等同于在设备上构建应用。这样一来，你可以随时看到应用的外观，这就是所谓的实时测试，你很快就会看到，这样的测试也同样适用于在块编辑器中为组件添加行为。添加BUttOn（按钮）组件HelloPurr应用中的猫咪用Button组件来实现：创建一个一般Button.然后将BUttorl的图像更改为猫咪。在组件设计器（Designer）的组件面板（Patatte）中单击BUtton（在列表的顶部），将它拖到预览窗口（Viewer）中，置于1.abel下方。你会看到一个矩形按钮出现在预览窗口中。几秒钟后，该按钮就会出现在AndrOid设备上。试着轻击设备上的按钮，有什么反应吗？不会的，因为应用没有向BUtton发布吩咐。这是理解APPInVentor的第一个耍点：添加到设计器中的组件，必需在块编辑器中创建相应的程序，才能使组件产生某种行为（在设计器中添加一个组件之后要做这件事）.我们希望当点击这个BUttOn时，它会发出猫叫声，但我们希望这个button开起来相隔小猫，而不是一个一般的方块，因此须要为button设置图片：1 .首先，须要下我的小猫的图片，并保存在你的电脑上。从kittypng下我名为kitty.png的图片文件（Png是及jpg、gif等类似的标准图像格式,在APPInVentor中，全部这些都是布效的文件类型，及常用的标准声音文件.mpg或.mp3一样），同时从meow.mp3下载声音文件（选择“网页另存为”来保存声音文件）°2 .在预览窗口中点击该按钮，属性框中将显示其属性。点击中部Image属性（现在显示的是NOne）。显示-UPlOadFile."按钮。3 .点击“UploadFile.按钮，再单击弹出窗口中的"选择文件"按钮,阅读并选择之前下载的文件kitty.png,然后单击确定。4 .几秒钟之后,kitty.png被列为Button的Image属性的选项，单击“0K”。及此同时，ketty.png也出现在设计器窗口组件列表下面的Media区域中。在测试设备中，也将显示猫咪的图片，此时按钮看起来像一只小猫咪。5 .留意到猫咪的图片上显示文字UTeXtfOrBUtton1",我们不希望在应用中看到这些，因此将BUttOnl的TeXt属性改为“宠物小猫”一类的文字，或者干脆删除全部文字.现在设计器看起来如图1-6.HeIIpPurrSemAddScreen.RemoveSaeenComponePaletteUserInterfaceButtonCheckBox®I芍Clock®NImageAl1.abel®I国UstPicker®IANotifier(J)IPaSSWor(JTextBOXiSImer®IJTextBox®Sveoviewef®ViewerDiSPlayhiddenComPOnentSinVieW曰t9:481.ayoutMediaDrawingandAnimationSensorsSocialStorageConnectivity1.EGO®MINDSTORMS®SaeenlMediameovx>ttyf图1-6应用中的一个1.abel和一个显示为图像的Button添加猫叫声我们希望当点击按钮时，应用会发出猫叫声。为此须要添加猫叫的声音文件，并通过设定Button的行为来实现这一功能：1 .假如meow.mp3文件尚未下载，现在点击链接meow.mp3下载：2 .在左侧的组件面板中，单击Media类的标题打开Media组件列表。向预览窗口中拖放一个SoUnd组件。无论你把它放在哪里，它都会出现在预览窗口的底部，并被标记为“Nonwisiblecomponents（非可视组件）"。非可视组件在应用中发挥特定作用，但不会显示在用户界面中：3 .点击SoUndl以显示其屈性。设置其SoUrCe屈性为meow.mp3.同猫咪图片一样，须要从电脑中加载这个声音文件。加载完成后，Media列表中将出现kitty.png及meow.mp3两个文件。表1-1中列出了现有的组件。表11HelIOPUrr中的组件ButtonUserInterfaceBUttOnl点击发出猫叫声1.abelUserInterface1.abell显示文本“宠物小猫”SoundMediaSOUndl播放猫叫声undefined添加组件行为刚刚添加了BUttOrI、1.abel、以及Sound组件来构建我们的第一个应用，现在运用块编辑器来实现点击Button产生猫叫声的功能。单击设计器右上角的“Blocks"按钮切换到块编辑器。在块编辑器窗口中，可以为组件设定行为：做什么以及何时做。此处是让小猫按钮在用户点击它时播放声音。假如把组件比作菜谱中的原料,那么块（Blocks）则相当于烹饪过程说明。发出猫叫声在块编辑器窗口的左侧，“Blocks”标题下面，可以看到很多分属不同类别的按钮，其中包括了我们在设计得中创建的全部组件：ScreensBUttOn1、1.abeH以及SOUndI,点击它们就像打开抽屉,将看到一组适用于该组件的可选程序块（BIoCkS）。点击BiJttonl打开抽屉，显示了及BUttOn有关的程序块，可以用它们来设置BUtton的行为，最上面的Block就是Btto1.Click,如图1-7所示。HeIIpPurrScreen!I卜dScreenRemOVeSaeenBlocksViewerBuilt-inHControlM1.ogicMathText1.istscolorsvariablesProcedures-SaeenlA1.abdI-Buttonl3souM1®AnycomponentRenameDeleteMediameow.mp3tattypngUploadFile.ButtonlBackgroundColor1Euttonl*BackgroundColor图1-7点击BUttonl时显示适用于Button组件的程序块(Blacks)单击标布"Button1.CIick的块并将其拖到工作区。留意，Buttonl.Click这个块上包含了when0凡是包含when的块都被称为事务处理程序，用来定义当组件上发生了某种特定事务时，应用该做什么。在本例中,为用户点击猫咪（其实是按钮）时发生了好玩的事情，如图1-8所示。下面我们将在程序中添加一些块，来响应发生的事务。IlellpPijrrScreenlIAddScreen.RemOTeScreenViewerBlocks三Built-in口ControllogicMathText1.istsColorsVariablesProcedures三fScreenl1.at>e<lButtonlSound1®AnycomponentRenameDeleteMediameowmp3kitty.png图1-8定义“ButtonCliCk”块来响应用户的点击事务在块编辑器中点击SoUndl打开抽屉，拖出"callSound1Play"块（之前将SOUndl的SOUrCe属性设置为meow.pm3）。留意，块"callSoUndl.Play”的形态恰好可以嵌入BUtton1.CliCk块中标有“do”的缺口。APPlnVemor的这种设置，确保只有特定的块可以组合在起，这样确保了连在一起的块可以协同工作。标有Call的块用来定义组件的行为。在本例中，这两个块结合在一起，构成一个单元，如图1-9,两个块连接到一起时，你会听到"啪"的一声。HeIIpPurrSaeen1IAdoSCreen.RemoveSeene图1-9点击按钮将播放猫叫声不同于传统的程序代码（通常像混乱的“天书”一般），SAppInventor中，BlOCkS拼出了行为。在本例中，我们等于说，"嘿，AppInventor.当布T人点击小猫时，播放猫叫声。”测试：让我们通过检查来确保一切正常每当向应用中添加了新东西,就要进行测试，这特别重要。在测试设备上点击该按钮（或在模拟器上单击它）.你应当听到猫叫声。恭喜你，你的第一个应用跑起来了！。添加振动效果当点击按钮时，让猫咪发出“Purr”声和“meow”声，这里用手机的振动来模拟"Purr"声。这听起来很难，其实特别简洁，因为播放“meow”声音组件也可以使设备产生振动。AppInVentOr可以帮助你挖掘设备的核心功能，而无需考虑它们如何实现振动。现在只须要向"Buttord.click”块内添加其次个行为：1 .进入块编辑器，单击SOUndI打开抽屉：2 .选择CaHSOUndI.Vibrate块，将其拖动到WhenBUttonl.Click块内，置于CallSOUndlPlay块下，恰好及原来的块吻合：假如不吻合，可尝试拖动它，使callSoundkVibrate块顶部的凹陷恰好及callSoundkPIay块底部的凸起相对。HelloPurrViewerSbeen1IAddScreenIBUIItTn13Controllistscolorswen(211Z2UDCbCkdoCall纪Piay"¾ltg!EIK¾VitXa(SrrulhsecsVariablesProceduresSaeenla1.abeiiButto1、Soundl®Anycomponent图I-IoCliCk事务引发了播放声音及振动3 .留意：在CaIlSoUndl.Vibrate块的右下角写着millisecs（亳秒）°块上的开放插槽表示须要插入其他块，来设定行为的具体方式。本例中,须要设定CaIlSOUndI.Vibrate块的振动时长。以亳秒（千分之一秒）为单位输入时长，亮秒是多数编程语言中惯用的时长单位。假如想让设备振动半秒钟，须要输入数字块"500”。打开Math（数学）抽屉,其中的第一个块是“0”，这就是数字块，如图111所示。IlelloPurrBlocksButtnViewercontrol1.ogicvariablesProceduresScreen1label)IdButtonId'SoundlAnycomponentScreen1IAddScreenIRemoveScreenRenameDeleteProjectMediaKrttypngmeowmp3Uploadnew图1-11打开Math抽屉4 .点击P"块，蓝色的“0”块留在了工作区，如图1-12所示。图11-12选择一个数字块（0为默认值）5.点击数字0,输入新值“500”,如图1-13所示。图11-13将默认值。改为5006.将“500”数字块插入CalISoUndlMbrate块右侧的插槽内，如图1-14所示。图1-14将数字块500插入插槽测试：试试吧！点击设备上的按钮，你会感觉到半秒钟的嘟嘟声（振动）。摇摆手机现在来添加最终一项，在AndrOid设备上实现一个很酷的功能：摇摆设备时发出猫叫声。为此要用到ACCelerometerSenSOr（力|】速度传感器）组件，它可以检测到设备的摇摆或移动。1 .在设计器中，绽开组件面板中的传感器（SenSOrS）分类，拖出一个ACCelerometerSenSor（力速度传感器）组件。不必介意把它放到哪里，像任何非可视化组件一样，无论你把它放在预览窗口的什么地方，它都会落到预览窗口底部的“非可视组件”区域。2 .摇摆设备的事务须要及单击按钮事务分开处理。这意味若须要一个新的事务处理程序。进入块编辑器，打开ACCeIerometerSenSOrl抽屉，拖出AcceIerometerSensorI.Shaking块。3 .像点击按钮时播放声音-样，将SOUndI.Play块插入ACCelerOmeterSenSorI.Shaking插槽，摇动设备试试看。图1-15显示了完整的HelIoPUrr应用中所用的块。图1-15HelIOPUrr应用中的块将应用打包以供下载AppInVentor是一种云计算工具，这意味着你用谷歌的在线服务器存储你的应用。所以当关闭APPlrlVentor,再新返回时，你的应用还在;你不必在个人电脑上保存任何东西，像Word文件或音乐文件那样。此外，假如连接了测试设备，无需向设备下载任何文件，就可以轻松地测试应用（称为实时测试）：但问题是，假如设备及APPInVentor断开连接，那么应用将停止运行。由于从未在设备上安装过应用，因此无从找到应用的图标.可以将应用下载并安装到AndrOid设备上，以便在不连接计算机时，应用也能运行。首先，确保设备允许从AndrOidMarket以外的地方下载应用。具体做法是：在设备上选择“设置平安”，并勾选UnknoWnSource（未知来源）一项。然后回到APPInVentor设计器中，单击BuiIdOApp（provideQRcodefor.apk）,此时窗口中出现,个进度条，这个过程大约须要一分钟。进度消逝后，几秒钟后，会显示打包应用的QR码。用条码扫描软件获得QR码之后，设备会提示输入谷歌帐户的密码（假如设备之前登陆过google账户，此步骤不会出现）：密码输入后，应用被下载到设备上。假如你的设备中没有条码扫描软件，去GoOgIePIay搜寻并下载安装一个.下载完成后，会询问你是否安装，请单击安装。（假如设备上已经安装了MlTAl2Companion,用其中的条码扫描功能，可以顺当实现应用的下载安装。）安装完成后，设备上出现HeIIoPurr应用的图标这就是我们刚刚创建的应用，点击让它起先运行。(请确保运行的是新安装的应用，而不是之前及APPlnVentOr连接的应用。)现在，你可以断开连接甚至重新启动设备，并删除APPlnVentOr中的全部应用，而新应用依旧存在。了解这一点很币:要：打包的应用已经及APPInVentOr中的项目分别。你还可以像之前一样，接着在APPInVentor中完善你的应用，并在测试设备上运用Al伴侣做实时测试，但这些都不会变更已经安装在设备上的应用。假如在APPIrlVerltor中对应用进行了修改，那么修改结果必需重新打包，并下载安装新版原来替换设备上的原有版本。立刻用Android设备下载安装HelIOPUn应用吧，这样，你就可以及家人和挚友一起共享了！共享应用有两种方式可以共享应用：第一，共享可运行的应用。在APPIrlVemor项目中单击BuiIdOApp(save.apktomycomputer),此操作将扩展名为apk的文件保存到电脑。将apk文件上传到Web上，让其他人可以下载并安装。须要强调的是，设备的平安设置中“未知来源”一项必需选中，才能安装来源于AndroidMarket之外的应用。其次，及其它AppInVentor开发者共享应用的代码块：点击ProjectOMyProjects.选中要共享的应用(本例中是HelloPurr),选择projectExportselectedproject(.aia)tomycomputer,此操作将扩展名为aia的文件(HeIIoPurraa)保存到电脑上默认的下载文件夹中。可以用电子邮件把文件发给其他人，他们打开APPInVentor,选择Projectlmportproject,并选择.aia文件。这样，运用者获得了该应用的完整备份，对此备份的任何修改，都不会影响原有版本。共享应用的过程特别简洁，更多好玩的作品在网站的共享社区中。改进现在，应用已经完成，并可以随时运行它（或许还能下载及人共享），或许还会感到什么地方有些欠缺。来看看下面的问题，并思索如何解决它们。随着学习的进展你会发觉，通常是先创建一个应用，之后设法改进、完善它，并重新回到程序中来实现你的新想法。不必担忧，这很好，这正是一名优秀开发者的必经之路！当摇摆设备时，猫的叫声听起来有点儿惊奇，似乎有回声。这是因为在1秒钟内，加速度传感器多次触发摇动事务，所以猫叫声是重叠的。你会发觉SOUnd组件有一个属性MinimUminterVal（最小间隔），它确定了两次声音播放之间的时间间隔。当前设置为400室秒（约半秒钟），这个间隔小于单次猫叫的持续时间（500毫秒）。通过变更播放的最小间隔，可以变更声音的重段。假如你带着安装了应用的手机到处走动，每当你突然移动时，设备就会发出猫叫声，这可能让你觉得尴尬。通常Android应用会保持在运行状态，即使你不去管它们，应用程序及加速度传感器之间的通信也不会问断，因而猫叫声也会相继传来。要想真正退出程序，须要呼出HelIoPurr应用并按下设备上的菜单按钮，会呼出两个选项，其中st。PthiSapplication用来停止并完全关闭应用。小结以下是本章中涵盖的内容： 创建应用的过程：在组件设计器中选择组件，并在块编辑器中设定它们的行为一做什么及何时做： 有些组件是可见的，有些则不行见。可见组件会出现在应用的用户界面中；不行见组件执行像播放声音这类的事情； 通过在块编辑器中组装"块”来定义组件的行为。先拖出一个像WhenBUtton1.doCliCk这样的事务处理程序，然后将CallSOUnd.Play这样的吩咐块嵌入其中。这样，当用户点击该按钮时，块Button1.CIick中的全部块（吩咐）都将被执行； 有些块（吩咐）须要附加特定信息才能起作用。例如振动就必需设定振动的亮秒数。这些值被称为参数。 数字块用来表示数字。你可以将这些数字块插入到须要参数的吩咐块中。 APPlnVentOr供应传感器组件，加速度传感器（ACCeIerometerSenSOIj可以检测到设备的移动。 你可以将创建完成的应用打包并下载到手机上，它们将独立于APPInventor而运行。第2章油漆桶本章介绍CanVaS组件，用它来生成简洁的二维（2D）图形，目标是创建一个PaintPot（油漆桶）应用，让用户在手机群幕上绘制图画，并让用户用手机给自己拍照，然后在自己的照片上绘图。回顾历史，早在20世纪70年头，PairItPot是最早运行在个人电脑上的应用之一，目的是为了证明个人电脑的潜力。那时候，开发这样一款简洁的绘图应用是一项极其困难的工作，而且绘图效果也略显粗糙。但现在，运用APPInventor,任何人都可以快速地创建一个好玩的绘图应用，这也是创建2D嬉戏的起点。如图2-1,油漆桶应用将实现下列目标： 用手指引取颜色并绘图： 用手指在手机屏幕上画线； 用手指触碰手机屏幕画圆点： 点击按钮来擦净醉幕； 点击按钮来变更绘制网点的大小： 用相机拍摄照片，并在照片上面图。MW4»X三*HI图2-1油漆桶应用学习内容本章涵盖了以下内容： 运用Canvas组件来绘制图画； 处理屏幕上的触摸及拖拽事务： 运用arrangement组件来限制屏幕的外观； 运用带有参数的事务处理程序； 定义变量，来保存某些状态，如用户绘制的圆点的大小。打算起先首先检修测试用的AndrOid设备是否已经为运用AppInVentOr做好了打算： Android设备中已经安装了“AI伴侣”； 手机的WiFi连接已经打开：再访问APPInVentor网站。新建项目"PaintPot",点击"Connect->AICompanior,并依据提示操作，连接测试设备。在正式起先之前，在组件设计器右侧的“属性”面板中，将"Screenr的"Title”属性修改为“油漆桶工在测试设备上可以马上看到这一变更：应用的标题栏将显示"油漆桶"。这样做是否会混淆了项目名称及屏幕标题呢（在英文版书中，将Title改为“PaintPot”，及项目同名，因此才ISr此疑问，对中文读者来说不存在这个疑问。译者注）？别担忧！在APPmVentor中有三个特别重要名称： 项目名称：同时也是应用发布时所运用的名称。提示：想修改项目名称，可以点击PrOjeCt->Saveprojectas,可以将原有项目给予新的名称，同时原有项目依旧得以保留： 组件名称：一般的组件名称都可以修改，（HScreenl例外，在当前版本中不能修改它的名称; 屏幕标题：出现在设备的标题栏中，是SCreen组件的TitIe属性，默认值是SCreen1,如第一章HelbPUrr中所见,可以随意修改它,如我们刚才将其改为“油漆桶工设计组件创建“油漆桶”应用须要以下组件： 三个BUtton组件：用来选择画笔颜色：红、蓝或绿，放在HorizontaIArrangement组件中； 一个BUtton组件用来充当橡皮： 另外两个BUtton组件用来变更画笔的大小： 一个CanVaS组件，充当画布。CanVaS具有BaCkgroUndImage属性,我们将其设置为第一章HeIIoPUrr中的kitty.png,稍后还可以将背景图片设置为用户拍摄的照片。创建颜色按钮首先依据以下提示创建三个颜色按钮:1 .拖一个BUttOn组件到预览窗口，设置其TeXt属性为“红”，BackgroundCoIor屈性设为红色：2 .在组件列表中选中BUttonl（可能已经被选中）,点击Rename按钮将组件名称改为RedBUtton。留意组件名称中不允许有空格，因此通常将组件名称中每个单词的首字母大写。3 .同样,创建另外两个按钮，分别命名为BlUeBUtton和GreenBUttOn,将它们垂直地放在RedBUtton下方。比照图2-2,检查一下你的操作结果。ViewerJDiSPlayhidden8mponentsinViewer图22创建了3个按钮的预览窗口ComponentsSee1RedButtonBIueButtonGreenButton留意：在项目中，建议为组建起一个有意义的名称，而不是像第一章那样采纳默认名称。有意义的名称增加了程序的可读性，尤其是在切换到块编辑器时，将有助于区分不同的组件。本书中，采纳惯用的骆驼命名法（如RedBUtton）,即多单词无空格的首字母大写命名方式。测试：假如你还没有点击“Connect”来连接测试设备，那么做好连接,然后检查一下应用在设备（假如已经连接）上的表现。运用Arrangement组件改善布局现在三个按钮排成一列纵队,我们希望它们能排成一行,如图2-3所示,运用HorizontalArrangement组件来实现组件的水平排列：1 .在组件面板的1.ayOUt类中拖出HOriZomalAiTangemem组件，放在按钮下方:2 .在屈性面板中，设置HoriZOntalArrangemem的Width屈性为“FillParent"（充溢父容器），以便在水平方向上占满整个屏幕：3 .将三个按钮移动到HorizontaIArrangement中。留意，当你拖拽按钮时,会看到一条蓝色竖线，提示按钮聘会被放置在什么地方。Viewer图23在水平布局组件内的三个按钮ComponentsSeen1日包HonzontaIArfangementl-dRedButtonBlueButton-JGreenButton此时查看组件列表，你会发觉三个按钮缩进排列在HorizontaIArrangementJ5iT'.以显示它们现在是次级的组件。同时留意到全部组件都缩进排在SCreenl项下。测试：在测试设备的屏幕上，你会看到三个按钮排列成一行，尽管看起来及预览窗口中略有不同。如，在预览窗口中可见的HorizontaIArrangement四周的轮廓线，在测试设备上则不行见。通常采纳布局组件来创建简洁的垂直、水平或表格布局，也可以通过逐级插入（或嵌套）布局组件来创建更加困难的布局。添加CanVa5（画布）CanVaS像一块画布，用户可以在上面绘画（画圆、画等）。添加一个Canvas.并用第一章中的kitty.png作它的背景图片（设置BaCkgroUndlmage屈性），具体步骤如下：1 .打开组件面板中的DraWingandAmination（绘画及动画）类,将CanVaS组件拖到预览窗口中，改名为DrawingCanvas,Width设为"Fillparent".Height设为300pixels：2 .假如你己经完成了第一章的课程，那么文件kitty.png已经下教；假如没亿清在这里下载kitty.png,3 .将DraWingCanVaS的Backgroundimage设置为kitty.png：在设计器的属性面板中，Backgroundimage的默认值为None,点击NOne及UploadFile来添加kitty.png文件：4 .将DraWingCanVaS的PaintCoIOr属性设置为red,以便当用户刚启动应用但尚未点击颜色按钮时，画笔为红色。比照图2-4检查一下你的操作。ViewerDsplayhiddencomponentsinViewerComponentsScreenl6HonzontalArrangementIRedButtonWBIueButtonGreenButtonRenameDeleteJ<DrawingCanvas图2-4背景图片设为kitty.png的DrawingCanvas组件设置底部按钮及照相机组件1 .从组件面板中拖出其次个HoriZOntaIAlTangement,放在CanVaS下方,再拖两个Button