在上一篇文章中，我们将 View 类单独出来并完成了设计和编写。这次我们将完成 Model 类，并通过 Controller 将两者连接起来，完成这个计算器程序。

模型（Model）就是程序中封装了数据，并定义了操作和处理这些数据的逻辑的对象。在计算器的例子中，就是处理输入的操作数和运算符，并计算返回结果。Let’s Go
（注意：示例中直接使用 double 类型来处理数据，但严格来说很多语言的浮点数计算都是不精确的）

一，设计模型的接口

在程序构建之初，我们首先考虑的应该是各模块间的封装和扩展，设计好模块的接口，然后再实现模块的细节，*后把模块组合起来构成整个程序。这就是面向接口编程的概念。

思考一下 Model 类，它主要实现三个功能，1，接受操作数输入；2，接受运算符输入并返回计算结果；3，重置。这些功能主要都是被外部使用的，所以基于此来设计接口，对其它类而言，只需知道该接口定义了什么方法然后使用就行，而不需要了解实现细节。

创建 com.test.interfaces 包，并右键选择 New -> Interface 创建一个名为 ICalculator 的接口（一般接口命名都以大写字母 I 开头）

创建 com.test.model 包，并创建 CalModel 类，同时实现 ICalculator 接口。

二，通过栈和递归函数实现计算器算法

计算器的计算规则很简单，从左到右计算，不考虑运算符的优先级，例如：2 + 1 * 2 – 3，相当于: (((2 + 1) * 2) – 3) = 3；这样保证编写的简易性。

我们知道，栈是一种后进先出的数据结构，我们通过一个栈 dataStack 记录输入的运算数和操作符。如图所示：

所谓的递归函数，就是接受有限的自然数，通过重复调用自身，*终得到一个自然数结果的函数。算法的核心就是设计这样一个递归函数 popOpOffStack 来对 dataStack 进行求解，过程如图：

三，编写程序

按上面的思路，popOpOffStack 可以单独写出，并不需要实例化后才能使用，所以将 popOpOffStack 设为 CalModel 的静态方法则可，如图：

完成编写后，可以构建一个栈来测试一下，因为返回的是 double 类型，所以结果是 3.0，如图：

核心算法完成后，完成对运算数和操作符的输入的处理并补充其它细节。这样我们的 CalModel 就完成了。

四，通过Controller将Model和View连接

在 Android 的文档中，Activity 是被推荐作为 Controller 的角色，负责视图和模型的协调、沟通。而从 Activity 所拥有的功能的角度看，也是*合适的选择。至此，代码结构也清晰了。MainActivity 将作为 Controller 协调视图和模型，并对一些数据及细节进行处理。其代码如下：

通过 MainActivity 将模型和视图连接起来后，我们的计算器也*终完成了。可以运行测试一下。

五，结束及回答

本次要点：
1）通过 MVC 设计，使计算器程序有了较好的扩展和维护能力，假如使用另一种计算器算法，只需创建另一实现 ICalculator 接口的 Model 类，并代替原来的 CalMode 则可。当需要增加功能时，可以将代码增加到对应的模块处而不用随意写在一起。

2）这次只介绍了*基本的 MVC 知识，而至于 MVC 模式更高级的使用以及模块间的通信会在后面再讲。从代码的编写中，大家可能会发现 MainActivity 其实很难进行抽象，因为都是一些连接的逻辑和细碎代码。这也就是为什么 MVC 概念提出这么久以来，Model 和 View 的封装技术有了长足进步，而 Controller 却没什么突破的原因之一。作为前端，这方面大家可以对比一下现时流行起来的 MVC 库，对 Controller 角色的处理。而苹果在 Cocoa 中对 Controller 的封装也是很有特色，有机会会介绍对比一下。

3）例子中的细节处理还可以处理得更好，就留给大家修改。另外，有时间的话可以尝试使用经典的双栈算法来实现这个计算器，替换 CalModel 类。

