WebView的基本使用及相關特性

WebView 是一個顯示網頁內容的組件，能夠顯示網絡上的一些在線內容而且能夠做爲 Web 瀏覽器滾動顯示的內容，它使用 WebKit做爲渲染引擎來顯示網頁，裏面包括放大、縮小、執行文本搜索等進行先後導航的方法。

注意 ：若是要在 WebView 中顯示在線網頁等內容時，須要在 AndroidManifest.xml 文件中添加網絡權限，參考以下：

<uses-permission android:name="android.permission.INTERNET" />

基本用法

默認狀況下 WebView 不啓用 JavaScript ,網頁錯誤也將被忽略，若是僅僅是在 UI 上顯示一段 HTML,這就會很是好， 用戶在不須要再閱讀以前與用戶交互，網頁不須要與用戶交互 ，若是你須要一個完整的瀏覽器，你須要調用相應的 Intent 去啓動瀏覽器去執行某些操做，而不是使用 WebView 來顯示，調用系統瀏覽器使用以下代碼：

Uri uri = Uri.parse("https://www.example.com");
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);

使用 WebView 主要有兩種使用方式，在 Activity 等 onCreate() 方法直接建立使用或者在佈局文件中引入，參考以下：

1. 在代碼中直接建立 WebView

WebView webview = new WebView(this);
//這裏將整個 Activity 窗口做爲 WebView 的顯示界面，也可單獨放在某個佈局中
setContentView(webview);

2. 在佈局文件中使用 WebView

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</WebView>

那麼，咱們如何加載一個網頁呢，若是網頁是本地的又如何加載呢，還有如何加載一段 HTML 的片斷呢，經常使用的加載方法主要有兩個，以下：

1. 加載一個完整的網頁

這裏測試使用百度首頁、CSDN首頁、騰訊首頁進行測試，測試百度首頁時，須要設置以下屬性網頁內容才能正確顯示，若是不設置將顯示爲白屏：

webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webView.loadUrl("https://www.baidu.com");

測試 CSDN 首頁時，會提示打開系統帶瀏覽器的應用去打開該頁面，設置以下屬性才能直接加載網頁內容：

webView.setWebViewClient(new WebViewClient());
webView.loadUrl("http://blog.csdn.net");

測試騰訊首頁時能夠直接加載首頁內容：

webView.loadUrl("http://www.qq.com");

測試環境可能不一樣，結果也不相同。

2. 加載本地的 HTML 文件

其中加載 SD 卡上的 HTML 文件時要申請訪問 SD 卡上的權限 Manifest.permission.WRITE_EXTERNAL_STORAGE，參考以下：

//加載 assets 目錄下的 HTML 文件
webView.loadUrl("file:///android_asset/mine.html");
//加載 SD 卡上的 HTML 文件
webView.loadUrl("file:///"+Environment.getExternalStorageDirectory().getAbsolutePath()+ File.separator+"mine.html");

3. 加載 HTML 片斷

加載 HTML 片斷時，要設置字符集，不然會出現亂碼，參考以下：

//加載 HTML 片斷，設置字符集防止亂碼出現
webView.loadData(Util.getHtmlData(),"text/html; charset=UTF-8",null);

WebView 的設置與界面處理主要有如下幾個方面：

1. 建立並設置 WebChromeClient，主要是輔助 WebView 來處理 JavaScript 的對話框、網站標題、加載進度等；
2. 建立並設置 WebViewClient, 主要是提供各類事件的回調等；
3. 經過 WebSetting 對象能夠設置 WebView 的各類相關屬性，如支持 JavaScript 、設置 WebView 緩存、字體大小等；
4. JS 與 Java 的互相調用，如使用addJavascriptInterface（Object，String）方法將Java對象注入WebView。此方法容許您將Java對象注入到頁面的JavaScript上下文中，以即可以經過頁面中的JavaScript訪問它們。

縮放

Android 1.5 以後支持調用以下方法啓用內置縮放：

WebSettings.setBuiltInZoomControls(boolean)

注意：設置了內置縮放，WebView 的寬高又是 wrap_content，將會致使未定義的行爲，使用時應該避免這種狀況。

構建網頁以支持不一樣的屏幕密度

屏幕密度是基於屏幕分辨率的，低密度的屏幕每英寸可用像素更少，高密度的屏幕每英寸可用像素更多，屏幕密度是比較重要的，由於其餘因素相同的狀況下，根據像素定義的 UI 元素，在低密度屏幕上顯示較大，在較高屏幕密度的屏幕上顯示較小；爲了方便 Android 將實際中的屏幕密度換算成比較普遍的屏幕密度：高、中和低。

