Caltrain Times 从设计到发布：移动应用程序开发案例

目录

• 工作流
• 测试
• 开发
• 优化
• 发布应用程序
• 延伸阅读

需求

用户水平

中级

需要的产品

• Flex（下载试用版）
• Flash Builder（下载试用版）

下载

• iTunes 上的 Caltrain Times
• Android Market 上的 Caltrain Times
• BlackBerry App World 上的 Caltrain Times
• Amazon App Store 上的 Caltrain Times
• 源文件

能否构建可适用于具有差别巨大的规格、屏幕分辨率和物理屏幕尺寸的不同设备的应用程序？我们将问题范围缩小一点，“能否构建在针对 Android、iOS 和 BlackBerry Tablet OS 的智能电话和平板电脑上具有出色外观的应用程序？”换句话说，高质量多屏幕移动应用程序就是我们希望构建的。

Caltrain Times 就是这样一个应用程序（参见图 1）。什么是 Caltrain Times？Caltrain Times 应用程序是加利福尼亚州 Caltrain 计算机铁路系统的一个火车时刻表查看器。Caltrain 提供了一个沿 San Francisco Peninsula，通过 South Bay 一直到 San Jose 和 Gilroy 的计算机铁路服务。

本文探讨我如何开发 Caltrain Times 应用程序，一个具有出色外观的多屏幕移动应用程序。我将介绍完整的开发周期，从设计开始一直到将应用程序发布到应用程序商店。本文的目的在于强调我的经验，而不是一个“道路还是高速路”类型的讨论。取决于您的应用程序，您可能可以更自由地应用我下面列出的各种步骤（即工作流、测试、开发和优化）。尽管它可能对每个应用程序各不相同，但如果您还不熟悉移动开发，下面介绍的方法将为您开发多屏幕移动应用程序提供了一个不错的上下文。

工作流

因为我是一名开发人员，并且缺乏开发外观漂亮的应用程序的技能，所以与一个设计公司合作为Caltrain Times 应用程序创建一些组件。根据一些重要人物的反馈，我围绕应用程序应该具有何种外观、操作和功能而提供了一些图像和概念。最终结果是设计公司提供了Caltrain Times 的组件的Photoshop psd 文件。我收到的文件为竖向非retina 显示屏iPhone/iPod（320x480）的尺寸。这是我犯的一个错误，我没有标明需要高分辨率组件。您总是想要最高分辨率的组件，您为您可轻松缩小图像并保持保真度，而无法放大图像来保持保真度。

注意：适用于retina 显示分辨率960x640 或更大的平板电脑格式1024x600 是一个不错的开始。我还认为首先采用智能电话规格是个不错的主意。很容易扩大到更大的平板电脑尺寸，同时精简设计。

在返回到设计公司之前，我在Photoshop 中实际做了一些尝试。我在Photoshop 中打开文件，然后转到Image > Image Size…并将分辨率乘以2（在Document Size 分组中），将72 改为144。Photoshop 可以很好地处理位图和字号的放大，但它无法很好地应用于特效。尤其是像描边这样的特效，我必须手动打开它并更改一些资产上的描边特效尺寸。不是很理想，但它避免了返回到设计公司，很好地满足了我的需要。

下一步是剪切所有部件，获取整个组件中使用的字体及其设置的列表。从个人角度讲，我缺乏Photoshop 技能，但更加了解Fireworks 的使用。考虑到这一点，我为我需要的各种资产关闭和打开不同的Photoshop 层，然后单击Save for Web & Devices，将整个组件导出（打开和关闭了不同的层）为PNG-24 图像。这为我提供了一个无损且完全透明的图形以在Fireworks 中打开和剪切。在Fireworks 中，我保存了一个具有我希望导出的特定资产的最高分辨率的源文件。然后导出为最小尺寸且保持资产的最高保真度的文件格式（png8、png32 或jpg）。导出的资产保存使用相同的名称保存到3 个不同的文件夹中。例如，我在Fireworks 中打开GPSSource.jpg，首先导出到文件夹/assets/dpi320，将Fireworks 图像尺寸更改为75% 之后将它导出到/assets/dpi240，然后在改为50% 之后导出到/assets/dpi160（参见图2）。

图2. Caltrain Times 项目中的文件夹设置

