前端之Android入门

1、前端之Android入门(1):环境配置随着移动互联网的迅速发展，前端的概念已发生很大的变化，已不仅仅局限在网页端。而Android系统作为智能机市场的老大，作为前端开发工程师，非常有必要了解和学习。但面对众多学习资料，站在前端开发工程师的角色，怎样挑选出合适的路进行快速学习，而不必浪费大量时间去摸索，该系列文章希望能帮助到小伙伴们。文章会挑选几个实际的例子，贯穿在整个系列中，涉及到Java、Android、程序设计等多方面知识，力求让大家快速掌握。俗话说，工欲善其事，必先利其器，系列的第一篇就从Window系统下Android的环境搭建说起。Lets Go!Step1：JDK的安装和Java

2、环境变量的设置JDK下载地址：JDK（Java Development Kit）是整个Java的核心，包括一系列Java开发的东西，安装完毕需要配置一下环境变量。1）JAVA_HOMEJDK的安装路径，这个环境变量本身不存在，需要创建，创建完则可以利用%JAVA_HOME%作为统一引用路径，其值为：jdk在你电脑上的安装路径2）PATHPATH属性已存在，可直接编辑。作用是用于配置路径，简化命令的输入，其值为：%JAVA_HOME%bin3）CLASSPATH用于编译时JAVA类的路径，注意这里设置的是两个值，（.;）表示的是JVM先搜索当前目录。其值为：.;%JAVA_HOME%libtoo

3、ls.jar配置完毕后，通过cmd运行以下命令：java -version，javac 如果出现返回信息，则设置成功Step2：安装EclipseEclipse下载地址：/downloads/ （选择Eclipse Standard版本即可）Eclipse为Java及Android开发的IDE。Eclipse不需要安装，把解压包解压后，剪切eclipse文件夹到你想安装的地方，打开时设置你的工作目录即可。Step3：安装Android SDKAndroid SDK下载地址：Andorid SDK为Android管理开发包工具，提供了Android各级平

4、台的开发包和工具。注意，因为我们是独立安装，不是一体化（集成系列工具）所以需要单独下载SDK。（如图）运行安装文件，并把安装目录下tools文件夹路径设置进PATH环境变量去到安装目录运行SDK Manager，一开始什么平台和工具也没有，需要下载回来。公司内网的话需要使用代理来下载。到 Tools -> Options 把代理填上，点击 Close 后则会出现众多平台列表，把Android Tools 选上安装，另外建议把2.2以上的全部下载安装。step4：安装配置ADTADT是Eclipse的插件，用于管理开发Android1）安装ADT启动Eclipse，点击 Help菜单 -&

5、gt; Install New Software ，点击 Add ，输入地址：http:/dl-选取要安装的项，一路Next完成安装并重启。这样ADT就安装完毕了。2）配置ADT选择 Window -> Preferences ，在弹出面板中就会看到Android设置项，填上安装的SDK路径，则会出现刚才在SDK中安装的各平台包，按OK则完成配置。此时Android的环境就搭建完毕，可以进行Android项目的开发了。Step5：创建第一个Android项目1）选择 File -> New -> Other -> Android -> Android Applic

6、ation Project2）输入项目所需信息· Application Name （应用的名称）· Project Name （在Eclipse中该项目的名称）· Package Name （存放Java类的包名称，其实质是存放的文件夹路径，.号为文件分隔符，我们编写的Java文件都会放在项目的src目录下，如com.tencent.helloworld表示类放在src/com/tencent/helloworld文件夹中）3）一路Next直到Finish，则我们的工程创建完毕。4）由于程序是运行在模拟器上的，我们还没有创建一个模拟器，所以需创建一个，创建完点关

