以下範例為使用 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
沒有留言:
張貼留言