开发者社区> geekori> 正文

AppInventor:不需要编写一行代码开发Android程序

简介: 本文截取自《Android开发权威指南》  转发微博有机会赢得《Android开发权威指南》       从AppInventor本身的名字来看,可将其拆成两个单词:App和Inventor。
+关注继续查看

本文截取自《Android开发权威指南》  转发微博有机会赢得《Android开发权威指南》


      从AppInventor本身的名字来看,可将其拆成两个单词:App和Inventor。App表示应用程序,而Inventor是发明家。Inventor这个单词充满了艺术气息。那么将这两个单词连接来,就是发明程序(要注意,不是编写程序,而是发明程序),而且要用艺术的方法。下面先来看一看用AppInventor发明出的程序是个什么样。图1是一个用AppInventor发明的程序。功能很简单,随机产生一个1至100的整数,如果随机数的值大于50,则将按钮的背景色设为绿色,否则将按钮的背景色设为红色。

     很多读者一开始看到这个程序,肯定以为是拼图。但这的的确确是一段程序,只是看上去有些像艺术品。看到这,肯定很多读者和我一样按耐不住了,想快点了解如何使用AppInventor来发明Android程序。OK,在接下来的部分将为读者逐一揭开心中的迷团。

图1   用AppInventor发明的程序

         AppIntentor分为两部分:界面设计和代码编写(也可称为代码拼图)。其中界面设计部分是基于Web的应用程序。如果只是设计界面,并不需要安装任何的软件或SDK,只需要在浏览器中访问如下的URL即可。