在上几篇文章中大家提到的問题在这里总结回答一下：
1）什么时候用回调和 MVC 的设计为什么可以提高维护和扩展性：对于前者，当我们设计一个模块时，模块除提供方法外，自身发生的事是需要被外界了解时，或外界对这个模块发生的事是“渴望”得知的，这个时候就需要进行回调处理了。对于后者，在这次的文章中讲得比也较清晰了。

2）创建工程时，为什么会多出一些 support-v4、 support-v7 等这些包，这是 Android 的一些高级 API 或组件为在低版本中向下兼容实现而自动加载到工程中的，对自身程序并没有什么影响。

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：

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

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

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

在前端编程中，*重要的是获取操作对象（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 中，主要通过 findViewById() 方法获取操作对象，如TextView的获取：

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

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

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

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

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

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

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

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

四，编写 View 类

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

继续编写 CaOutputView 类，CaOutputView 类比较简单，只用于显示：

五，在 Activity 中使用 View 类

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

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

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

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

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

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

六，总结

这次说了的点比较多，主要有：

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

很多Android的入门书籍，在前面介绍完布局后就会逐个介绍组件，然后开始编写组件使用的例子。每每到此时小伙伴们都可能会有些疑问：是否应该先啃完一本《Java编程思想》学点 Java 知识呢？这些组件会使用了，但如何更好组织起来呢？

其实，Android 和 iOS 已经把应用层级别的东西封装得比较简单易用，也配有丰富的文档与之对应，所以倒不必担心如何使用。而实际上，我想让大家通过这个系列的文章更关注和学习下面两点，我也会在例子的选取上多涉及这些方面的知识。

• 编程的思想。正如学会英语，并不一定就能写出好的英文文章。
• 查找学习的能力。知道如何发现问题的关键点，然后去找方法解决。

MVC 是软件工程中*基本的设计模式，也是组织良好代码的基础，Android 和 iOS 中也一样，所以在接下来的三篇文章中，将会介绍如何通过 MVC 模式制作一个简易计算器应用，Let’s Go!

这个高大上（偷笑）的计算器界面如下，这次先完成界面部分。

一，界面还原准备

首先，打开 Eclipse，创建一个 Android 工程，并命名为：Calculator（如下图）

此时，会默认打开 MainActivity.java 和 activity_main.xml 两个文件，activity_main.xml 为界面布局文件，MainActivity.java 为程序入口文件（这次先不用编写）。
同时，我们将 res > values > styles.xml 文件打开，activity_main.xml 和 styles.xml 之间的关系就相当于 html 和 css。

我们知道，Android 中有 LinearLayout，RelativeLayout 等布局元素，这次我们就先用 LinearLayout 来完成界面的布局。

🙂 首先等我请出本系列课程的助教：Google 大神

LinearLayout（线性布局），大神给出的定义是：
将子视图元素按水平或垂直方向一个接一个排列的视图组合（布局）。

从上一篇文章中我们知道 View 类由两类属性控制其视觉呈现，所以 LinearLayout 有其自有属性，而处于其内的子元素则可以使用 LinearLayout.LayoutParams 定义的属性，那怎样去找这些属性呢？当然是去问我们的大神了。

LinearLayout 类参考

从 Summary 的 XML Attributes 中可以知道这些属性的信息概要，点击每个属性，下面都有详细的介绍。

几个常用属性：
1，android:orientation  通过设置值为 “horizontal” 或 “vertical” 让子元素按水平或垂直排列。
2，android:gravity  设置其内容（文字、视图）在该元素内的位置，通过 “|” 号分隔多个值（top，bottom，left，right，center，center_vertical，center_horizontal）。
3，android:baselineAligned  设置为”false”则统一对齐的基线，主要用于设置了不同 gravity 的可显示文字的 View 元素。这里先不展开。

那 LinearLayout.LayoutParams 有什么属性呢，同样我们从大神那找到：

LinearLayout.LayoutParams 类参考

从上篇文章可知 xxx.LayoutParams 定义的属性是用于布局内的元素上的。

