Andorid WebView簡介（基本顯示篇）

本文希望通過本次對WebView組件的使用講解，可以讓各位了解到WebView組件的詳細使用：
一、網絡內容
1、LoadUrl直接顯示網頁內容(單獨顯示網絡圖片)
比如： webView.loadUrl("http://www.google.com");
2、LoadData顯示中文網頁內容(含空格的處理)

webView.loadData(URLEncoder.encode(data, encoding),"text/html", "utf-8");  
二、本地文件內容
比如：webView.loadUrl("file:///android_asset/test.html"); 
三、APK包內文件
1、LoadUrl顯示APK中Html和圖片文件  webView.loadUrl("file:///android_asset/test.html");     webView.loadUrl("file:///android_asset/icon.png");    對於APK本地文件應該存放在其Android工程的assets 文件中,url為file:///android_asset/開頭的形式，
比如webView.loadUrl("file:///android_asset/XX.html")， 四、使用loadDataWithBaseURL進行本地數據與網絡文件的混合顯示。 我可以在本地數據中引用一些網絡文件，這就可以讓本地數據與網絡文件的混合顯示 。 在引用文件時，可以采用覺得URL，也可以使用相對URL。使用相對URL時，請采用loadDataWithBaseURL，以引用文件的指明起始地址。
示例1：                 String baseURL="http://img6.ph.126.net";                 String data="Here is a gorgeous girl <img src='hBiG96B8egigBULxUWcOpA==/109212290980771276.jpg'>";                 webView.loadDataWithBaseURL(baseURL, data,"text/html",  "utf-8", ""); 

運行結果見圖二。
注意：需要在AndroidManifest.xml文件中添加權限，否則會出現Web page not available錯誤。
  <uses-permission android:name="android.permission.INTERNET" />
res/layout/main.xml

Xml代碼
 

< ?xml version="1.0" encoding="utf-8"?>   
   
< LINEARLAYOUT android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">   
   
< WEBVIEW android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/webview" />   
   
< /LINEARLAYOUT>   
   
< ?xml version="1.0" encoding="utf-8"?>   
   
< LINEARLAYOUT android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">   
   
< WEBVIEW android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/webview" />   
   
< /LINEARLAYOUT>   

     
    Example_webview.java

Java代碼

 

package cn.coolworks;    
   
import java.net.URLEncoder;    
   
import android.app.Activity;    
   
import android.os.Bundle;    
   
import android.webkit.WebView;    
   
public class Example_webview extends Activity {    
   
WebView webView;    
   
final String mimeType = "text/html";    
   
final String encoding = "utf-8";    
   
/** Called when the activity is first created. */    
   
@Override    
   
public void onCreate(Bundle savedInstanceState) {    
   
super.onCreate(savedInstanceState);    
   
setContentView(R.layout.main);    
   
webView = (WebView) findViewById(R.id.webview);    
   
webView.getSettings().setJavaScriptEnabled(true);    
   
//webHtml();    
    
   
//webImage();   
   
//localHtmlZh();   
   
//localHtmlBlankSpace();   
   
//localHtml();   
   
// localImage();    
   
localHtmlImage();    
   
}    
   
/**    
   
* 直接網頁顯示    
   
*/    
   
private void webHtml() {    
   
try {    
   
webView.loadUrl("http://www.google.com");    
   
} catch (Exception ex) {    
   
ex.printStackTrace();    
   
}    
   
}    
   
/**    
   
* 直接網絡圖片顯示    
   
*/    
   
private void webImage() {    
   
try {    
   
webView.loadUrl("http://www.gstatic.com/codesite/ph/images/code_small.png");    
   
} catch (Exception ex) {    
   
ex.printStackTrace();    
   
}    
   
}    
   
/**    
   
* 中文顯示    
   
*/    
   
private void localHtmlZh() {    
   
try {    
   
String data = "測試含有 中文的Html數據";    
   
// utf-8編碼處理(在SDK1.5模擬器和真實設備上都將出現亂碼,SDK1.6上能正常顯示)    
   
//webView.loadData(data, mimeType, encoding);    
   
// 對數據進行編碼處理(SDK1.5版本)    
   
webView.loadData(URLEncoder.encode(data, encoding), mimeType, encoding);    
   
} catch (Exception ex) {    
   
ex.printStackTrace();    
   
}    
   
}    
   
/**    
   
* 中文顯示(空格的處理)    
   
*/    
   
private void localHtmlBlankSpace() {    
   
try {    
   
String data = " 測試含有空格的Html數據 ";    
   
// 不對空格做處理    
   
webView.loadData(URLEncoder.encode(data, encoding), mimeType,  encoding);    
   
//webView.loadData(data, mimeType, encoding);    
   
// 對空格做處理(在SDK1.5版本中)    
   
webView.loadData(URLEncoder.encode(data, encoding).replaceAll(   "\+", " "), mimeType, encoding);    
   
} catch (Exception ex) {    
   
ex.printStackTrace();    
   
}    
   
}    
   
/**    
   
* 顯示本地圖片文件    
   
*/    
   
private void localImage() {    
   
try {    
   
// 本地文件處理(如果文件名中有空格需要用+來替代)    
   
webView.loadUrl("file:///android_asset/icon.png");    
   
} catch (Exception ex) {    
   
ex.printStackTrace();    
   
}    
   
}    
   
/**    
   
* 顯示本地網頁文件    
   
*/    
   
private void localHtml() {    
   
try {    
   
// 本地文件處理(如果文件名中有空格需要用+來替代)    
   
webView.loadUrl("file:///android_asset/test.html");    
   
} catch (Exception ex) {    
   
ex.printStackTrace();    
   
}    
   
}    
   
/**    
   
* 顯示本地圖片和文字混合的Html內容    
   
*/    
   
private void localHtmlImage() {    
   
try {    
   
String data = "測試本地圖片和文字混合顯示,這是APK裡的圖片";    
   
// SDK1.5本地文件處理(不能顯示圖片)    
   
// webView.loadData(URLEncoder.encode(data, encoding), mimeType,    
   
// encoding);    
   
// SDK1.6及以後版本    
   
// webView.loadData(data, mimeType, encoding);    
   
// 本地文件處理(能顯示圖片)    
   
webView.loadDataWithBaseURL("about:blank", data, mimeType, encoding, "");    
   
} catch (Exception ex) {    
   
ex.printStackTrace();    
   
}    
   
}    
   
}   

這就是WebView組件的使用詳解，如果您對WebView組件及Android開發有什麼新的使用心得可以發Email：[email protected]，51CTO將與您一起分享！
 

圖2：