使用jQuery Mobile实现新闻浏览器（3）

在本教程的前两篇文章中，笔者分别向你们介绍了使用jQuery Mobile框架如何去设计手机新闻浏览器，其中实现了一个WEB版本的新闻浏览器，在本教程的最后一篇中，将讲解如何将已实现的web版本的新闻浏览器迁移到Android手机中去，注意的是，本文但愿读者拥有一点基础的Android知识。

迁移到Android应用中去

　　在Android应用中，将会使用index.html做为界面的布局，咱们将编写一个Android的Activity类将index.html整合到android应用中去。

　　修改index.html

　　首先，将index.html中的NEWS_URI修改：

var NEWS_URI = ' http://rss.news.yahoo.com/rss/ ' ;

 　　由于咱们在这里再也不须要使用bridge.php了，由于咱们将index.html整合到了Android应用中去，所以再也不存在跨域ajax访问问题，接下来做以下修改：

var EMPTY = '' ; ... function changeLocation(varURI) {   showProgress();   $.get(EMPTY,function(data){     window.location = varURI;   }); }

 　　changeLocation()方法将会在android.webkit.WebViewClient中被调用。这个方法的主要做用是当重新闻分类页面跳转到新闻详细页面时使用。

　　一、首先经过showProgress()来显示进度图标的等待状态；

　 　二、jQuery的get()方法中其实是一个特定的jQuery ajax()方法，在get方法中，咱们传入一个空的字符串和一个回调的事件句柄，去设置window.location为咱们要查看的具体新闻内容页面 的地址。当新闻内容详细页加载完毕后，就会替换掉等待的图标，显示新闻内容页的详细内容；

　　三、由于在web版本中，是存在浏览器自己的进度条，所以changeLocation方法倒不必定须要，但在手机设备上，有一个等待的图标是能给用户良好的用户体验的。

　　编写Activity类

　　接下来，编写NewsActivity类，代码以下：

package com.news; import android.app.Activity; import android.webkit.WebView; import android.os.Bundle; ... public class NewsActivity extends Activity {     WebView mWebView;   publicvoid onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.main);     mWebView = (WebView) findViewById(R.id.webview);     mWebView.setWebViewClient(new NewsClient());     mWebView.getSettings().setJavaScriptEnabled(true);     mWebView.getSettings().setDomStorageEnabled(true);     mWebView.loadUrl("android_asset/www/index.html");   }   ... }

 　　一、首先在onCreate方法中，调用了setContentView方法加载了res/layout文件夹下的R.layout.main布局文件；

　 　二、接下来，咱们经过findViewById(R.id.webview)获得了一个WebView控件的实例，并设计一个自定义的 WebViewClient实例做为给WebView控件的参数，这个自定义的WebViewClient咱们命名为NewsClient,咱们稍后会介 绍。接着咱们设置这个WebView容器能支持Javascript和Dom；

　　三、最后，使用loadUrl将以前咱们作的android_asset/www/index.html加载进来，在新闻详细内容页中，当用户点后退按钮后，会回到新闻分类页，在Android中，咱们能够捕捉其onKeyDown事件代码，以下：

public class NewsActivity extends Activity {     WebView mWebView;   publicboolean onKeyDown(int keyCode, KeyEvent event) {     if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {       mWebView.goBack();       returntrue;     }     returnsuper.onKeyDown(keyCode, event);   }   ... }

 　　接下来看下咱们如何编写一个自定义的WebViewClient，代码以下：

public class NewsActivity extends Activity {     WebView mWebView;   privateclass NewsClient extends WebViewClient {     publicboolean shouldOverrideUrlLoading(WebView view, String url) {       view.loadUrl("javascript:changeLocation('"+ url +"')");       returntrue;     }   } ... }

 　 　首先，咱们继承了WebViewClient这个Android内置的浏览器类，并重写了其中的shouldOverrideUrlLoading方 法，在这个方法中，调用了以前写的changeLocation方法，而若是咱们不定义本身的WebViewClient,那么新闻详细内容页将会在显示 在一个单独的新打开的浏览器中，而咱们但愿新闻内容页只是显示在同一个浏览器页面中。

　　AndroidManifest.xml的配置

　　接下来，咱们来看下AndroidManifest.xml的配置：

<? xml version = " 1.0 " encoding = " utf-8 " ?> < manifest xmlns:android = " http://schemas.android.com/apk/res/android "    package = " com.news " android:versionCode = " 1 " android:versionName = " 1.0 " >      < application android:icon = " @drawable/icon " android:label = " @string/app_name " >        < activity android:name = " .NewsActivity " android:configChanges = " orientation|keyboardHidden "         android:label = " @string/app_name " >            < intent - filter >              < action android:name = " android.intent.action.MAIN " />              < category android:name = " android.intent.category.LAUNCHER " />            </ intent - filter >        </ activity >      </ application >      < uses - permission android:name = " android.permission.INTERNET " /> </ manifest > For a general discussion on the AndroidManifest.xml file refer to the official reference. In that file, there are two particular items worthy of commenting on.

 　　一、以上实际上是一个很典型的Android配置文件，但注意的是，咱们使用了configChanges属性，这个属性是设定了当手机的屏幕由横屏与竖屏切换时以及当手机键推上合上时，应用程序的显示界面也会随着改动，而不是被销毁；

　　二、由于咱们要访问互联网，因此要在配置文件中配置访问网络，必须添加android.permission.INTERNET权限。

　　strings.xml

<? xml version = " 1.0 " encoding = " utf-8 " ?> < resources >    < string name = " app_name " > News </ string > </ resources >

 　　在Strings.xml的资源文件中，定义了应用程序的名称，这个名称将会显示在程序的启动栏，应用程序的标题栏和应用程序的管理设置中，以下面图所示：

　　设计应用程序的启动按钮

　 　接下来建立应用程序的启动按钮， 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的实用知识和技巧，请点击这里下载本文的附件。