技术开发 频道

使用jQuery Mobile实现新闻浏览器(3)

  设计应用程序的启动按钮

设计应用程序的启动按钮

  接下来创建应用程序的启动按钮, Android官方提供了按钮设计指南(http://developer.android.com/guide/practices/ui_guidelines/icon_design.html),在其中可以下载各类Adobe的PSD格式按钮文件,我们下载了其中的icon_templates-v2.0.zip并且选择了如下两个按钮作为模版 ,并且通过photoshop在上面添加了News的文字,之后根据Android的指引,把这些按钮以低,中,高三个分辨率分别设计复制一份,它们的尺寸分别为36*36,48*48和72*72pixel,分别放到res\drawable-ldpi,res\drawable-mdpi和res\drawable-hdpi文件夹中。

  Android应用的部署导入

  到此为止,我们已经把Android版本的程序写完了,接下来讲解下如何将文中附件的Android代码导入到Eclipse中以方便大家阅读。代码使用如下的Android SDK和工具开发:

    Android SDK revision 8.
    Eclipse IDE version 3.5.
    Android Development Tools (ADT), version 8.0.1.

  项目能在Android 2.2,2.3上运行。首先我们在Eclipse中选择“Importing The Project”,然后将附件中的工程项目导入,在导入后,记得在Window -> Preferences -> Android中,选择编译项目的Android的SDK,这里选择Android的SDK,如下图:

设计应用程序的启动按钮

  最后介绍下Android项目的文件结构如下图:

设计应用程序的启动按钮

  Android新闻浏览器的实际运行效果图

  下面是在Android上和iphone 4上分别运行的效果图,左边的是iphone 4,右边的是Android,可以看到,使用jQuery Mobile设计出来的项目的确有很好的兼容性。

设计应用程序的启动按钮

设计应用程序的启动按钮

设计应用程序的启动按钮

  总结

  在本系列教程中,介绍了如何使用jQuery Mobile框架以及其他jQuery插件设计了一个基于WEB版本的新闻RSS阅读浏览器,最后还指导如何将其迁移到Android上,读者可以从中学到大量关于jQuery Mobile的实用知识和技巧,请点击这里下载本文的附件。

0
相关文章