網(wǎng)頁(yè)視圖：WebView

在前面的章節(jié)我們所圍繞的全部都是純客戶端開發(fā)，我們叫 Native 開發(fā)。這樣的好處就是體驗(yàn)和性能會(huì)非常好，但是在實(shí)際的使用中我們會(huì)發(fā)現(xiàn)存在大量的 H5 頁(yè)面。這樣就可以結(jié)合 Native / H5 雙端的優(yōu)勢(shì)完成一個(gè)混合開發(fā)，而在這種開發(fā)模式中首當(dāng)其沖的就是今天要學(xué)的一個(gè)特殊的控件——WebView，它可以讓我們?cè)?App 中開啟一個(gè)簡(jiǎn)易的瀏覽器去運(yùn)行前端 HTML、JS、CSS 等代碼，從而在 Android 應(yīng)用中展示一個(gè) H5 頁(yè)面。

1. WebView 的基本定義

關(guān)于 WebView 的介紹，官方文檔只留給我們一句話：

A View that displays web pages.

這一句相信各位都能看得懂，我就不使用我的塑料英語(yǔ)了。這一句言簡(jiǎn)意賅，但是如果真正想有一點(diǎn)了解，可以看看官方文檔接下來的描述：

In most cases, we recommend using a standard web browser, like Chrome, to deliver content to the user. To learn more about web browsers, read the guide on invoking a browser with an intent.
WebView objects allow you to display web content as part of your activity layout, but lack some of the features of fully-developed browsers. A WebView is useful when you need increased control over the UI and advanced configuration options that will allow you to embed web pages in a specially-designed environment for your app.

相比介紹，這個(gè)可能更形象一點(diǎn)，大致的意思就是說 WebView 可以讓我們?cè)?Activity 的布局中展示一個(gè)網(wǎng)頁(yè)，但是相比一個(gè)瀏覽器而言，它會(huì)缺少很多特性和功能，所以只是在我們希望增強(qiáng) UI，或者配置選項(xiàng)等場(chǎng)景下使用。它可以實(shí)現(xiàn)在 App 中內(nèi)嵌一個(gè) H5，讓我們的功能和交互方式更加豐富。
相信即使你沒開發(fā)過 WebView，作為用戶你也一定使用過。

2. WebView 的優(yōu)勢(shì)

其實(shí)在之前學(xué)過的 textView 中，就有一個(gè)fromHtml()方法，他可以解析 HTML 文本并將內(nèi)容渲染到 TextView 之上，對(duì)于一些的簡(jiǎn)單的富文本場(chǎng)景，比如渲染各種不同不同的字體、表情、不同的顏色、連接等等用 TextView 的fromHtml()就足夠了。但是對(duì)于一些復(fù)雜的 H5 頁(yè)面，TextView 就會(huì)顯得力不從心了。在這種情況下就是 WebView 大顯身手的好時(shí)機(jī)，它可以用來渲染一個(gè)非常巨大完整的 HTML 工程，并且可以解析 CSS / JS，可以將它理解為一個(gè)輕量、簡(jiǎn)易的瀏覽器。

3. WebView 的使用示例

使用 WebView 可以很輕松的展示一個(gè)頁(yè)面，在接下來的例子中，我們將放置一個(gè)全屏的 WebView 來加載一個(gè)純 H5 的頁(yè)面。

3.1 布局文件

放置一個(gè)占滿父布局的 WebView 在 ContentView 當(dāng)中：

<?xml version="1.0" encoding="utf-8"?>

<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"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true" />
</RelativeLayout>

這樣一來，后面整個(gè)頁(yè)面都會(huì)是 H5 頁(yè)面，就類似一個(gè)瀏覽器的效果。

3.2 WebView 加載頁(yè)面

其實(shí) WebView 加載頁(yè)面的核心方法就是loadUrl(String)，我們可以在 onCreate() 當(dāng)中只寫這一句試試：

setContentView(R.layout.activity_main);
WebView webView = (WebView) findViewById(R.id.webview);
webView.loadUrl("http://idcbgp.cn/wiki/androidlesson");

運(yùn)行之后你會(huì)發(fā)現(xiàn)我們的 App 會(huì)去打開本地瀏覽器，然后在瀏覽器中展示代碼中“慕課 Android 教程”的首頁(yè)，但是我們使用 WebView 的本意當(dāng)然是希望在自己的 App 內(nèi)部嵌入一個(gè)頁(yè)面。
WebView 在 load 一個(gè)頁(yè)面之前，會(huì)去檢查有沒有相應(yīng)的 WebViewClient，如果沒有則會(huì)向系統(tǒng)發(fā)起請(qǐng)求，進(jìn)而打開本地的瀏覽器來加載頁(yè)面。所以如果不希望跳轉(zhuǎn)而在 App 內(nèi)部打開頁(yè)面，我們還需要?jiǎng)?chuàng)建一個(gè) WebViewClient 對(duì)象，完整的 Activity 代碼如下：

package com.emercy.myapplication;

import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = (WebView) findViewById(R.id.webview);

        webView.setWebViewClient(webViewClient);

        webView.loadUrl("http://idcbgp.cn/wiki/androidlesson");
    }

    private WebViewClient webViewClient = new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
                  //頁(yè)面加載完成
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
                //頁(yè)面開始加載
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            return super.shouldOverrideUrlLoading(view, url);
        }
    };
}

因?yàn)?url 是網(wǎng)絡(luò)資源，所以一定記得要在 Manifest 中加入網(wǎng)絡(luò)權(quán)限申請(qǐng)：

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

編譯運(yùn)行之后，效果如下：

這樣就可以在 App 內(nèi)部打開一個(gè) H5 頁(yè)面了。

4. 小結(jié)

本節(jié)介紹了一個(gè)全新的控件，它也是一種 View，但是和 TextView、EditText 等 View 不同。它用來在 Native 的 App 中展示一個(gè)網(wǎng)頁(yè)，可以充分的發(fā)揮 H5 的優(yōu)勢(shì)：高效、動(dòng)態(tài)化和跨平臺(tái)，在一些需要靈活變化、且時(shí)效性強(qiáng)的運(yùn)營(yíng)等場(chǎng)景會(huì)大量使用 WebView，另一個(gè)好處就是這樣 Android 開發(fā)就可以解放雙手，因?yàn)榇蟛糠值墓ぷ鞫紩?huì)是前端來完成。有一點(diǎn)要注意的是，在用 WebView loadUrl()之前，需要設(shè)置一個(gè) WebViewClient 對(duì)象，這樣就可以順滑的在 Native 控件和 H5 控件之間來回切換了。