1，android:layout_gravity  让子元素设置其相对于父元素中的位置，其设值和 android:gravity 一样。可能有人就会疑问了，那这两个属性有什么区别呢？
简单点理解，android:gravity 是应用于自身所包含的内容（这个内容可以是文字或子视图），而 android:layout_gravity 则是应用在自身。

（这里还要指出一个大家在线性布局中可能会遇到的问题：android:layout_gravity 设值失效问题。例如在设定了 android:orientation = “vertical” 的 LinearLayout 中，设定一个 TextView 的 layout_grivity = “top” 或者 layout_grivity = “bottom” 是失效的。同样，在 android:orientation = “horizontal” 中设定元素的 “left” 或 “right” 也会一样。为什么会这样呢？就留给小伙伴们思考了，其实想想这样设定还算是合理的。）

2，android:layout_weight  大神也有偷懒的时候，这里竟然没有说明。大神把它放在另一个地方介绍了。性质类似 Css 的弹性盒，对 -webkit-flex 设值，相当于显示权重。情况会很多，篇幅问题只能留在以后的文章加以说明。这次界面制作使用 layout_weight 的策略是：每个元素都占用“足够大的空间”，然后各自权重为1，这样一来就平均了。

请小伙伴们再看一次线性布局的介绍，   LinearLayout 线性布局

在准备部分，我没有直接列出所有属性来介绍。而是更想展示如何去思考和查找解决办法的过程。对于文章没展开部分，可以去查一查，培养阅读文档的习惯 🙂

二，界面的制作

前面废话多了， 既然用线性布局，界面就直接用一个 TextView + 4个LinearLayout 垂直排列做布局。如下图：

正如把 css 写在 html 中是“下流”的写法，那么我们应该“上流”点，把样式分离写在 styles.xml 中，activity_main.xml 中则通过@style/{ClassName} 的方式留下我们锚点则可。
这里，Eclipse 会提示xml 中存在若干错误，因为我们还没在 styles.xml 中建立相应的资源名，不用理会。也会提示了一个修改建议，说把字符硬编码进TextView了，也可不理。

此时转到 styles.xml 中，建立起相应的“类名”，（注意：这里先把 AppTheme 设置为：android:Theme.NoTitleBar ）

建立完“类名”后，我们就可以编写<body>的样式了，这里设置为垂直排列。
我们还将建立一个资源文件，用于设定颜色值，就如同 strings.xml 的作用一样。

这里先把我们会用到的颜色值都设定了，包括按钮和文字的颜色。

继续编写我们的 styles.xml 文件，通过 layout_weight 的设定，我们将 TextView 和 4个 LinearLayout 平分屏幕的空间。并且为我们的 TextView 添加相应的样式，而准备用于放置按钮的 LinearLayout 则设定为水平排列：

此时转到 activity_main.xml 并在 xml 编辑框底部点选 Graphical Layout 这个tab，可以预览还原了的界面。和我们预想一样，TextView 占了空间的1/5。

好了，可以开始编写我们的按钮了，我们将用 Button 元素实现按钮，用 btn_operand 命名操作数的样式，用 btn_operate 命名操作符的样式，并且 btn_operate 将会继承 btn_operand 的样式，然后重新设置背景色和文字色，这些就和使用 Css 一样。

预览一下界面。和我们设想的一样。

剩下的就交由小伙伴继续完成啦 🙂  另外，鉴于个人能力有限，在文章中未免会出现错误，欢迎大家的指正，感谢大家！

后话：

下一篇文章开始将会涉及 Java 代码，有条件的同学请备一本《Java编程思想》，机械工业出版社的，网上应该有很多 pdf ，当然不会让你啃了它，太浪费时间。因为在编写代码的过程中，或多或少会涉及 Java 的东西，我会指出需要看的那部分，从而把基础的 Java 知识学了。另外，应小伙伴们的要求，我会找地方提供编写的代码下载。题外话，《Java编程思想》的确是本好书，作为参考或者学习也好，可以考虑备一本。