7、闭则可。5）点击 三角型 run按钮，然后选择刚才创建的模拟器，则程序开始运行。小提示：启动模拟器会比较慢，所以，当程序作出修改，需要再次运行时，不要关闭掉模拟器，直接按模拟器上的Home或返回键退出app，之后再按run，则可重新跑起。结束：恭喜你！你的Android环境已经搭建成功，在下一篇文章中，会介绍Android项目中的目录结构，及开发界面时的适配问题，敬请期待！感谢你的阅读，本文由 腾讯ISUX 版权所有，转载时请注明出处，违者必究，谢谢你的合作。注明出处格式：腾讯ISUX (2):程序目录及UI简介在这次的文章中，将会介绍Android程序的目录结构以及UI知识，为下一篇实际例子

8、的编写打下基础。由于文章篇幅有限，所以本着先浅后深的思路，从简单介绍入手，然后在往后实际例子编写中再深入扩展学习各个知识点，希望使学习曲线更加平滑。正如和我们编写网页项目时一样，通常会建立html、css、js等目录区分不同内容，Android程序也有其固定的目录结构。和Html与Css的关系一样，Android也是通过一系列属性控制视图元素的视觉呈现。对于这个概念，各位前端小伙伴应该非常容易理解。那它们之间有什么区别呢？事不宜迟，让我们赶快进入这次学习，Lets Go!一，Android程序的目录结构打开我们上次创建的HelloWorld项目，会看到一个目录结构，这就是Android的程序目

9、录，这些目录的大致作用如下：· src：源码的组织管理目录。· gen：自动生成的目录，会生成一些重要的文件，如R.java，该目录一般不需要我们编写。· assets：该目录文件不会被编译成二进制编码，多用于放音视频，文本等原始格式文件。· bin：用于存放编译后的Java文件及apk文件。· libs：存放Android的源码包或需要引入的源码包。· res：程序资源的所在目录，包括图片，数值等各类资源。· AndroidManifest.xml：程序配置文件，它向系统描述了程序的信息。这里先介绍我们常用到的目录：1）s

10、rc目录打开项目的src目录，会立即明白，原来 com.tencent.helloworld 的”.”号相当于路径分隔符，Java就是通过此方式管理存放不同文件，也就是Java的包机制，现在只需知道此概念即可。 2）res目录该目录用于存放Android程序的各类资源，非常重要，用于管理资源和Android UI的适配，在后面的例子中将会逐步使用到。其中主要包含下列目录： drawable-xxx用于存放位图（Bitmap files）（.png，.9.png，.jpg，.gif）或者状态列表（State lists），动画（Animation drawables），图形（Shapes）等绘制

11、性资源的xml文件。相当于网页中的图片资源。其中-xxx用于适配不同像素密度的屏幕。这里先不作展开。layout该目录的xml文件用于描述一个Android UI界面（Activity）或一个系统桌面组件（AppWidget）的界面结构。相当于网页的Html结构。menu该目录下的main.xml文件用于定义Android底部的弹出菜单结构。values-xxx用于存放定义各种：字符值，颜色值，数值，样式等的xml文件，例如dimens.xml用于定义各尺寸值，strings.xml用于定义文字，colors.xml用于定义各颜色值，其中最为最重要的styles.xml用于定义View元素的视

12、觉样式（相当与网页的Css）。-xxx作用也是用于Android的适配，这里也先不作展开。AndroidManifest.xml文件每个Android应用程序都有一个AndroidManifest.xml文件在根目录，该文件用于向系统提供一些程序运行前需要提供的信息。该文件主要包含以下信息：· 命名该应用的Java包名，包名将作为应用的唯一标识。· 描述应用的构成，包括Activity，Services等。· 声明应用所必须具备的权限，用以访问受保护部分的API。· 声明应用运行时需要的环境配置信息。· 声明应用所需的系统Android API

13、的最低版本级别。· 列举应用所需要链接的库。二，Android的UI简介从Html角度出发，一个网页界面，通常由Div元素完成结构布局，Img，Input，Button等元素完成界面构建。Android的界面构建思想也如此，在Android的UI世界中，所有UI元素均由View类继承而来，然后衍生出用于布局的元素如：FrameLayout，LinearLayout，RelativeLayout，TableLayout等，用于界面呈现的组件元素如：TextView，EditText，ImageView，VideoView等。只是View元素及其子元素有严格的继承体系，这点和Html不同

