Android使用WebView加載網頁及數據

今天主要介紹一下Android的一個原生組件-WebView。
在Api中關於這個類的介紹大致就是這是一個可以顯示網頁的視圖，如：

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

顯示結果：

還可以加載一些html的字符串，如：<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> String str = " You scored 192 points."; webView.loadData(str, "text/html", null);

顯示結果：

通過這個組件可以在你的Activity中顯示網頁或者跳轉到浏覽器上顯示網頁。上方的例子顯示的是跳轉到手機浏覽器上顯示百度界面。在下方WebView的方法介紹中我們會使用WebView的方法限制網頁顯示在當前Activity上。

下面讓我們stepBystep的演示一下WebView的使用。
一、加載網頁

1.WebView用來顯示網頁，使用必須時刻注意我們需要添加網絡權限

2.在XML布局中添加WebView標簽並在Activity中實例化

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

3.之後我們就可以通過WebView的loadUrl的方法加載一個網頁

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

4.但是這樣加載的網頁會跳轉到手機浏覽器，如何限制網頁顯示在當前Activity中，需要設置其浏覽器模式為false
添加代碼如下：

webView = (WebView) findViewById(R.id.main_webview);
// 設置WebView的客戶端
webView.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
    return false;// 返回false
    }
});
webView.loadUrl("http://www.baidu.com/");

顯示的效果：

這樣就簡單的加載了一個網頁。
WebView還提供了一個抽象類WebSettings來設置其所顯示網頁的一些基本內容，實例化的方式通過WebView對象的get方法獲取

WebSettings webSettings = webView.getSettings();

通過這個類可以設置WebView顯示網頁的一系列屬性
為了查看屬性是否生效我特意將WebView顯示的網頁更換了一下，換成了我們公司的網址，先來看一下不設置一系列屬性時顯示的網頁樣式，可以看出界面明顯不和手機屏幕適配，很差的用戶體驗

之後我通過WebSettings類設置了顯示出網頁的一系列屬性

    WebSettings webSettings = webView.getSettings();
        // 讓WebView能夠執行javaScript
        webSettings.setJavaScriptEnabled(true);
        // 讓JavaScript可以自動打開windows
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        // 設置緩存
        webSettings.setAppCacheEnabled(true);
        // 設置緩存模式,一共有四種模式
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        // 設置緩存路徑
//        webSettings.setAppCachePath("");
        // 支持縮放(適配到當前屏幕)
        webSettings.setSupportZoom(true);
        // 將圖片調整到合適的大小
        webSettings.setUseWideViewPort(true);
        // 支持內容重新布局,一共有四種方式
        // 默認的是NARROW_COLUMNS
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        // 設置可以被顯示的屏幕控制
        webSettings.setDisplayZoomControls(true);
        // 設置默認字體大小
        webSettings.setDefaultFontSize(12);

設置完成之後在看一下運行效果：

全部代碼：
清單文件：最重要的是不要忘記添加網絡權限

布局文件

Activity

package com.wu.webviewdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.main_webview);

        // 設置WebView的客戶端
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return false;// 返回false
            }
        });

        WebSettings webSettings = webView.getSettings();
        // 讓WebView能夠執行javaScript
        webSettings.setJavaScriptEnabled(true);
        // 讓JavaScript可以自動打開windows
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        // 設置緩存
        webSettings.setAppCacheEnabled(true);
        // 設置緩存模式,一共有四種模式
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        // 設置緩存路徑
//        webSettings.setAppCachePath("");
        // 支持縮放(適配到當前屏幕)
        webSettings.setSupportZoom(true);
        // 將圖片調整到合適的大小
        webSettings.setUseWideViewPort(true);
        // 支持內容重新布局,一共有四種方式
        // 默認的是NARROW_COLUMNS
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        // 設置可以被顯示的屏幕控制
        webSettings.setDisplayZoomControls(true);
        // 設置默認字體大小
        webSettings.setDefaultFontSize(12);

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

    }

}

二、加載html字符串

在一些Android開發中會遇到這樣一種情況，顯示詳情頁不是一些簡單的文字，也不是簡單的網頁，而是通過接口為我們提供html寫好的數據，遇到這種數據我們通常采用的方式是通過WebView加載，這就使用到了WebView的另一個方法

public void loadData(String data, String mimeType, String encoding)

1.首先看一下html的string是什麼樣的，為了加強說服力並且貼合實際，就沒有自己制造字符串（如開篇例子）而是扒了一段網易新聞的內容（老郭和他徒弟的新聞，本人還是很喜歡聽郭老師的相聲的，畢竟喝酒燙頭）

