前端之Android入门(4):MVC模式(中)

ct

MVC 模式的最基本概念是分层设计,把我们的代码基于 View(视图)、Model(模型)、Controller(控制器)进行分类封装,这样做的目的是为了清晰结构,使代码更易维护和扩展。

在上一篇文章中,我们完成了计算器的界面还原,但严格来说并不是真正的 View 类,因为它还没反映视图的逻辑。在这次文章中,我们将编写计算器程序的 View 部分,Let’s Go!
(注意:这次在代码的注释中写了较多的点,所以可以多看注释部分)

一,初识 Activity

Activity(活动)作为 Android 四大组件之一,相当于应用中的整个界面,用前端的角度看,就像一个 web 页。而 Activity 的实质是什么呢?这次先简要描述,从 Google 大神中可知,Activity 起始继承于 Context 类,来看看它们的描述关键词:

android.content.Context

Interface to global information about an application environment … It allows access to application-specific resources and classes, as well as up-calls for application-level operation …
原来 Context 被定义为关于应用场景(上下文)的抽象类,具有访问应用层面资源和类的权限,并封装了一些应用级别的方法。

android.app.Activity

An activity is a single, focused thing that the user can do … interact with the user … takes care of creating a window (full-screen windows or floating windows) for place UI …
Activity 被定义为与用户交互(事件),负责创建加载视图的窗口等功能的功能类。可以说因 Context,使 Activity 具有强大的功能。

在开始编写前,先介绍一个重要的 Java 文件 - R.java,在前面介绍过,gen 目录会自动生成一些系统需要的文件,打开 R.java:

android_4_r

R 类通过 attr,color,drawable,id,layout 等静态内部类,记录了所有标识。
(注意:R类的标识会自动生成,不用去修改)

 二,在 onCreate 中编写我们的程序

Activity 有个明显的特点,就是有生命周期。可以想象一下平时应用的使用过程,从一个界面滑入至另一界面,又从当前界面返回,伴随的就是 Activity 周期的不同阶段。打开 Calculator 项目的 MainActivity.java 文件:

android_4_activity

在前端编程中,最重要的是获取操作对象(dom)。在 Android 中也如此,主要通过 id 标识获取操作对象。我们首先给activity_main.xml 中的 TextView 和 Button 加上以下 id 标识:
(@+id/{name} 的意思是在 R 类中增加为 {name} 的 id 标识)

  • TextView:@+id/ResultOutput
  • Button 数字 0 ~ 9:@+id/Operand0 ~  @+id/Operand9
  • Button 除号:@+id/Operate0
  • Button 乘号:@+id/Operate1
  • Button 减号:@+id/Operate2
  • Button 加号:@+id/Operate3
  • Button 等号:@+id/Operate4
  • Button 清除:@+id/Operate5

如图所示,请务必为元素加上正确的 id

android_4_ids

在 Android 中,主要通过 findViewById() 方法获取操作对象,如TextView的获取:

android_4_find

在前端编程中,我们可以通过 getElementsByTagName() 方法获取一系列操作元素,但在 Android 中却没那么幸运了,没有这种方法。那有什么快捷点的方式不?答案是肯定的。我们知道 findViewById() 传入的是一个 int 类型的引用值,那么可否通过循环的方式找出这些引用值,然后直接获取呢?我们把 Button 元素分为两组,操作数的 id 以 Operand0 ~ 9 命名。而其余为运算符,则以 Operate0 ~ 5 命名(如上面提示的)。这样我们则可以:

android_4_reflect

这样,通过一个 TextView 和两个数组,我们就把需要的操作元素全部收集好了。

android_4_all

三,分离及定义 View 类的接口

从上面的代码看,一切似乎都很美好,但这种面向过程的思考方式是导致代码迅速膨胀,难以维护的原因之一。按 MVC 的设计思想,上面编写的代码应属于视图部分的逻辑,更好的办法应该封装在视图内,实现细节不被其它类所知。我们现在遵循这一思想从新组织一下代码:
(注意:这里只朴素地用 MVC 思想表达意图,至于划分及编写的合理性就不探究了)

计算器将由两个 View 类组成,一个是用于显示结果的 CaOutputView 类,一个是用于用户输入的 CaInputView 类。首先建立存放 View 类的包,通过包区分不同类型文件。

android_4_pkg

android_4_pkg2

然后我们建立这两个 View 类:

android_4_views

 