14、。下图展示了Android中的View元素体系：和Css控制Html的视觉呈现一样，Android也是通过各属性控制View元素的视觉呈现，我们先来看看熟悉的Html和Css关系：聪明的小伙伴一定会问，Css中的属性只有平级关系，为什么会区分开呢？没错，上图简单模拟了Android中“Css”的层级关系。在Android中，各属性是有严格区分和有其自身的继承体系。所以这里有一个很重要的概念：在Android中，是由两类属性控制View类的视觉呈现。一类是Viwe类自身的属性，如背景、透明度、内空白等；一类是布局属性、如长度、宽度，边距、位置等。下图展示了它们之间的关系：在这里我们需要明白3个概

15、念：1，View类的自身属性，是可以继承的，例如Android中，View类有id、alpha、padding等属性，而TextView继承自View，所以TextView除了可以设置自身的属性textColor外，还可以设置id，alpha等。所以我们可以这样设置一个TextView的呈现：2，处在什么布局元素内，该布局元素内的视图就可以使用什么布局属性。例如TextView若处在LinearLayout内，则可以使用LinearLayout.LayoutParams定义的布局属性，如：3，布局属性也是可以继承使用的，例如LinearLayout.LayoutParams继承自ViewGro

16、up.MarginLayoutParams，ViewGroup.MarginLayoutParams则继承自ViewGroup.LayoutParams，最终可以像如下设置：所以，通常在一个的界面中，布局属性的使用就像下图所示一样：结束：在这次的文章中，简要介绍了一下程序目录。也对Android UI的概念作了总体介绍，理清UI属性的关系，对我们后面的编程，特别是用程序代码生成视图和设置属性都尤为重要。在下一篇文章中，我们将实际完成一个界面的制作，并借例子深入到Android UI的知识点中。希望这次的文章能给小伙伴们在Android学习之路上带来帮助。 感谢你的阅读，本文由 腾讯ISUX 版

17、权所有，转载时请注明出处，违者必究，谢谢你的合作。注明出处格式：腾讯ISUX (3):MVC模式(上)很多Android的入门书籍，在前面介绍完布局后就会逐个介绍组件，然后开始编写组件使用的例子。每每到此时小伙伴们都可能会有些疑问：是否应该先啃完一本Java编程思想学点 Java 知识呢？这些组件会使用了，但如何更好组织起来呢？其实，Android 和 iOS 已经把应用层级别的东西封装得比较简单易用，也配有丰富的文档与之对应，所以倒不必担心如何使用。而实际上，我想让大家通过这个系列的文章更关注和学习下面两点，我也会在例子的选取上多涉及这些方面的知识。· 编程的思想。正如学会英语，并

18、不一定就能写出好的英文文章。· 查找学习的能力。知道如何发现问题的关键点，然后去找方法解决。MVC 是软件工程中最基本的设计模式，也是组织良好代码的基础，Android 和 iOS 中也一样，所以在接下来的三篇文章中，将会介绍如何通过 MVC 模式制作一个简易计算器应用，Lets Go!这个高大上（偷笑）的计算器界面如下，这次先完成界面部分。一，界面还原准备首先，打开 Eclipse，创建一个 Android 工程，并命名为：Calculator（如下图）此时，会默认打开 MainActivity.java 和 activity_main.xml 两个文件，activity_main

19、.xml 为界面布局文件，MainActivity.java 为程序入口文件（这次先不用编写）。同时，我们将 res > values > styles.xml 文件打开，activity_main.xml 和 styles.xml 之间的关系就相当于 html 和 css。我们知道，Android 中有 LinearLayout，RelativeLayout 等布局元素，这次我们就先用 LinearLayout 来完成界面的布局。:) 首先等我请出本系列课程的助教：Google 大神LinearLayout（线性布局），大神给出的定义是：将子视图元素按水平或垂直方向一个接一个排列