任何时候我必须返回更改或创建新资产，我仍会将它导出到所有3 个文件夹，将源文件保存为最高分辨率格式。这使得很容易将所有资产DPI（每英寸点数）版本放在代码中，而无需多次返回到Fireworks。而且我可以在不同屏幕上测试，确保特定DPI 版本中没有瑕疵。这就引出了我的流程中的下一部分：测试！

测试

Flash Builder 4.5.1 移动项目允许您以不同的平台为目标。您可以针对每种平台来配置不同的启动配置。启动配置定义如何在桌面和设备上运行或调试项目的启动。它还允许您在桌面上运行时提供设备模板。设备模板可针对各种设备屏幕分辨率和 DPI 进行编辑。在项目开头我为桌面创建了 3 种启动配置，它们分别以 160、240 和 320 DPI 设备模板的形式运行（参见图 3）。

图 3. Caltrain Times 项目在 Flash Builder 4.5.1 中的启动配置，包括 160、240 和 320 设备配置。

我编写了最少的代码来实现基本的应用程序布局。背景图像、页眉标题、车站选择器、火车时刻表列表和站点之间过渡等元素使用 3 种 DPI 大小的桌面启动配置进行测试。我此刻没有挂钩任何真实数据，但在列表中需要数据时提供了一些存根数据。接下来，使用独立的启动配置，我在首先在 Android 和 iOS 设备上进行了测试。如果我没有测试性能，我将为使用 Apple iOS 作为目标平台的设备选项使用快速封装方法（adt –target ipa-test-interpreter）（参见图 4）。

图 4. Apple iOS 设备启动方法的快速封装方法。

在确定项目呈现器状态的细节和可能导致性能问题不同布局特征时，我仍然关注首先实现正确的 UI 交互。这标明我更自由地使用 MXML 和绑定来让事物按我想要的方式运行，即使它已遵照移动最佳实践运行。一旦我让它正确运行并在具有足够性能的桌面和设备上测试之后，我就会将它放在一边，继续处理下一个 UX 问题。最后，当我让所有 UI 交互正常运行并且资产在所有 DPI 尺寸的设备上恰当呈现之后，我开始下一个阶段：开发。

开发

这是将所有数据、服务、GPS 功能、twitter 继承和最终说明视图集中在一起的阶段。我编写了一个特殊的AIR 应用程序来将Caltrain 的General Transit Feed Specification 文件转换为sqlite 数据库。从这里，我拥有一个默认的sqlite 数据库，其中每个应用程序都可在以后使用网线（或应用程序更新）进行更新。更新非常简单，只需复制小型的sqlite db 文件。我能够在桌面上测试大部分功能，这使得调试和更改非常简单。但我将始终在各种设备上测试这些功能，以确保它们是完整的并可正确运行。

GPS 功能必须在设备上测试，但实际上很容易挂钩到各种设备的 AIR 端。我使用了一个基本的半正矢公司来计算到车站的距离。此方法很好，因为所有 Caltrain 车站都相对较近。我在设备上测试之前通过设置经度 / 纬度值对距离算法进行测试，以隔离距离逻辑并在向它传递真实的 GPS 数据之前确认它可正常运行。

我使用了 Flex 中的一些技术来解决不同的屏幕 DPI 问题，以及智能电话和平板电脑大小。我实现了自定义类来针对特定智能电话和平板电脑永利改写某些值，包括开始屏幕和运行时 DPI 提供程序。我为图像资产大量使用了 MultiDPIBitmapSource（参见图 5）。

图 5. 为背景图像使用 MultiDPIBitmapSource 的示例

在 CSS 媒体查询和在构造函数或应用程序组件的 creationComplete 事件中设置值的间隔中，我得到了 3 个布局和大小值集合（参见图 6）。

图 6. 跨不同 DPI 设置的媒体查询示例

我几乎编写了 3 次该应用程序，但还不算太糟。当我首先开始处理 3 个资产和大小值集合时，我感觉稍微有点奇怪。如果您尝试过为不同设备以及屏幕大小或分辨率的排列组合编码，您一定也统一为 3 种变形版本编码不算太糟。我发现将 Flex 规定的 160、240 和 320 DPI 值想作 3 个设备集合或 3 种独特的皮肤大小，会使理解和选择我希望为特定设备使用何种尺寸的屏幕变得很容易。这种看待 Flex 的 DPI 管理的方式使我无需使用设备的实际 DPI，只需通过客户运行时 DPI 提供程序类应用正确的皮肤，以实现我想要的外观。例如，平板电脑归入 160 DPI 的范围，但使用客户运行时 DPI 提供程序，我可以忽略该值，而应用 240 DPI 的设置，进而为平板电脑应用程序提供可以我想要的方式填满更大屏幕尺寸的更大外观。通过这种创建和调整应用程序资产和布局的 3 个版本的看似额外的工作，我得到了什么？我获得了全面控制权来使应用程序在每种类型的设备上具有我想要的外观。

