在本教程的前兩篇文章中，筆者分別向大家介紹了使用jQuery Mobile框架如何去設(shè)計手機新聞瀏覽器，其中實現(xiàn)了一個WEB版本的新聞瀏覽器，在本教程的***一篇中，將講解如何將已實現(xiàn)的web版本的新聞瀏覽器遷移到Android手機中去，注意的是，本文希望讀者擁有一點基礎(chǔ)的Android知識。

[[36960]]

遷移到Android應(yīng)用中去

在Android應(yīng)用中，將會使用index.html作為界面的布局，我們將編寫一個Android的Activity類將index.html整合到android應(yīng)用中去。

修改index.html

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

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

因為我們在這里不再需要使用bridge.php了，因為我們將index.html整合到了Android應(yīng)用中去，因此不再存在跨域ajax訪問問題，接下來作如下修改：

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

changeLocation()方法將會在android.webkit.WebViewClient中被調(diào)用。這個方法的主要作用是當(dāng)從新聞分類頁面跳轉(zhuǎn)到新聞詳細頁面時使用。

1、首先通過showProgress()來顯示進度圖標的等待狀態(tài);

2、jQuery的get()方法中實際上是一個特定的jQuery ajax()方法，在get方法中，我們傳入一個空的字符串和一個回調(diào)的事件句柄，去設(shè)置window.location為我們要查看的具體新聞內(nèi)容頁面的地址。當(dāng)新聞內(nèi)容詳細頁加載完畢后，就會替換掉等待的圖標，顯示新聞內(nèi)容頁的詳細內(nèi)容;

3、因為在web版本中，是存在瀏覽器本身的進度條，因此changeLocation方法倒不一定需要，但在手機設(shè)備上，有一個等待的圖標是能給用戶良好的用戶體驗的。

編寫Activity類

接下來，編寫NewsActivity類，代碼如下：

package com.news; 
 
import android.app.Activity; 
import android.webkit.WebView; 
import android.os.Bundle; 
... 
public class NewsActivity extends Activity { 
    WebView mWebView; 
 
  public void 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"); 
  } 
  ... 
} 

1、首先在onCreate方法中，調(diào)用了setContentView方法加載了res/layout文件夾下的R.layout.main布局文件;

2、接下來，我們通過findViewById(R.id.webview)得到了一個WebView控件的實例，并設(shè)計一個自定義的WebViewClient實例作為給WebView控件的參數(shù)，這個自定義的WebViewClient我們命名為NewsClient,我們稍后會介紹。接著我們設(shè)置這個WebView容器能支持Javascript和Dom;

3、***，使用loadUrl將之前我們做的android_asset/www/index.html加載進來，在新聞詳細內(nèi)容頁中，當(dāng)用戶點后退按鈕后，會回到新聞分類頁，在Android中，我們可以捕捉其onKeyDown事件代碼，如下：

public class NewsActivity extends Activity { 
    WebView mWebView; 
  public boolean onKeyDown(int keyCode, KeyEvent event) { 
    if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) { 
      mWebView.goBack(); 
      return true; 
    } 
    return super.onKeyDown(keyCode, event); 
  } 
  ... 
} 

接下來看下我們?nèi)绾尉帉懸粋€自定義的WebViewClient，代碼如下：

public class NewsActivity extends Activity {  
    WebView mWebView;  
  private class NewsClient extends WebViewClient {  
  
    public boolean shouldOverrideUrlLoading(WebView view, String url) {  
      view.loadUrl("javascript:changeLocation('" + url + "')");  
      return true;  
    }  
  }  
...  
}  

首先，我們繼承了WebViewClient這個Android內(nèi)置的瀏覽器類，并重寫了其中的shouldOverrideUrlLoading方法，在這個方法中，調(diào)用了之前寫的changeLocation方法，而如果我們不定義自己的WebViewClient,那么新聞詳細內(nèi)容頁將會在顯示在一個單獨的新打開的瀏覽器中，而我們希望新聞內(nèi)容頁只是顯示在同一個瀏覽器頁面中。#p#

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.

1、以上其實是一個很典型的Android配置文件，但注意的是，我們使用了configChanges屬性，這個屬性是設(shè)定了當(dāng)手機的屏幕由橫屏與豎屏切換時以及當(dāng)手機鍵推上合上時，應(yīng)用程序的顯示界面也會隨著改動，而不是被銷毀;

2、因為我們要訪問互聯(lián)網(wǎng)，所以要在配置文件中配置訪問網(wǎng)絡(luò)，必須添加android.permission.INTERNET權(quán)限。

strings.xml

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

在Strings.xml的資源文件中，定義了應(yīng)用程序的名稱，這個名稱將會顯示在程序的啟動欄，應(yīng)用程序的標題欄和應(yīng)用程序的管理設(shè)置中，如下面圖所示：

 #p#

設(shè)計應(yīng)用程序的啟動按鈕

接下來創(chuàng)建應(yīng)用程序的啟動按鈕， Android官方提供了按鈕設(shè)計指南(http://developer.android.com/guide/practices/ui_guidelines/icon_design.html),在其中可以下載各類Adobe的PSD格式按鈕文件，我們下載了其中的icon_templates-v2.0.zip并且選擇了如下兩個按鈕作為模版 ，并且通過photoshop在上面添加了News的文字，之后根據(jù)Android的指引，把這些按鈕以低，中，高三個分辨率分別設(shè)計復(fù)制一份，它們的尺寸分別為36*36,48*48和72*72pixel,分別放到res\drawable-ldpi，res\drawable-mdpi和res\drawable-hdpi文件夾中。

Android應(yīng)用的部署導(dǎo)入

到此為止，我們已經(jīng)把Android版本的程序?qū)懲炅?，接下來講解下如何將文中附件的Android代碼導(dǎo)入到Eclipse中以方便大家閱讀。代碼使用如下的Android SDK和工具開發(fā)：

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”,然后將附件中的工程項目導(dǎo)入，在導(dǎo)入后，記得在Window -> Preferences -> Android中，選擇編譯項目的Android的SDK,這里選擇Android的SDK，如下圖：

***介紹下Android項目的文件結(jié)構(gòu)如下圖：

Android新聞瀏覽器的實際運行效果圖

下面是在Android上和iphone 4上分別運行的效果圖，左邊的是iphone 4，右邊的是Android，可以看到，使用jQuery Mobile設(shè)計出來的項目的確有很好的兼容性。

總結(jié)

在本系列教程中，介紹了如何使用jQuery Mobile框架以及其他jQuery插件設(shè)計了一個基于WEB版本的新聞RSS閱讀瀏覽器.

下載附件

***還指導(dǎo)如何將其遷移到Android上，讀者可以從中學(xué)到大量關(guān)于jQuery Mobile的實用知識和技巧，請點擊這里下載本文的附件。