20、的视图组合（布局）。从上一篇文章中我们知道 View 类由两类属性控制其视觉呈现，所以 LinearLayout 有其自有属性，而处于其内的子元素则可以使用 LinearLayout.LayoutParams 定义的属性，那怎样去找这些属性呢？当然是去问我们的大神了。LinearLayout 类参考从 Summary 的 XML Attributes 中可以知道这些属性的信息概要，点击每个属性，下面都有详细的介绍。几个常用属性：1，android:orientation 通过设置值为 “horizontal” 或 “vertical” 让子元素按水平或垂直排列。2，android:gravit

21、y 设置其内容（文字、视图）在该元素内的位置，通过 “|” 号分隔多个值（top，bottom，left，right，center，center_vertical，center_horizontal）。3，android:baselineAligned 设置为”false”则统一对齐的基线，主要用于设置了不同 gravity 的可显示文字的 View 元素。这里先不展开。那 LinearLayout.LayoutParams 有什么属性呢，同样我们从大神那找到：LinearLayout.LayoutParams 类参考从上篇文章可知 xxx.LayoutParams 定义的属性是用于布局内的元

22、素上的。1，android:layout_gravity 让子元素设置其相对于父元素中的位置，其设值和 android:gravity 一样。可能有人就会疑问了，那这两个属性有什么区别呢？简单点理解，android:gravity 是应用于自身所包含的内容（这个内容可以是文字或子视图），而 android:layout_gravity 则是应用在自身。（这里还要指出一个大家在线性布局中可能会遇到的问题：android:layout_gravity 设值失效问题。例如在设定了 android:orientation = “vertical” 的 LinearLayout 中，设定一个 TextV

23、iew 的 layout_grivity = “top” 或者 layout_grivity = “bottom” 是失效的。同样，在 android:orientation = “horizontal” 中设定元素的 “left” 或 “right” 也会一样。为什么会这样呢？就留给小伙伴们思考了，其实想想这样设定还算是合理的。）2，android:layout_weight 大神也有偷懒的时候，这里竟然没有说明。大神把它放在另一个地方介绍了。性质类似 Css 的弹性盒，对 -webkit-flex 设值，相当于显示权重。情况会很多，篇幅问题只能留在以后的文章加以说明。这次界面制作使用 la

24、yout_weight 的策略是：每个元素都占用“足够大的空间”，然后各自权重为1，这样一来就平均了。请小伙伴们再看一次线性布局的介绍， LinearLayout 线性布局在准备部分，我没有直接列出所有属性来介绍。而是更想展示如何去思考和查找解决办法的过程。对于文章没展开部分，可以去查一查，培养阅读文档的习惯 :)二，界面的制作前面废话多了， 既然用线性布局，界面就直接用一个 TextView + 4个LinearLayout 垂直排列做布局。如下图：正如把 css 写在 html 中是“下流”的写法，那么我们应该“上流”点，把样式分离写在 styles.xml 中，activity_main

25、.xml 中则通过style/ClassName 的方式留下我们锚点则可。这里，Eclipse 会提示xml 中存在若干错误，因为我们还没在 styles.xml 中建立相应的资源名，不用理会。也会提示了一个修改建议，说把字符硬编码进TextView了，也可不理。此时转到 styles.xml 中，建立起相应的“类名”，（注意：这里先把 AppTheme 设置为：android:Theme.NoTitleBar ）建立完“类名”后，我们就可以编写<body>的样式了，这里设置为垂直排列。我们还将建立一个资源文件，用于设定颜色值，就如同 strings.xml 的作用一样。这里先把我