http://appinventor.googlelabs.com

      使用AppIntentor之前需要有一个Google GMail帐号(没有GMail帐号的读者赶紧到http://mail.google.com去注册一个吧)。使用GMail登录后,直接访问上面的地址就可以进入如图2所示的AppInventor主界面。



  图2   AppInventor的主界面

         单击“New”按钮可以新建一个Android工程。在本例中已经建立了一个DrawRandomCircle工程。单击“DrawRandomCircle”链接进入工程主界面,如图2.35所示。在这个界面中已经包含了设计好的DrawRandomCircle程序,在下一节将会详细介绍如何使用AppInventor设计Android应用程序的界面。


 图3   AppInventor的设计界面

         AppInventor除了设计界面的工具外,还有一个C/S结构的编码工具(更准确地说是拼装代码工具)。这个编码工具需要从如下URL下载一个安装程序。其中包含了Android模拟器以及相应的命令行工具、开发包等。

http://appinventor.googlelabs.com/learn/setup/index.html

        在安装完该程序后,单击图2.35所示界面右侧的“Openthe Blocks Editor”按钮,会首先要求下载或打开一个JNLP文件,这是Java的部署文件。直接选择打该该文件即可。打开该文件后需要等待一段时间,然后会出现一个如图4所示的界面。


  图4    AppInventor拼装代码的地方


图4所示界面左侧的列表是各种Android控件,中间空白的区域是拼装代码的区域。在下面我们将看到如何拼装代码。

用拖拽控件的方式设计界面

     现在重新回到图3所示的设计界面。首先需要在界面上垂直方向放置两个按钮。并且在按钮下方放一个Canvas。这两个控件在界面左侧的“Basic”页中前两个位置,如图5所示。

图5  Button和Canvas控件的位置

      实际上,在完成上述的设计后,就可以进入下一节进行拼装代码了。但为了和2.2节实现的例子的效果完全一样,还需要设置Button和Canvas的相应属性。我们可以在右侧的“Properties”区域设置相应的属性,要设置属性的控件有4个:Screen1、Button1、Button2和Canvas1,属性值如下:

  • Screen1.BackgroundColor:Black
  • Screen1.Title:First Android Application
  • Button1.Text:Draw Random Circle
  • Button1.Width:Fill Parent
  • Button2.Text:Clear
  • Button2.Width:Fill Parent
  • Canvas1.BackgroundColor:Black
  • Canvas1.Width:Fill Parent
  • Canvas1.Height:350 pixels

 像拼图一样拼装代码

     首先我们打开图4所示界面左侧的某个标签,会看到如图6所示的拼图元素。这些元素都是公用元素,也就是所有的Android应用程序都可以使用的元素。再单击“My Blocks”标签,以及Button1,会看到如图7所示的拼图元素,这些拼图元素就是和在图3所示界面中绘制的控件相关的事件和动作。

                              图6     公用的拼图元素

                                 图7   与拖拽控件相关的拼图元素

          下面来看看如何使用这些拼图元素来拼装代码。首先我们来观察一下每一个拼图元素的形状,我们先来看看Button1的Click事件的拼图元素(图7所示拼图元素的第一个),如图8所示。这个拼图元素有一个半封闭的凹巢,内侧左上角有一个突起。再看一下Canvas1的DrawCircle拼图元素(在图7所示界面Canvas1标签中),如图9所示。DrawCircle拼图元素上方有一个凹陷的槽,下方有一个突起,在右侧有三个凹陷的槽。最后看看产生随机整数的拼图元素(在图6所示界面Math标签中),如图10所示。这个拼图元素自动生成了3个更小的拼图元素,其中有两个表示整数的拼图元素。从这3个拼图元素的位置来看,突起的部分正好嵌入到了凹槽中。从这一点可以推断突起是需要嵌入到凹槽中的,也就是说,代码片段需要通过突起和凹槽进行连接,从而形成一个完整的应用程序。以此类推,DrawCircle拼图元素上方的凹槽是可以和Click事件拼图元素内部的突起连在一起的,这样当单击Button1后,就会执行DrawCircle动作。


图8   Click事件拼图元素 


图9    DrawCircle拼图元素


图10  产生随机数的拼图元素

      按着这种方式,我们就可以开始拼装绘制随机实心圆程序了。下面先看看这个程序需要哪些拼图元素,除了图8、图9和图2.42所示的3个拼图元素外,还需要如下几个拼图元素。

  • Canvas1.PaintColor(在Canvas1标签中)
  • Choose(在Control标签中)
  • >(在Math标签中)
  • Number(在Math标签中)
  • Blue(在Color标签中)
  • Red(在Color标签中)
  • Green(在Color标签中)
  • Button2.Click(在Button2标签中)
  • Canvas1.Clear(在Canvas1标签中)
  • >(在Math标签中)
  • Number(在Math标签中)
  • Blue(在Color标签中)
  • Red(在Color标签中)
  • Green(在Color标签中)
  • Button2.Click(在Button2标签中)
  • Canvas1.Clear(在Canvas1标签中)

      这些拼图元素的形状如图11所示。


 图11   本例用到的拼图元素

         现在我们就可以利用图8至图10所示的12个拼图元素来拼装本例的代码了,拼装的过程在本节就不详细介绍了,在这里只给出拼装后的结果,如图12所示。感兴趣的读者可以利用上述12个拼图元素按着图12所示进行拼装。



 图12   拼装后的代码片段

           在拼装完代码后,单击图4所示界面右上角的“Connectto Device”按钮。如果这时已经启动了Android模拟器,那刚才拼装的程序会直接在模拟器上运行(如果通过USB连接了手机,并处于调试状态,也可以直接在手机上运行)。如果还没有启动模拟器,在打开图4所示的界面时会自动启动Android模拟器。在AppInventor自带的模拟器中运行的效果如图13所示。



图13    在AppInventor自带的模拟器中运行程序的效果


用程序实现的同样的程序:http://www.blogjava.net/nokiaguy/archive/2011/09/06/358115.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Android 应用开发】动态权限管理示例 ( 使用原生代码实现 | 申请权限 | 判定权限申请结果 | 判定 “ 不再询问 “ 情况 )(一)
【Android 应用开发】动态权限管理示例 ( 使用原生代码实现 | 申请权限 | 判定权限申请结果 | 判定 “ 不再询问 “ 情况 )(一)
45 0
Android 开发中的代码片段(2)复制对象之间的属性值
前言 开发中会遇到这样的一个情况,我们得到一个dto对象,里面有几十个属性值,需要将这几十个属性值的N个通过VO传输另外一个地方,一般我们的做法是: 创建VO类,new vo() 对象,通过vo.set(dto.get)的方式不断的设置值。
894 0
【Android 逆向】Android 进程注入工具开发 ( 注入代码分析 | 远程调用 目标进程中 libc.so 动态库中的 mmap 函数 一 | mmap 函数简介 )
【Android 逆向】Android 进程注入工具开发 ( 注入代码分析 | 远程调用 目标进程中 libc.so 动态库中的 mmap 函数 一 | mmap 函数简介 )
38 0
【Android 应用开发】 Android 相关代码规范 更新中 ...(一)
【Android 应用开发】 Android 相关代码规范 更新中 ...(一)
31 0
web app iphone4 iphone5 iphone6 iphone6 Plus响应式布局 适配代码
来源:http://www.phptext.net/article_view.php?id=387 ------------------------------------------------------------------------------------------------ 文章摘要:最近接触到一个项目由于客户要求的比较~~所以也参与了下,结果晋级了一下~~来和大家分享~~现在满大街的APP,除了游戏,软件图形类的需要用原生开发好点。
1014 0
《区块链DAPP开发入门、代码实现、场景应用》笔记4——Ethereum Wallet中部署合约
账号创建完成之后,账号余额是0,但是部署合约是需要消耗GAS的,因此需要获取一定的以太币才能够继续本次实现。
1566 0
Android开发权威指南(第2版)新书发布(免费下载随书光盘内容,包括Android源代码)
光盘内容下载 光盘内容下载(新浪微盘) Android4.2.2(CM ROM)源代码下载 如果需要虚拟环境的,这里提供了ubuntu10.04 LTS版本,不需要CPU支持虚拟化(VirtualBox版【VirtualBox-4.
1845 0
Android 开发中的代码片段(1)
前言 收集Android开发中常用的一些代码片段,留存记录 代码 禁止截屏 对安全性要求比较高的APP可以用得到 getWindow().addFlags(WindowManager.LayoutParams.FLAG_SECURE) 禁止输入特殊字符 经历过 Tester 的无限摧残得出的结果,主要是使用正则表达式来完成校验。
1006 0
【Android 应用开发】动态权限管理示例 ( 使用原生代码实现 | 申请权限 | 判定权限申请结果 | 判定 “ 不再询问 “ 情况 )(二)
【Android 应用开发】动态权限管理示例 ( 使用原生代码实现 | 申请权限 | 判定权限申请结果 | 判定 “ 不再询问 “ 情况 )(二)
49 0
【Android 应用开发】 Android 相关代码规范 更新中 ...(二)
【Android 应用开发】 Android 相关代码规范 更新中 ...(二)
24 0
+关注
geekori
欧瑞科技创始人&CEO,东北大学计算机专业硕士,拥有超过20年软件开分经验。欧瑞学院金牌讲师、51CTO学院金牌讲师、CSDN学院特约讲师、畅销书作者,企业内训讲师。曾出版过超过30本IT畅销书,涉猎移动开发、跨平台开发、机器学习、区块链、大数据、编译器等领域。
419
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载