WebView是一個專門用來顯示網頁的View子類。它使用WebKit渲染引擎來顯示網頁,並且支持包括前進,後退,放大,縮小,文本搜索等多種功能。
WebView有一個輔助類叫WebSettings,它管理WebView的設置狀態。該類的對象可以通過WebView.getSettings()方法獲得。下面我們介紹幾個常用的WebSettings設置:
view plainprint?
//得到WebView對象
WebView mWebView = (WebView) findViewById(R.id.wv1);
//通過WebView得到WebSettings對象
WebSettings mWebSettings = mWebView.getSettings();
//設置支持Javascript的參數
mWebSettings.setJavaScriptEnabled(true);
//設置可以支持縮放
mWebSettings.setSupportZoom(true);
//設置出現縮放工具
mWebSettings.setBuiltInZoomControls(true);
//設置默認縮放方式尺寸是far
mWebSettings.setDefaultZoom(WebSettings.ZoomDensity.FAR);
//設置允許訪問文件數據
mWebSettings.setAllowFileAccess(true);
//設置是否保存密碼
mWebSettings.setSavePassword(true);
//設置網頁默認編碼
Settings.setDefaultTextEncodingName(encoding);
有關WebSettings更多的設置選項,請參考Android SDK的幫助文檔。
下面我們結合實例,簡單介紹下通過WebView訪問網頁的三種常用方法:loadUrl、loadData以及loadDataWithBaseURL。
1、public void loadUrl(String url)
loadUrl方法很簡單,隻需要提供一個參數,即url地址,就可以進行自動加載。
該方法適用於加載網頁、網頁圖片、本地網頁以及本地圖片。具體參考如下:
view plainprint?
WebView wv = (WebView) findViewById(R.id.wv1);
wv.requestFocus(); //請求焦點
wv.getSettings().setJavaScriptEnabled(true); //設置是否支持JavaScript
wv.getSettings().setSupportZoom(true); //設置是否支持縮放
wv.getSettings().setBuiltInZoomControls(true); //設置是否顯示內建縮放工具
wv.getSettings().setSavePassword(true); //設置是否保存密碼
wv.loadUrl("http://www.baidu.com/"); //加載在線網頁
wv.loadUrl("/wp-content/images1/20181004/20110930020727775272.jpg"); //加載在線圖片
wv.loadUrl("file:///mnt/sdcard/Google.html"); //加載本地網頁(SD卡根目錄下)
wv.loadUrl("/wp-content/images1/20181004/20110930021037759273.jpg"); //加載本地圖片(SD卡根目錄下)
註:1、後面四句包含“loadUrl”的語句分別對應加載在線網頁/在線圖片/本地網頁/本地圖片四中情況,每種情況下隻取其一。
2、對於sdcard中的本地網頁和圖片等資源,一般url地址以 “file:///mnt/sdcard/”開頭;
3、對於android項目中assets目錄下的本地網頁和圖片等資源, 一般url地址以 “ file:///android_asset/ "開頭;
2、public void loadData(String data, String mimeType, String encoding)
loadData將指定的data加載到WebView中。由於本身機制的原因,該方法不能加載來自網絡的內容。其中,data內的html代碼中若含有以下四種字符'#', '%', '\', '?',則應該依次替換為%23, %25, %27, %3f 。 參數mimeType,即MIME Type,也就是該資源的媒體類型,可以取值text/html, image/jpeg等。參數 encoding為網頁編碼,可以取值utf-8, base64等。具體參考如下:
view plainprint?
final String mimeType = "text/html"; // image/jpeg etc
final String encoding = "utf-8"; //base64 etc
String data = null;
WebView wv = (WebView) findViewById(R.id.wv7);
data = "<a href ='http://www.baidu.com/'>百度</a>"; //加載本地網頁Html代碼
data = "loadData方法加載本地圖片<img src ='/wp-content/images1/20181004/20110930021037759273.jpg' />"; //加載本地圖片(SD卡根目錄下)
wv.requestFocus();
wv.getSettings().setDefaultTextEncodingName(encoding); //對於data中含有中文字符的,必須加上這個設置,否則會亂碼。
wv.loadData(data, mimeType, encoding);
註:1、中間兩個data字段分別對應加載本地網頁代碼和本地圖片的情況;
2、經過實際操作,發現前面文本超級鏈接的html代碼可以正常顯示。點擊超級鏈接,調用外部web瀏覽器打開鏈接。
3、經過實際操作,發現後面的本地圖片其實加載不上來,無法顯示。
4、loadData方法中,如果data含有中文字符,則需要調用 setDefaultTextEncodingName方法來設置WebView的text指定編碼。詳情請點擊閱讀:《關於WebView的loadData方法》
3、public void loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)
loadDataWithBaseURL方法也是將指定的data加載到WebView中。由於本身機制的原因,該方法不能加載來自網絡的內容。參數mimeType,即MIME Type,也就是該資源的媒體類型,可以取值text/html, image/jpeg等。參數 encoding為網頁編碼,可以取值utf-8, base64等。參數baseUrl為基礎目錄,data中的文件路徑可以是相對於基礎目錄的相對目錄。例如:文件/wp-content/images1/20181004/20110930021037759273.jpg,baseUrl為file:///mnt/sdcard/,那麼data中就可以直接引用圖片 Googles_13th_Birthday-2011-hp.jpg瞭。參數historyUrl用作歷史記錄的字段,可以設置為null。具體參考如下:
view plainprint?
final String mimeType = "text/html"; // image/jpeg etc
final String encoding = "utf-8"; //base64 etc
String baseUrl = null;
String data = null;
WebView wv = (WebView) findViewById(R.id.wv9);
baseUrl = "file:///mnt/sdcard/"; //網頁基礎目錄
data = "<a href='Google.html'>谷歌</a>"; //加載本地網頁Html代碼(SD卡根目錄下)
data = "<img src ='Googles_13th_Birthday-2011-hp.jpg' />"; //:加載本地圖片(SD卡根目錄下)
wv.requestFocus();
wv.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, null);
註:中間兩個data字段分別對應加載本地網頁和本地圖片的情況。經過測試,網頁和本地圖片都能正常加載。
下面我們進行實例代碼解析:
res-layout-webview_1.xml
view plainprint?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!–一個線性垂直佈局,包含十個WebView對象 –>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<WebView android:id="@+id/wv1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<WebView android:id="@+id/wv2"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<WebView android:id="@+id/wv3"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<WebView android:id="@+id/wv4"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<WebView android:id="@+id/wv5"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<WebView android:id="@+id/wv6"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<WebView android:id="@+id/wv7"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<WebView android:id="@+id/wv8"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<WebView android:id="@+id/wv9"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<WebView android:id="@+id/wv10"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
</LinearLayout>
</ScrollView>
src-com.example.android.apis.view-WebView1.java
view plainprint?
package com.example.android.apis.view;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import com.example.android.apis.R;
/**
*<pre>WebView組件(mWebView)有一個輔助類叫WebSettings,它管理WebView的設置狀態。
*該對象可以通過WebView.getSettings()方法獲得。
*得到WebSettings對象,設置支持Javascript的參數
*mWebView.getSettings().setJavaScriptEnabled(true);
*設置可以支持縮放
*mWebView.getSettings().setSupportZoom(true);
*設置默認縮放方式尺寸是far
*mWebView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
*設置允許訪問文件數據
*mWebView.getSettings().setAllowFileAccess(true);
*設置是否保存密碼
*mWebView.getSettings().setSavePassword(true);
*設置網頁默認編碼
*mWebView.getSettings().setDefaultTextEncodingName(encoding);
*設置出現縮放工具
*mWebView.getSettings().setBuiltInZoomControls(true);</pre>
*
*/
public class WebView1 extends Activity {
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.webview_1);
final String mimeType = "text/html"; // image/jpeg etc
final String encoding = "utf-8"; //base64 etc
WebView wv = null;
String baseUrl = null;
String data = null;
//加載在線網頁
wv = (WebView) findViewById(R.id.wv1);
wv.requestFocus(); //請求焦點
wv.getSettings().setJavaScriptEnabled(true); //設置是否支持JavaScript
wv.getSettings().setSupportZoom(true); //設置是否支持縮放
wv.getSettings().setBuiltInZoomControls(true); //設置是否顯示內建縮放工具
wv.getSettings().setSavePassword(true); //設置是否保存密碼
wv.loadUrl("http://www.baidu.com/");
//加載在線圖片
wv = (WebView) findViewById(R.id.wv2);
wv.requestFocus();
wv.loadUrl("/wp-content/images1/20181004/20110930020727775272.jpg");
//加載本地網頁(SD卡根目錄下)
wv = (WebView) findViewById(R.id.wv3);
wv.requestFocus();
wv.loadUrl("file:///mnt/sdcard/Google.html");
//加載本地圖片(SD卡根目錄下)
wv = (WebView) findViewById(R.id.wv4);
wv.requestFocus();
wv.loadUrl("/wp-content/images1/20181004/20110930021037759273.jpg");
//加載在線網頁失敗,把網頁地址當作字符串處理
wv = (WebView) findViewById(R.id.wv5);
data = "http://www.baidu.com/";
wv.requestFocus();
wv.loadData(data, mimeType, encoding);
//加載在線圖片失敗,隻顯示一個默認圖片進行替換
wv = (WebView) findViewById(R.id.wv6);
data = "/wp-content/images1/20181004/20110930020727775272.jpg";
wv.requestFocus();
wv.loadData(data, mimeType, encoding);
//加載本地網頁Html代碼,可以顯示超級鏈接。點擊,調用外部瀏覽器打開該鏈接。
wv = (WebView) findViewById(R.id.wv7);
data = "<a href ='http://www.baidu.com/'>百度</a>";
wv.requestFocus();
wv.getSettings().setDefaultTextEncodingName(encoding); //對於data中含有中文字符的,必須加上這個設置,否則會亂碼。
wv.loadData(data, mimeType, encoding);
//加載本地圖片(SD卡根目錄下)
wv = (WebView) findViewById(R.id.wv8);
data = "loadData方法加載本地圖片<img src ='/wp-content/images1/20181004/20110930021037759273.jpg' />";
wv.requestFocus();
wv.getSettings().setDefaultTextEncodingName(encoding); //對於data中含有中文字符的,必須加上這個設置,否則會亂碼。
wv.loadData(data, mimeType, encoding);
//loadDataWithBaseURL方法:加載本地網頁Html代碼(SD卡根目錄下),可以顯示超級鏈接。點擊直接顯示本地網頁內容。
wv = (WebView) findViewById(R.id.wv9);
baseUrl = "file:///mnt/sdcard/"; //網頁基礎目錄
data = "<a href='Google.html'>谷歌</a>"; //相對路徑,相對基礎目錄而言
wv.requestFocus();
wv.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, null);
//loadDataWithBaseURL方法:加載本地圖片(SD卡根目錄下),默認直接顯示該圖片
wv = (WebView) findViewById(R.id.wv10);
baseUrl = "file:///mnt/sdcard/"; //網頁基礎目錄
data = "<img src ='Googles_13th_Birthday-2011-hp.jpg' />"; //相對路徑,相對基礎目錄而言
wv.requestFocus();
wv.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, null);
}
}
關於WebView更詳細的用法介紹,請點擊閱讀:《超好的webview學習資料》
預覽效果:
作者“snowdream”