26、们会用到的颜色值都设定了，包括按钮和文字的颜色。继续编写我们的 styles.xml 文件，通过 layout_weight 的设定，我们将 TextView 和 4个 LinearLayout 平分屏幕的空间。并且为我们的 TextView 添加相应的样式，而准备用于放置按钮的 LinearLayout 则设定为水平排列：此时转到 activity_main.xml 并在 xml 编辑框底部点选 Graphical Layout 这个tab，可以预览还原了的界面。和我们预想一样，TextView 占了空间的1/5。好了，可以开始编写我们的按钮了，我们将用 Button 元素实现按钮，用 bt

27、n_operand 命名操作数的样式，用 btn_operate 命名操作符的样式，并且 btn_operate 将会继承 btn_operand 的样式，然后重新设置背景色和文字色，这些就和使用 Css 一样。预览一下界面。和我们设想的一样。剩下的就交由小伙伴继续完成啦 :) 在小伙伴们尝试制作界面的时间，我会尽快准备好下一篇文章，大家有什么意见都可以留言给我。另外，鉴于个人能力有限，在文章中未免会出现错误，欢迎大家的指正，感谢大家的支持！时间原因，没能及时回复的留言也先说声对不起！后话：下一篇文章开始将会涉及 Java 代码，有条件的同学请备一本Java编程思想，机械工业出版社的，网上应该

28、有很多 pdf ，当然不会让你啃了它，太浪费时间。因为在编写代码的过程中，或多或少会涉及 Java 的东西，我会指出需要看的那部分，从而把基础的 Java 知识学了。另外，应小伙伴们的要求，我会找地方提供编写的代码下载。题外话，Java编程思想的确是本好书，作为参考或者学习也好，可以考虑备一本。 感谢你的阅读，本文由 腾讯ISUX 版权所有，转载时请注明出处，违者必究，谢谢你的合作。注明出处格式：腾讯ISUX (4):MVC模式(中)MVC 模式的最基本概念是分层设计，把我们的代码基于 View（视图）、Model（模型）、Controller（控制器）进行分类封装，这样做的目的是为了清晰结构

29、，使代码更易维护和扩展。在上一篇文章中，我们完成了计算器的界面还原，但严格来说并不是真正的 View 类，因为它还没反映视图的逻辑。在这次文章中，我们将编写计算器程序的 View 部分，Lets Go!（注意：这次在代码的注释中写了较多的点，所以可以多看注释部分）一，初识 ActivityActivity（活动）作为 Android 四大组件之一，相当于应用中的整个界面，用前端的角度看，就像一个 web 页。而 Activity 的实质是什么呢？这次先简要描述，从 Google 大神中可知，Activity 起始继承于 Context 类，来看看它们的描述关键词：android.content

30、.ContextInterface 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.ActivityAn activity is a single, focus

31、ed 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，

32、drawable，id，layout 等静态内部类，记录了所有标识。（注意：R类的标识会自动生成，不用去修改） 二，在 onCreate 中编写我们的程序Activity 有个明显的特点，就是有生命周期。可以想象一下平时应用的使用过程，从一个界面滑入至另一界面，又从当前界面返回，伴随的就是 Activity 周期的不同阶段。打开 Calculator 项目的 MainActivity.java 文件：在前端编程中，最重要的是获取操作对象（dom）。在 Android 中也如此，主要通过 id 标识获取操作对象。我们首先给activity_main.xml 中的 TextView 和 Butto

33、n 加上以下 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/Operat

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

35、命名（如上面提示的）。这样我们则可以：这样，通过一个 TextView 和两个数组，我们就把需要的操作元素全部收集好了。三，分离及定义 View 类的接口从上面的代码看，一切似乎都很美好，但这种面向过程的思考方式是导致代码迅速膨胀，难以维护的原因之一。按 MVC 的设计思想，上面编写的代码应属于视图部分的逻辑，更好的办法应该封装在视图内，实现细节不被其它类所知。我们现在遵循这一思想从新组织一下代码：（注意：这里只朴素地用 MVC 思想表达意图，至于划分及编写的合理性就不探究了）计算器将由两个 View 类组成，一个是用于显示结果的 CaOutputView 类，一个是用于用户输入的 CaInp

