前端之Android入门(4) – MVC模式(中)
前端之Android入门(4) – MVC模式(中)-移动阅读二维码

android-logo

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 类,敬请期待。

本文链接:http://www.mobileui.cn/learn-android-from-zero-session-4.html
本文标签: , ,