不积跬步无以至千里

解析天气预报数据界面布局完成以后，就需要设计代码来控制界面上各个元素的逻辑了。从网络获取天气预报数据；解析获取的数据；根据解析的结果更新天气预报界面；天气预报的数据依赖于网络端的服务器，不是手机端的应用开发者自己能决定的。假如应用和网络服务器是两拨人同时在开发，极有可能出现这样的情况：手机端需要获取数据的时候，服务器端还没有准备好。遇到这种情况该怎么办呢？我们可以自己构造一个假数据，模拟已经

天气指数列表的布局天气相关信息是通过列表方式呈现的。Android SDK提供的ListView控件就能实现这样功能。ListView需要和Adapter配合使用，ListView负责内容的显示，Adapter负责为ListView提供要展示的数据。要实现我们希望的展示效果，需要开发者自定义一个Adapter。那我们先看看ListView是怎么使用的。ListView的基本方法先在我们的工程项目中使

天气预报的布局现在我们开始进行天气预报区域的布局。可以看出，这个区域，由5个完全一样的组件组合而成。只要我们完成一个组件-天气预报项的布局，再把这个布局复制粘贴，很容易就完成了。天气预报项在layout目录上点击右键，选择New -> Layout resource file。输入布局文件的名字forcast_item，一个新的布局文件forcast_item.xml就被创建到了res\layout

天气详情的布局整体布局完成之后，我们开始进行天气详情区域的布局。这个区域由天气图标、当前温度、当日温度范围、地理位置等4个元素组成。我们可以选用Android SDK提供的现有控件，完成布局。 区域名称 区域尺寸 选用控件或布局 天气图标 96dp*144dp ImageView 当前温度 文字的字体56sp决定 TextView 当日温度范围 文字的字体2

界面的整体布局从这一章节开始，我们终于可以开始使用Android Studio写代码了。天气预报这个应用虽然功能很简单，但是对于从来没有接触过安卓开发的人来讲，开发完成还是需要很多步骤。为了减小学习的坡度，增加开发的阶段性成就感，我将天气预报分成2个阶段来开发，第1阶段：暂时不考虑Material Design的各种限制，比如Appbar的滑动效果，下拉刷新功能；用户点击左上角的刷新Refresh

资源的导入在前面讲解产品原型设计的章节中，我们已经创建出了各种开发时需要使用的各种图标了，包括应用图标、系统图标等等。图标导入现在，我们先把开发过程中要使用到的图片资源添加到Android Studio工程目录当中。将Sketch创建的静态高保真原型中的图标，根据导出的尺寸，将它们分类整理到对应的文件夹当中，打开天气预报所在的Android Studio的工程文件夹-app -> src ->

版本管理前面已经提到了，非常有必要对开发的代码进行管理。那么进行版本管理到底什么时候使用呢？我总结了使用版本管理的主要场景，有以下3种：对于个人开发者，版本管理能记录开发的变迁。它记录了所有文档的修改记录，就好比玩游戏时，我们都会时刻存档，就怕哪一次不小心，控制的角色挂了；假如不存档，出了问题，必须得从新开始。如果使用了版本管理，就可以随时保存文档修改的进度。一旦文档任何时候出现了问题，或者希望快

应用的创建与部署现在我们开始创建一个全新的项目工程-天气预报，并在编译后让它运行到真实的设备上。创建应用工程运行Android Studio，启动Android Studio，选择Start a new Android Projcet；在Application name栏，为应用取个名字为WeatherApp；在Company Domain栏，按照网址的形式填上anddle.com－－当然，你

开发环境搭建开发安卓应用可以在Window系统 MacOS系统 Linux系统上进行。但并不是说打开一个写字板就可以了，它还需要编译器等开发工具的配合。所以在正式开发之前，需要搭建开发的环境，我们需要给开发平台（Window系统 MacOS系统 Linux系统）安装上：JDK（Java Development kit）：Java开发工具包，因为安卓使用java开发，而且安卓应用开发的其它部分工具也

开发产品当开发者拿到设计师提供的原型（静态或者动态）和资源后，也并不是就可以开始写代码了。开发阶段通常还会包含以下几个部分：功能验证 -> 设计文档 -> 编写代码 -> 测试 -> 产品发布 -> 产品升级在整个开发的过程期间，还需要对各种文档、代码、资源进行管理，引入版本控制的概念。功能验证如果产品的功能很复杂，开发者在正式开始编码前，还得做一番功能的验证。也就是，在创意阶段确定功能点的那些验

