新浪博客

基础案例1：漫画书——基本组件与程序块

2017-06-18 22:39阅读：

http://blog.sina.cn/dpool/blog/u/1652849840

从这篇文章开始，我们以案例的形式来介绍App Inventor，目前已经设计好18个基础案例、5个综合案例和两个App开发专题。其中前三节课为App Inventor开发环境和开发流程的介绍，中间的18个基础案例均对应了App Inventor中核心的知识或技能点，最后的5个综合案例则讲解如何实现一个完整综合的App作品。每一小节的内容我们都将通过一篇文章进行介绍，并且计划在暑假期间录制成微课程提供给大家进行学习，学习目录如下：
一、App Inventor启程
二、App Inventor测试与调试
三、App Inventor初体验——Hello World
四、基础案例1：漫画书——基本组件与程序块
五、基础案例2：涂鸦——画布绘画
六、基础案例3:抽奖——计时器与变量
七、基础案例4:打地鼠——画布与过程
八、基础案例5:贪吃蛇——传感器游戏
九、基础案例6:音乐播放器——多媒体
十、基础案例7:计步器——加速度传感器
十一、基础案例8:地图定位——位置传感器
十二、基础案例9：指南针——方向传感器
十三、基础案例10：听说训练——语音模块
十四、基础案例11：知识测验——列表与对话框
十五、基础案例12:旅行准备——数据库、跨屏幕与列表
十六、基础案例13:记事本——文件管理器
十七、基础案例14:紧急求助——社交组件
十八、基础案例15:天气预报——Web API通信
十九、基础案例16:寻找加油站——Web AP
I通信
二十、基础案例17:登录注册——网络数据库
二十一、基础案例18:养花小助手——蓝牙通信
二十二、综合案例1：一起学古诗（一）
二十三、综合案例1：一起学古诗（二）
二十四、综合案例2：抖机灵（一）
二十五、综合案例2：抖机灵（二）
二十四、综合案例3：旅行助手（一）
二十五、综合案例3：旅行助手（二）
二十六、开发专题1: 创意构思
二十七、开发专题2:UI设计
基础案例1：漫画书——基本组件与程序块
一、这一节中我们将做什么
1.分析“漫画书”App的功能需求；
2.利用按钮、图像、水平布局、对话框等组件进行界面设计；
3.结合功能需求进行逻辑分析，细化到每个事件的具体执行细节；
4.利用“如果......则......否则”条件代码块的嵌套，编写代码，实现功能；
5.不断测试与调试，完善作品，并思考如何优化代码。
二、学习目标
1. 掌握按钮、图像、界面布局、对话框组件的属性、事件和方法；
2. 掌握可视化编程中程序块的操作方法；
3.理解和应用全局变量与选择语句流程控制；
4.理解事件、变量和属性等编程概念。
基础案例1：漫画书——基本组件与程序块
三、学习过程:


活动1:分析需求


《你今天真好看》是一本清新暖萌的漫画集，收录了莉兹·克里莫150多张逗趣漫画。书中集结了所有你能想到的各种萌物，恐龙、棕熊、兔子、企鹅，甚至还有伞蜥、獾、土拨鼠、狐獴……在诙谐的对话中，它们展现出一种与生俱来的幽默感和令人艳羡的生活情趣。
基础案例1：漫画书——基本组件与程序块
想想看，当我们能够用着自己开发的App来看这本有趣的漫画书，是不是挺好玩的？
基础案例1：漫画书——基本组件与程序块
现在我们已经确定了要制作《今天你真好看》这本漫画书的App了。想象一下，如果你想要在自己手机或平板上浏览漫画，最基础的功能需求有哪些呢？
毋庸置疑的是，这个“漫画书”App必须要显示漫画图片，而且我们的漫画图片不止一张，所以还得进行翻页。翻页你可能会想到两种方式，一种是通过按钮来进行前后图片的切换，另外一种思路可能是想到通过刷屏幕的方式来进行翻页，或者把这两种翻页方式都集成到这个App中去。
另外，翻页是不是可以随意前后翻页呢，如果你现在正在读第一页，那还能继续往前翻页吗？相反，如果你正在看最后一页，那你还可以继续往后翻页吗？当遇到这两种特殊情况的时候，我们应该如何友好、人性化的提醒使用者他们现在处在第一页和最后一页了呢？
看，简单的一个漫画书App，就可以有很多的可能性，不同开发者或许有不同的想法。不过，在考虑这些需求的时候，我们要站在使用者的角度去考虑问题，思考他们的需求能否能够满足，操作起来是否符合正常的使用习惯和思维，这款作品使用起来用户体验如何？
考虑到这是第一个基础案例，所以我们的需求设计尽量简单明了。在这个案例中，我们确定如下的功能需求：
1.通过按钮而非刷屏的方式进行翻页；
2.如果处在第一页，则无法继续往前翻页，只可以往后翻页；
3.如果处在最后一页，继续往后翻页则回到第一页，并进行提示；
4.当点击手机屏幕上的返回键时，退出该App。


活动2.设计界面

1.添加和重命名组件
（1）添加与布局组件
新建项目，命名为“cartoon”，App Inventor自动进入到组件设计界面。根据需求分析，我们知道界面中主要需要两个按钮和一个图片展示区域，两个按钮用一个水平布局进行水平排布，另外需要一个对话框进行信息提示。
综上，我们需要如下组件：一个图像组件、两个按钮组件、一个水平布局组件和一个对话框。在组件面板中，我们将上述组件拖拽到工作面板中的手机屏幕中。这里，我们要注意两点：一是两个按钮需要拖拽到水平布局里面；二是除了对话框是非可视组件显示在虚拟手机屏幕下方之外，其余都是可视组件，会直接呈现在屏幕中。
基础案例1：漫画书——基本组件与程序块
基础案例1：漫画书——基本组件与程序块
（2）重命名组件
为了在组件设计与逻辑设计环节我们能够一目了然地知道每个组件的用途，或者帮助我们快速找到我们需要的组件，我们应该养成对组件进行命名的习惯。尤其是同一类组件比较多的情况下，好的命名习惯可以提高我们的开发效率。我们在给组件命名的时候，尽量做到“见名知意”。
在本案例中，我们根据各个组件的用途和功能将组件进行重命名，具体如下：按钮1重命名为“上一页按钮”，按钮2重命名为“下一页按钮”，图像1重命名为“漫画图像”，对话框1重命名为“提示对话框”。
3.设置组件属性
漫画图像：高度：80%，宽度：充满，图片：1.jpg
上一页按钮：文本：上一页，字号：20
下一页按钮：文本：下一页，字号20
Screen1：水平对齐：居中，App Name：漫画书，屏幕方向：锁定竖屏，屏幕标题：漫画书
提示对话框的属性按照默认设置即可。
活动3.逻辑设计
我们在组件设计界面中将App中需要的组件添加并完成重命名与属性设置后，这就万事俱备，只欠东风了。要想组件按照我们的逻辑来执行功能，必须通过程序块的方式来进行编程。单击右上方的“逻辑设计”按钮，切换到逻辑设计界面。本案例中的逻辑设计主要涉及到如下几个方面：
1.设置屏幕初始化


2.实现“翻到上一页”功能


3.实现“翻到下一页”功能


4.实现“退出”功能


活动4.测试调试




我的更多文章

下载客户端阅读体验更佳

APP专享