2013/04/11

WebView with jsoup html parser

Jsoup 真的非常好用, 尤其搭配 WebView 使用.
以下範例為使用 Jsoup 並且將解悶有漫畫這網站顯示成我所想要的樣子.

Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:indeterminate="true"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_alignParentBottom="true" 
        android:visibility="gone"/>

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/progress" />

</RelativeLayout>

要將網頁顯示成我們所要的格式, 最要下苦工的就是查看網頁的 html 原始檔, 幸好現在大部分網站的 html 都很有規格,
所以要解析也變得相當容易.
如果透過 WebView 載入畫面, 那麼資料將無法處理, 所以改成透過 HttpURLConnection 來連結網站, 並且處理資料.

 class LoadTask extends AsyncTask<String, Void, String> {

@Override
protected String doInBackground(String... params) {
StringBuilder sb = new StringBuilder();

String url = params[0];

try {

Document doc = HttpConnection
.connect(url)
.followRedirects(true)
.get();
if (doc == null) {
return null;
}

Element el = doc.select("ul#framemain_1").first();
if (el == null) {
return null;
}

Elements lis = el.select("li");

/** parse html data and create our own html file **/
sb.append("<html>");
sb.append("<title>WebViewExample Test</title>");
sb.append("<head></head>");
sb.append("<body style='margin: 0px; padding: 0px;'>");
sb.append("<table width='100%' border='1' cellspacing='0' cellpadding='5'><tbody>");
for (Element li: lis) {
Element cover = li.select("a > img").first();
if (cover != null) {
cover.parent().remove();
cover.attr("width", "100px");
cover.attr("height", "136px");
}
sb.append("<tr>");
if (cover == null) {
sb.append("<td colspan='2'>"+li.html()+"</td>");
} else {
sb.append("<td width='100px' height='136px'>"+cover.outerHtml()+"</td>");
sb.append("<td>"+li.html()+"</td>");
}
sb.append("</tr>");
}
sb.append("</body></html>");
} catch (IOException e) {
e.printStackTrace();
}
return sb.toString();
}

@Override
protected void onPostExecute(String result) {
if (result == null) {
Toast.makeText(MainActivity.this, R.string.msg_fail, Toast.LENGTH_SHORT).show();
} else {
mWebView.loadDataWithBaseURL(null, result, "text/html", "UTF-8", null);
}
}
}

主要工作就這麼簡單, 讀取 html, parse 出想要的, 然後寫一份所想要顯示的 html. 完成 !
結果如下:




原始碼: WebViewExample_3

參考 :
[1] Jsoup
[2] 怎麼使用 android 的 webview
[3] WebView with Progressbar