资源的创建界面原型已经设计完成了。不过离最后交付给开发人员开发还差一步：产品中使用的图片还没有准备好呢？设计师除了产品原型还要交付哪些资源呢？开发者最关心的资源就是应用中会使用到的各种图标资源和配色方案。在天气预报应用当中，我们已经确定好了界面的主要颜色， 颜色项目 颜色名称 颜色RGB值 Primary Color Indigo 500 3F51B5 Primary Da

动态原型设计动态的可交互原型产品，是产品经理和界面设计师向开发人员阐释自己设计的最高效工具。开发者不需要猜测设计师要什么样的效果，照着原型产品做就好了。很多创业团队也发现了产品人的这个刚需，做出了诸如Principle、Axure这类著名的原型设计产品。Facebook似乎也深谙此道，专门为安卓和iOS系统开发很有针对性的交互原型设计工具-Origami Studio。这是一个免费的工具，而且也能和

静态原型的Appbar折叠接下来，我们开始设计Appbar被滑动收缩以后的界面效果。可以看到，这个效果图绝大部分和展开时的效果图时一样的。所以我们可以将整个画板修改一个名字为-展开，并复制出一个新的画板命名为折叠，修改一下其中的元素就好了。使用Symbol这样做完全没有问题，但是可能会给以后内容的修改留下一个隐患：假如我要把风力从3级修改为5级，除了要修改展开画板，还要修改折叠画板，要修改两个地方。

静态原型的更多天气信息天气的更多信息，是通过列表的形式展现的。参数设计列表项的高度在Material Design中，被定义成了48dp；并且整个list的顶部还有8dp的边距。列表项由3部分组成，

静态原型的天气预报未来5天的天气预报，可以看成由5个类似的天气模块构成，只要完成一个，其他几个就可以通过复制+修改内容实现改变。首先来明确一下各个组件的尺寸和参数，整个区域的大小，我设定成360dp*100dp；左右边距设置成16dp；这样一来，每日的天气模块就是（360-16-16）/ 5 = 65.6dp，我将它们设定成65dp宽；天气的图标的大小设定成30dp的正方形区域（注意，这些图

静态原型的Appbar我们设计的Appbar包括了两个部分，一个是toolbar，另一个就是flexible space-显示当日天气的详细信息，Toolbar参数确定添加Toolbar很简单，首先找到Material Design中对Appbar的描述可以知道，这是一个高度为56dp的矩形区域；当Appbar收缩时，应用的名字会显示出来，注意：这里显示的是中文-Dense类型的文字，所以文字的

静态原型的状态栏状态栏Symbol状态栏似乎很复杂，有wifi信号、手机信号、时间、电量等信息，幸好Sketch原生就自带的现成组件，你可以直接拿过来就用了。当然，你也可以自己一个一个去画，不过既然有了现成的轮子，又何必重复劳动呢。菜单栏中选择File -> New From Template，在弹出的菜单中选择Material Design。此时会创建一个新的工程文件。与之前空的工程文件不同的是，

Sketch静态原型设计对于静态原型的设计，我们使用Sketch。启动Sketch后，我们将看到类似如下的界面，工具栏它的顶部是工具栏，可以通过菜单栏View -> Customize Toolbar...来自定义工具栏。 在弹出的窗口中，将下方的图标拖拽到上方的工具栏中就可以了。导航栏左边是导航栏，用来展示这个项目拥有的page和page中包含的详细内容。page是一张张单独页面，每个页面上可

前期准备设计师首先在头脑中、草稿中勾勒出静态效果图，之后就需要收集制作时需要的各种素材、确定界面的配色方案。收集素材界面中需要使用各种天气图标：晴天、雨天、大雾、下雪、下雨、多云等等；还有天气信息中的风力、风向等等。我们可以使用Sketch工具进行完全的从无到有的自由创作，也可以适用现有的素材，减少设计的工作量。这里并不打算讲如何画出一个完美的图形，我想作为一名设计师，这点基本的艺术功底应该还是有的

原型设计通过前面几个章节，我们已经掌握了安卓系统Material Design设计的大致原则。接下来，我们开始尝试将这些原则和方式运用到实际的项目当中。效果图与交互原型产品原型的设计又可以分成两个阶段，高保真效果图：这是产品的静态效果图，图纸上的设计效果与最后实际产品基本上是一模一样。产品中使用到的各种图标都可以从高保真效果图中截取出来使用（这里其实指的是使用sketch进行界面原型设计，它可以从