前端之Android入门(3):MVC模式(上)

时间 2019-12-01

标签前端 android 入门 mvc 模式栏目 Android 繁體版

原文原文链接

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

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

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

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

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

一，界面还原准备

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

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

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

:) 首先等我请出本系列课程的助教：Google 大神设计模式

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

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

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编程思想》的确是本好书，做为参考或者学习也好，能够考虑备一本。

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

前端之Android入门(1):环境配置

前端之Android入门(2):程序目录及UI简介