android_4_views2

接着,我们打开 CaInputView.java 文件。好了,现在我们来思考一个问题,CaInputView 负责与用户的交互,自然会知道用户按了什么按钮,但怎样通知 Activity 用户的行为呢? 这个就是我们准备要接触的回调机制的概念。

就好比,CaInputView 对 Activity 说:你把“联系方式”留我,用户输入了我就通知你。而“联系方式”有多种实现的方式。这次就通过委托的方式实现,相当于 iOS 中的代理(delegate)的概念:

android_4_interface

四,编写 View 类

现在我们继续编写 CaInputView类,把原先 Activity 类的代码逻辑归入 CaInputView 类:

android_4_input

继续编写 CaOutputView 类,CaOutputView 类比较简单,只用于显示:

android_4_outputview

五,在 Activity 中使用 View 类

两个 View 已经创建完毕,现在可以尝试在 Activity 中使用了:

android_4_controller1

上图提示错误,是因为实例化了 CaInputView,却没有实现接口,所以提示 MainActivity 应该实现 CaInputView 声明的接口:

android_4_controller2

实现 CaInputView 声明的接口后仍然会报错,因为没实现接口声明的方法,选择“Add unimplemented methods”则自动添加了方法,如下图:

android_4_controller3

最后当 CaInputView 与用户发生交互时,我们“通知” Activity,而 Activity 则调用 CaOutputView 将结果显示出来,MainActivity 类的最终代码如下图:

android_4_controller4

运行程序,点击每个按钮,看是否显示正确的值:

android_4_controller5

通过分层设计,MainActivity 中的代码变得简洁很多,它只需知道如何使用 View 类则可,使它可以专注于自己的责任部分。

六,总结

这次说了的点比较多,主要有:

  • MVC 的设计概念
  • 两种方式获取操作对象
  • Java 的类型及转型相关概念
  • 回调机制及接口
  • 如何使用 View 类

如果对这些点还不清晰,可以再细看注释部分,或者留言给我,我会尽快答复。另外我也会尽量加快更新进度,下周将利用递归函数编写我们的 Model 类,敬请期待。

 

Tags: , , ,

ct
ct
魔摄计划:ISUX魔都摄影协会近期活动小结
上一遍
Photoshop CC 与前端那些事
下一遍
12,469
QQ空间 新浪微博 Facebook Google+

相关推荐

留下你的想法吧

  1. ihuobaby says:

    请问该代码用的是什么字体?很好看,有木有!!

  2. chun says:

    到ISUX取经来了,正好又学习了点android的JAVA开发。是不是以后的手机开发都会走HTML5界面布局。。反正了,我就走这条路开发,务实。。

  3. young says:

    千呼万唤始出来啊!作为刚开始学android开发的我,感觉到很荣幸能够一步一步跟着往下走

  4. young says:

    我想知道为什么我的IDE上 R.id.resultOutput 会报错??

  5. young says:

    我知道为什么我的ResultOutput会报错了,博主你的上篇写的是OutputText。。。

  6. itfanr says:

    写的很好啊!activity不算严格意义上的view吧 我原来还以为是view呢

  7. 这一节,稍复杂了一点,需要时间理解、学习!要去补点 Java 知识。不过,注释很详尽,ct 辛苦了!

  8. Jin says:

    浅显易懂,写得非常好!这里我理解了callback的实现,但是你能不能再详细地解释一下在在什么时候要用回调,为什么更有利于代码的维护吗?谢谢

  9. 金木 says:

    Monaco这种字体只有mac上有?windows 7下没找见!!!

  10. 金木 says:

    已经下载使用了,挺好的。

  11. Leo says:

    不错啊,认真学习完了,打算前端转做安卓,可以接触很多新东西,不错。支持!

  12. 金木 says:

    求推荐一本关于css的内容较新的书!!!

  13. Cavin says:

    请问,该节的java知识也是前端需要熟练的吗?

  14. 郑华坤 says:

    List operates 为什么用operates,而不是用operate。多了个 s 哦

  15. 郑华坤 says:

    在OnCreate中,for(int i =0; i<=9; i++),为什么i=0,不是i=1咩。

  16. Wenson says:

    迄今为止,看到的最好的android教程!!!怒赞~

  17. 王坤 says:

    说好的第五集呢?

  18. sunnyboy says:

    楼主好人!

  19. june says:

    一步步来的,为啥运行就停止运行