使用jQuery Mobile實現手機新聞瀏覽器(第三章)

作者：廖煜嶸譯 2011-07-20 11:29:48

在本篇教程中，將詳細講解如何將已經實現的web應用遷移到Android上去。注意的是，本文希望讀者擁有一點基礎的Android知識。

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

[[36960]]

遷移到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中被調用。這個方法的主要作用是當從新聞分類頁面跳轉到新聞詳細頁面時使用。

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

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

3、因為在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; 
 
  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方法中，調用了setContentView方法加載了res/layout文件夾下的R.layout.main布局文件;

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

3、***，使用loadUrl將之前我們做的android_asset/www/index.html加載進來，在新聞詳細內容頁中，當用戶點后退按鈕后，會回到新聞分類頁，在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); 
  } 
  ... 
}

接下來看下我們如何編寫一個自定義的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內置的瀏覽器類，并重寫了其中的shouldOverrideUrlLoading方法，在這個方法中，調用了之前寫的changeLocation方法，而如果我們不定義自己的WebViewClient,那么新聞詳細內容頁將會在顯示在一個單獨的新打開的瀏覽器中，而我們希望新聞內容頁只是顯示在同一個瀏覽器頁面中。#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屬性，這個屬性是設定了當手機的屏幕由橫屏與豎屏切換時以及當手機鍵推上合上時，應用程序的顯示界面也會隨著改動，而不是被銷毀;

2、因為我們要訪問互聯網，所以要在配置文件中配置訪問網絡，必須添加android.permission.INTERNET權限。

strings.xml

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

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

AndroidManifest.xml的配置

#p#

設計應用程序的啟動按鈕

接下來創建應用程序的啟動按鈕， 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，如下圖：

設計應用程序的啟動按鈕