恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
前端之Android入门(4):MVC模式(中)
0.0°
2014-12-23 原创文章 教程 原作者: 原作者 举报 3734 8 5 0

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

 

感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。
注明出处格式:腾讯ISUX (http://isux.tencent.com/learn-android-from-zero-session4.html)

更新:2014-12-23

收藏

8人已收藏

腾讯ISUX

It iS Ultramodern eXperience

  • 219

    作品

  • 1.9w

    粉丝

  • 4

    关注

  • 那些欲罢不能的实用工具
  • QQ亲密关系 | 从工具到情感再到认同
  • 与同为毕业生的你,说说我的故事
  • QQ红包 | 趣味新玩法是怎么设计的
相关标签
前端Android

    猜你喜欢

      2014-12-23 原创文章 教程 原作者: 原作者 举报 3734 8 5 0

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

      0.0°

      你确定要举报前端之Android入门(4):MVC模式(中)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年12月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      8
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录