private String body = "

　　網易娛樂專稿9月7日報道(文/小易)" + " 今日凌晨，郭德綱鶴字輩徒弟在微博發文對德雲社表忠心，稱自己之前在外私自接活，離開德雲社，" + "因羞愧兩年沒有師父郭德綱與師娘聯系，本應該被清出師門，但承蒙師父郭德綱不離不棄。" + "隨後，郭德綱轉發該微博並附文“知錯能改善莫大焉”。加上前幾天曹雲金與何雲偉撕郭德綱內幕一事，" + "本應告一段落的郭德綱與徒弟的各種糾紛若如此下去，恐難徹底收場。

　　韓鶴曉微博原文：" + "

　　2006年考入鶴字科取名鶴曉，2009年6月13日恩師郭德綱先生收我為郭門弟子。" + "數年期間吃、住、學藝在德雲基地，師父師娘分文未取。2010年結婚師父師娘給我和愛人贈送了紅包與婚戒，" + "並在德雲基地給我們提供了婚房。2014年9月，我由於個人原因，私自赴外地發展。後來返京羞於面對恩師，" + "兩年未敢與恩師見面。後到上海發展，2016年6月師父上海演出期間，終於鼓起勇氣向師父認錯，" + "師父寬宏大量原諒了我。時隔兩月回京之際，專程上家中看望師娘，並求得了原諒。以鶴曉所犯之錯，" + "本足可導致“清門”，重修德雲家譜之際，蒙恩師不棄，給於“暫留察看”實乃對徒兒網開一面。" + "罪徒鶴曉感念恩師授業之恩、不棄之情。鶴曉雖距京城數千之遙，定當永遠心系德雲。" + "未敢忘卻恩師之諄諄教導，踏實做藝、好好做人!唯願師父師娘身體安泰!徒兒鶴曉頓首遙拜！

2.設置一下默認的字符編碼，Android中普遍使用UTF-8

WebSettings webSettings = webView.getSettings();
webSettings.setDefaultTextEncodingName("UTF-8");

3.之後調用WebView的loadData方法

webView.loadData(body, "text/html; charset=UTF-8", null);

顯示效果如下：

下面是全部代碼，布局繼續使用（一、加載網頁）的，代碼部分也沒有太大的更改，具體如下：

package com.wu.webviewdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    private String body = "
　　網易娛樂專稿9月7日報道(文/小易)" + " 今日凌晨，郭德綱鶴字輩徒弟在微博發文對德雲社表忠心，稱自己之前在外私自接活，離開德雲社，" + "因羞愧兩年沒有師父郭德綱與師娘聯系，本應該被清出師門，但承蒙師父郭德綱不離不棄。" + "隨後，郭德綱轉發該微博並附文“知錯能改善莫大焉”。加上前幾天曹雲金與何雲偉撕郭德綱內幕一事，" + "本應告一段落的郭德綱與徒弟的各種糾紛若如此下去，恐難徹底收場。

　　韓鶴曉微博原文：" + "

　　2006年考入鶴字科取名鶴曉，2009年6月13日恩師郭德綱先生收我為郭門弟子。" + "數年期間吃、住、學藝在德雲基地，師父師娘分文未取。2010年結婚師父師娘給我和愛人贈送了紅包與婚戒，" + "並在德雲基地給我們提供了婚房。2014年9月，我由於個人原因，私自赴外地發展。後來返京羞於面對恩師，" + "兩年未敢與恩師見面。後到上海發展，2016年6月師父上海演出期間，終於鼓起勇氣向師父認錯，" + "師父寬宏大量原諒了我。時隔兩月回京之際，專程上家中看望師娘，並求得了原諒。以鶴曉所犯之錯，" + "本足可導致“清門”，重修德雲家譜之際，蒙恩師不棄，給於“暫留察看”實乃對徒兒網開一面。" + "罪徒鶴曉感念恩師授業之恩、不棄之情。鶴曉雖距京城數千之遙，定當永遠心系德雲。" + "未敢忘卻恩師之諄諄教導，踏實做藝、好好做人!唯願師父師娘身體安泰!徒兒鶴曉頓首遙拜！

"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = (WebView) findViewById(R.id.main_webview); WebSettings webSettings = webView.getSettings(); webSettings.setDefaultTextEncodingName("UTF-8"); webView.loadData(body, "text/html; charset=UTF-8", null); } }

三、改進之處：如何加載html數據帶有文字和圖片的組合，例如在html組成的字符串中穿插出現圖片，而且個數和位置還不一致。目前已經有解決方案，敬請期待之後的博客：圖文混排。