網頁視圖：WebView

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

1. WebView 的基本定義

關于 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 的布局中展示一個網頁，但是相比一個瀏覽器而言，它會缺少很多特性和功能，所以只是在我們希望增強 UI，或者配置選項等場景下使用。它可以實現在 App 中內嵌一個 H5，讓我們的功能和交互方式更加豐富。
相信即使你沒開發過 WebView，作為用戶你也一定使用過。

2. WebView 的優勢

其實在之前學過的 textView 中，就有一個fromHtml()方法，他可以解析 HTML 文本并將內容渲染到 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://www.xianlaiwan.cn/wiki/androidlesson");

運行之后你會發現我們的 App 會去打開本地瀏覽器，然后在瀏覽器中展示代碼中“慕課 Android 教程”的首頁，但是我們使用 WebView 的本意當然是希望在自己的 App 內部嵌入一個頁面。
WebView 在 load 一個頁面之前，會去檢查有沒有相應的 WebViewClient，如果沒有則會向系統發起請求，進而打開本地的瀏覽器來加載頁面。所以如果不希望跳轉而在 App 內部打開頁面，我們還需要創建一個 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://www.xianlaiwan.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 是網絡資源，所以一定記得要在 Manifest 中加入網絡權限申請：

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

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

這樣就可以在 App 內部打開一個 H5 頁面了。

4. 小結

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