默認狀況下，WebView 縮放的網頁，使其繪製的尺寸與中密度屏幕上的默認外觀相匹配，因此在高密度屏幕上適用於 1.5 倍的縮放（像素較小），在低密度屏幕上適用於 0.75 倍的縮放（像素較大）；從 Android 2.0 開始 WebView 支持 DOM、CSS 及 meta 標籤，幫助 Web 開發人員根據不一樣的屏幕密度來適配目標屏幕。

下面是處理不一樣屏幕密度的一些說明：

1. 使用 window.devicePixelRatio 屬性指定當前設備的默認縮放因子，也指設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例，若是 window.devicePixelRatio 的值爲 1 ，則該設備被認爲是中密度（mdpi）設備，而且默認縮放不該用於網頁，若是 window.devicePixelRatio 值爲原來的 1.5 倍 ，則該設備被認爲是高密度設備（hdpi），頁面內容縮放爲 1.5　倍;若是 window.devicePixelRatio 值爲 0.75，則該設備被認爲是低密度設備（ldpi），內容縮放爲原來的 0.75 倍，用公式表示以下：

window.devicePixelRatio(dpr) = physical pixel / dips(css pixel)}

physical pixel = dips *  density / 160} (Android)

1. 使用 -webkit-device-pixel-ratio CSS 媒體查詢來指定使用此樣式表的屏幕密度，其值應該爲 0.75 、1 、1.5，分別指明這些樣式表適用於低密度、中密度、高密度的屏幕設備，以下面的聲明代表 hdpi.css 只適用於屏幕像素密度比例爲 1.5 的屏幕設備，也就是適用於高密度屏幕設備。

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio:1.5)" href="hdpi.css" />

HTML5 視頻支持

若是在應用程序中支持 HTML 視頻，須要啓用硬件加速。

關於硬件加速請參考：Android硬件加速

全屏支持

爲了支持全屏幕，如視頻或其餘 HTML 內容，須要設置一個 WebChromeClient 並實現 onShowCustomView(View，WebChromeClient.CustomViewCallback) 和 onHideCustomView() 兩個方法:

1. onShowCustomView

通知應用程序當前頁面進入全屏模式，應用程序將以全屏模式包含 Web 內容、視頻以及其餘 HTML 的內容。

/**
 * @param view 顯示的View.
 * @param callback 調用當前頁退出當前頁
 * full screen mode.
 */
public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback) {};

2. onHideCustomView

通知應用程序當前頁面退出全屏模式，應用程序必須隱藏自定義的 View。

public void onHideCustomView() {}

若是這兩個方法中的任何一個沒有實現，則對應的頁面的 Web 頁面不能進入全屏模式，也能夠實現 getVideoLoadingProgressView() 來自定義視頻緩衝時要顯示的視圖。

public View getVideoLoadingProgressView() {
        return null;
}

HTML5 地理位置 API

針對 Android N 以及 API level > M 的設備，地理位置 API 僅僅支持以 HTTPs 的方式，若是應用以非 HTTPS 的方式請求地理位置 API onGeolocationPermissionsShowPrompt(String, GeolocationPermissions.Callback) 方法將會被拒絕調用。

佈局尺寸

建議將 WebView 的高度設置成固定值或者是 MATCH_PARENT 而不建議使用 WRAP_CONTENT ,若是 WebView 的高度使用了 MATCH_PARENT ,它的父佈局高度實用 WRAP_CONTENT 會致使石梯大小不一致。

將 WebView 的高度設置成 WRAP_CONTENT 將會出現以下行爲：

1. HTML 的高度被設置成了固定值，這意味着相對於 HTML BODY 高度的元素大小可能不正確；
2. 對於應用程序所在設備是 Android 4.4 及更早的 SDk, meta 標籤將會被忽略以保證向後的兼容性；

不支持使用 WRAP_CONTENT 的佈局寬度。若是使用這樣的寬度，WebView 會嘗試使用其父佈局的寬度。

關於錯誤數據的收集

若是用戶贊成，WebView 的一些診斷數據將會以匿名的方式上傳到 Google ,這些數據會幫助 Google 改善 WebView ,每一個已初始化 WebView 的應用程序都會收集這些數據，若是想停用該功能須要在清單文件中進行以下設置：

<meta-data 
    android:name="android.webkit.WebView.MetricsOptOut"
    android:value="true" />

參考連接：WebView 官網介紹

若是以爲對本身有幫助，能夠關注公衆號：jzman-blog，一塊兒交流學習。