jquery mobile android浏览器,使用jQuery Mobile实现新闻浏览器（3）

【IT168 技术】在本教程的前两篇文章中，笔者分别向大家介绍了使用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中被调用。这个方法的主要作用是当从新闻分类页面跳转到新闻详细页面时使用。

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

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

3、因为在web版本中，是存在浏览器本身的进度条，因此changeLocation方法倒不一定需要，但在手机设备上，有一个等待的图标是能给用户良好的用户体验的。

编写Activity类

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

packagecom.news;

importandroid.app.Activity;

importandroid.webkit.WebView;

importandroid.os.Bundle;

...

publicclassNewsActivityextendsActivity...{

    WebView mWebView;

publicvoidonCreate(Bundle savedInstanceState)...{

super.onCreate(savedInstanceState);

    setContentView(R.layout.main);

    mWebView=(WebView) findViewById(R.id.webview);

    mWebView.setWebViewClient(newNewsClient());

    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事件代码，如下：

publicclassNewsActivityextendsActivity...{

    WebView mWebView;

publicbooleanonKeyDown(intkeyCode, KeyEvent event)...{

if((keyCode==KeyEvent.KEYCODE_BACK)&&mWebView.canGoBack())...{

      mWebView.goBack();

returntrue;

    }returnsuper.onKeyDown(keyCode, event);

  }  ...

}

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

publicclassNewsActivityextendsActivity...{

    WebView mWebView;

privateclassNewsClientextendsWebViewClient...{

publicbooleanshouldOverrideUrlLoading(WebView view, String url)...{

      view.loadUrl("javascript:changeLocation('"+url+"')");

returntrue;

    }  }...

}

首先，我们继承了WebViewClient这个Android内置的浏览器类，并重写了其中的shouldOverrideUrlLoading方法，在这个方法中，调用了之前写的changeLocation方法，而如果我们不定义自己的WebViewClient,那么新闻详细内容页将会在显示在一个单独的新打开的浏览器中，而我们希望新闻内容页只是显示在同一个浏览器页面中。