现在我的所有数据和业务逻辑都恰当应用到了应用程序中，是时候花时间在设备上体验应用程序，开始优化新能和进行最后的交互性调节了。

优化

在此阶段，我首先查看移动 Flex 应用程序的最佳实践。要优化的第一个位置是将我的 MXML 项目呈现器转换为基于 ActionScript 的呈现器。这为我带来了一些过去常用的但并没有想象中那么难的东西。您必须认识到，必须处理资产的所有创建、放置和呈现工作。MXML 中的许多绑定和布局值必须在 ActionScript 代码中的某个位置明确设置。例如，我在看度为 90% 的父元素中间放置了一个图形。这在 MXML 中可使用类似 <s:Image id=“img” horizontalCenter=“0” widht=“90%” /> 这样的代码轻松实现，但在 ActionScript 中，我必须明确设置 x 位置的宽度和中心。

 
overrideprotectedfunction layoutContents(unscaledWidth:Number, unscaledHeight:Number):void 
 
{ 
 
   super.layoutContents(unscaledWidth, unscaledHeight); 
   img.width = unscaledWidth * 0.9; 
   img.x = (unscaledWidth-img.width)/2; 
 
} 

您在MXML 中执行的所有操作都可以在ActionScript 中执行。技巧在于确定MXML 为您做什么，然后确定在何处和如何在您的自定义ActionScript 中明确地这么做。我重复这个转换MXML 组件和项目呈现器的过程，直到各种设备上的性能符合我的需求。我最终得到的是一些MXML 视图和ActionScript 项目呈现器。现在应用程序的外观、行为和性能都很好，是时候将应用程序发布到各种市场了。

发布应用程序

Flash Builder 使创建所有包的发布版本变得非常简单。在项目中，我转到 Export > Release Build，这时会弹出一个包含所有目标平台的对话框。我处理所有对话框并设置生产证书、配置文件、权限和特定于平台的包内容设置。然后单击 Finish 并运行应用程序，并得到我的应用程序的.apk、.bar 和.ipa 发行版。

注意：要提交到 Amazon App Store，您需要将 Deployment > AIR download URL 更改为 Amazon 的具体 URL。

有趣的部分是将所有图标、屏幕截图和描述集中在一起，提交到各种市场。我将应用程序提交到了 Android Market、Amazon Appstore、Apple App Store、BlackBerry App World 和 Nook Marketplace。它们需要不同大小的屏幕截图和图标大小。我最终得到了 13 个屏幕截图、8 个欢迎屏幕和 14 个图标。为了获得特定于平台的欢迎屏幕，我在设备上运行应用程序并使用设备的截图功能，然后将它复制到我的计算机。如果设备上的屏幕截图没有小，或者出于简单考虑，我可以使用 Flash Builder 创建许多屏幕截图。为此，我使用各种市场所需的特定分辨率创建新的启动配置（参见图 3），使用一个桌面屏幕截图软件创建图像。

我注册了各种开发人员 / 供应商帐户（有些是我在以前完成的）并提交了新的应用程序表单。然后我必须等待应用程序经过各种批准流程的批准。最后，每个应用程序都在一周内经过了批准，而没有遇到任何困难，非常不错。您可以单击此处在各种市场上查看该应用程序，以及从顶部的示例链接查看应用程序的源代码。

延伸阅读

一定要查阅 Flash Builder 4.5.1 中的移动应用程序开发功能。它使为不同平台和设备测试和构建移动应用程序变得非常轻松。以下这些链接提供了与上述内容相关的更多信息：

• 管理启动配置
• 在移动应用程序中支持多种屏幕尺寸和 DPI 值
• Flex 移动皮肤 – 第 1 部分：优化的皮肤基础知识
• Flex 移动皮肤 – 第 2 部分：处理不同的像素密度
• Flex 移动皮肤 – 第 3 部分：多平台开发
• Caltrain Times 网站

+

此作品依据 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授权。与本作品中包含的代码示例相关的超出本许可证的权限可在 Adobe 上找到。

查看原文： Caltrain Times from design to release: A story of mobile application development