|
|
|
|
移动端

2.3 练习:Sherlock Is Watching

《MIT App Inventor完全上手--不会编程也能"乐高式"构建Android应用的编程神器》本书指导读者一步步地完成每个任务和功能,展示了如何通过拖曳、放置和连接拼图块--而非编写代码--来创建应用。在学习过程中,读者还将掌握专业的设计和开发技术,如果今后确实想要编写代码,那么也会用到这些技术。本节为大家介绍练习:Sherlock Is Watching。

作者:靳晓辉 译来源:清华大学出版社|2015-07-30 20:22

技术沙龙 | 邀您于8月25日与国美/AWS/转转三位专家共同探讨小程序电商实战

2.3  练习:Sherlock Is Watching

接下来,我们使用本节介绍的一些基本功能来创建一个App。与本书中构建的其他App一样,它们在细节上有很大的灵活性。在按照步骤学习之后,你可以随意开展实验,体会各个组件是如何工作的以及哪种类型的定制化是可行的。学习构建App是一个过程,既要按部就班,又要别出心裁。

(1) 单击位于页面上方的My Projects,返回自己的项目(参见图2-14)。

(2) 如果之前创建了CatWatch这样一个App,那么从项目列表中选择它,否则,创建一个名为CatWatch的新项目。

(3) 单击Palette中的User Interface。Palette会展开并显示多个选项,例如Button、Checkbox和Clock。单击并保持住对Button的选择,接着将它拖曳到Viewer中的Android首屏(参见图2-15)。Viewer中出现一个按钮,表示已经将一个元素添加到屏幕上。按钮的名称也被添加到了Components树中。

(4) 该按钮会显示默认文本:Text for Button1。让我们修改此按钮的名称。单击Viewer或Components树中的标签,然后单击Rename按钮。在出现的文本框中,给出另外一个名称,例如Meow。

(5) 注意,修改按钮的名称并不会改变按钮上的文本。要修改显示的文本,单击该按钮并在Properties面板中找到标签为Text的框。接着选中文本并输入Meow。Viewer中的文本将发生改变。

添加图片

图片是为App增添视觉亮点的有效方法。接下来,我们向App中插入一张图片。

(1) 如果还没有下载的话,请从本书网站的InformIT页面上下载图片CatIsWatching。

(2) 找到位于Components框下方标签为Media的框。单击Upload File按钮(参见图2-16),然后上传文件CatIsWatching。这就将图片添加到了App中,使其对所有使用图片的组件都可用。注意文件名出现在了媒体框中。

(3) 单击Palette中的User Interface。接着单击并保持选中该图片,将其拖曳到Viewer中的Android首屏上。在可以放置图片的地方会出现蓝条。通过移动鼠标,可以将图片放置在按钮的上方或下方。当蓝条位于按钮下方时,放开图片。接着单击Components框中的Image1按钮。Properties面板会更新为显示与图片相关的属性。

(4) 单击标签为Picture的框。这里会列出App中可用的所有图片,选择图片CatIsWatching。单击OK就可以看到该图片出现在了Viewer中(参见图2-17)。

(5) 我们需要对小猫Sherlock的这张图片进行调整,使其适当地填充屏幕。单击宽度框并选择名为Pixels的框。输入320像素。

(6) 使用相同的步骤调整高度:单击高度框,然后输入400像素。

(7) 这个App还需要另外一个元素。从User Interface中单击并拖曳Label组件。同样,观察蓝色的插入条,在Button和Picture组件之间放下该Label。接下来,选择Components框中的Label1。单击BackgroundColor标签下面的按钮,它的当前值为None。接着选择Green。

(8) 现在需要在框中输入一些文本。转到Text框中并输入"Sherlock is watching"。选择TextAlignment并将该选项修改为Center。注意,这并不会改变标签的位置--它只会改变标签中文本的位置(参见图2-18)。

(9) 单击右上角的Blocks按钮。应该会在Screen1下面看到Meow、Label1和Image1。你将在这里把这些组件拖曳到Blocks Editor中做进一步的编程。

这里的第一个App相对简单,但它应该能让你更加熟悉App Inventor的核心组件。之后的App将会更加充分地利用界面元素及其编程方式。我们还将探讨把该App载入到你自己的设备上并与其进行交互的方法。

喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:342347198

【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

实时UML与Rational Rose RealTime建模案例剖析

本书将实时系统、实时统一建模语言、实时系统的统一开发过程和Rational Rose RealTime建模环境有机地结合起来,以案例为基础,系统地介绍了...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