36、utView 类。首先建立存放 View 类的包，通过包区分不同类型文件。然后我们建立这两个 View 类： 接着，我们打开 CaInputView.java 文件。好了，现在我们来思考一个问题，CaInputView 负责与用户的交互，自然会知道用户按了什么按钮，但怎样通知 Activity 用户的行为呢？ 这个就是我们准备要接触的回调机制的概念。就好比，CaInputView 对 Activity 说：你把“联系方式”留我，用户输入了我就通知你。而“联系方式”有多种实现的方式。这次就通过委托的方式实现，相当于 iOS 中的代理（delegate）的概念：四，编写 View 类现在我们继续编

37、写 CaInputView类，把原先 Activity 类的代码逻辑归入 CaInputView 类：继续编写 CaOutputView 类，CaOutputView 类比较简单，只用于显示：五，在 Activity 中使用 View 类两个 View 已经创建完毕，现在可以尝试在 Activity 中使用了：上图提示错误，是因为实例化了 CaInputView，却没有实现接口，所以提示 MainActivity 应该实现 CaInputView 声明的接口：实现 CaInputView 声明的接口后仍然会报错，因为没实现接口声明的方法，选择“Add unimplemented methods

38、”则自动添加了方法，如下图：最后当 CaInputView 与用户发生交互时，我们“通知” Activity，而 Activity 则调用 CaOutputView 将结果显示出来，MainActivity 类的最终代码如下图：运行程序，点击每个按钮，看是否显示正确的值：通过分层设计，MainActivity 中的代码变得简洁很多，它只需知道如何使用 View 类则可，使它可以专注于自己的责任部分。六，总结这次说了的点比较多，主要有：· MVC 的设计概念· 两种方式获取操作对象· Java 的类型及转型相关概念· 回调机制及接口· 如何使用

39、View 类如果对这些点还不清晰，可以再细看注释部分，或者留言给我，我会尽快答复。另外我也会尽量加快更新进度，下周将利用递归函数编写我们的 Model 类，敬请期待。 感谢你的阅读，本文由 腾讯ISUX 版权所有，转载时请注明出处，违者必究，谢谢你的合作。注明出处格式：腾讯ISUX (5):MVC模式(下)在上一篇文章中，我们将 View 类单独出来并完成了设计和编写。这次我们将完成 Model 类，并通过 Controller 将两者连接起来，完成这个计算器程序。模型（Model）就是程序中封装了数据，并定义了操作和处理这些数据的逻辑的对象。在计算器的例子中，就是处理输入的操作数和运算符，并

40、计算返回结果。Lets Go（注意：示例中直接使用 double 类型来处理数据，但严格来说很多语言的浮点数计算都是不精确的）一，设计模型的接口在程序构建之初，我们首先考虑的应该是各模块间的封装和扩展，设计好模块的接口，然后再实现模块的细节，最后把模块组合起来构成整个程序。这就是面向接口编程的概念。思考一下 Model 类，它主要实现三个功能，1，接受操作数输入；2，接受运算符输入并返回计算结果；3，重置。这些功能主要都是被外部使用的，所以基于此来设计接口，对其它类而言，只需知道该接口定义了什么方法然后使用就行，而不需要了解实现细节。创建 erfaces 包，并右键选择 New -> Interface 创建一个名为 ICalculator 的接口（一般接口命名都以大写字母 I 开头）创建 com.test.model 包，并创建 CalModel 类，同时实现 ICalculator 接口。二，通过栈和递归函数实现计算器算法计算器的计算规则很简单，从左到右计算，不考虑运算符的优先级，例如：2 + 1 * 2 3，相当于: (2 + 1) * 2) 3) = 3；这样保证编写的简易性。我们知道，栈是一种后进先出的数据结构，我们通过一个栈 dat