網(wǎng)頁視圖：WebView

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

1. WebView 的基本定義

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

A View that displays web pages.

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

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.

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

2. WebView 的優(yōu)勢

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

3. WebView 的使用示例

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

3.1 布局文件

放置一個占滿父布局的 WebView 在 ContentView 當中：

<?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>

這樣一來，后面整個頁面都會是 H5 頁面，就類似一個瀏覽器的效果。

3.2 WebView 加載頁面

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

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

運行之后你會發(fā)現(xiàn)我們的 App 會去打開本地瀏覽器，然后在瀏覽器中展示代碼中“慕課 Android 教程”的首頁，但是我們使用 WebView 的本意當然是希望在自己的 App 內(nèi)部嵌入一個頁面。
WebView 在 load 一個頁面之前，會去檢查有沒有相應的 WebViewClient，如果沒有則會向系統(tǒng)發(fā)起請求，進而打開本地的瀏覽器來加載頁面。所以如果不希望跳轉(zhuǎn)而在 App 內(nèi)部打開頁面，我們還需要創(chuàng)建一個 WebViewClient 對象，完整的 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) {
                  //頁面加載完成
        }

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

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

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

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

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

編譯運行之后，效果如下：

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

4. 小結(jié)

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