API Demos 2.3 學習筆記 (10)-- Views->WebView

WebView是一個專門用來顯示網頁的View子類。它使用WebKit渲染引擎來顯示網頁，並且支持包括前進，後退，放大，縮小，文本搜索等多種功能。

WebView有一個輔助類叫WebSettings，它管理WebView的設置狀態。該類的對象可以通過WebView.getSettings()方法獲得。下麵我們介紹幾個常用的WebSettings設置：

        //得到WebView對象
        WebView mWebView = (WebView) findViewById(R.id.wv1);
        
        //通過WebView得到WebSettings對象
        WebSettings mWebSettings = mWebView.getSettings();
        
        //設置支持Javascript的參數
        mWebSettings.setJavaScriptEnabled(true);

        //設置可以支持縮放
        mWebSettings.setSupportZoom(true);
        
        //設置出現縮放工具
        mWebSettings.setBuiltInZoomControls(true);

        //設置默認縮放方式尺寸是far
        mWebSettings.setDefaultZoom(WebSettings.ZoomDensity.FAR);

        //設置允許訪問文件數據
        mWebSettings.setAllowFileAccess(true);
        
        //設置是否保存密碼
        mWebSettings.setSavePassword(true);
         
        //設置網頁默認編碼
    mWebSettings.setDefaultTextEncodingName(encoding);

有關WebSettings更多的設置選項，請參考Android SDK的幫助文檔。
下麵我們結合實例，簡單介紹下通過WebView訪問網頁的三種常用方法：loadUrl、loadData以及loadDataWithBaseURL。

1、public void loadUrl(String url)
loadUrl方法很簡單，隻需要提供一個參數，即url地址，就可以進行自動加載。
該方法適用於加載網頁、網頁圖片、本地網頁以及本地圖片。具體參考如下：

        WebView wv = (WebView) findViewById(R.id.wv1);
        wv.requestFocus(); //請求焦點
        wv.getSettings().setJavaScriptEnabled(true); //設置是否支持JavaScript
        wv.getSettings().setSupportZoom(true); //設置是否支持縮放
        wv.getSettings().setBuiltInZoomControls(true); //設置是否顯示內建縮放工具
        wv.getSettings().setSavePassword(true); //設置是否保存密碼
        wv.loadUrl("https://www.baidu.com/");	//加載在線網頁
        wv.loadUrl("https://www.google.com/logos/2011/Googles_13th_Birthday-2011-hp.jpg"); //加載在線圖片 
        wv.loadUrl("file:///mnt/sdcard/Google.html"); //加載本地網頁(SD卡根目錄下)
        wv.loadUrl("file:///mnt/sdcard/Googles_13th_Birthday-2011-hp.jpg");  //加載本地圖片(SD卡根目錄下)

注：1、後麵四句包含“loadUrl”的語句分別對應加載在線網頁/在線圖片/本地網頁/本地圖片四中情況，每種情況下隻取其一。
2、對於sdcard中的本地網頁和圖片等資源，一般url地址以 “file:///mnt/sdcard/”開頭；
3、對於android項目中assets目錄下的本地網頁和圖片等資源，一般url地址以 “ file:///android_asset/ "開頭；

2、public void loadData(String data, String mimeType, String encoding)
loadData將指定的data加載到WebView中。由於本身機製的原因，該方法不能加載來自網絡的內容。其中，data內的html代碼中若含有以下四種字符'#', '%', '\', '?'，則應該依次替換為%23, %25, %27, %3f 。參數mimeType，即MIME Type，也就是該資源的媒體類型，可以取值text/html, image/jpeg等。參數 encoding為網頁編碼，可以取值utf-8, base64等。具體參考如下：

        final String mimeType = "text/html";   // image/jpeg  etc
        final String encoding = "utf-8";   //base64  etc
        String data = null;

        WebView wv = (WebView) findViewById(R.id.wv7);
        data = "<a href ='https://www.baidu.com/'>百度</a>";  //加載本地網頁Html代碼
        data = "loadData方法加載本地圖片<img src ='file:///mnt/sdcard/Googles_13th_Birthday-2011-hp.jpg' />";   //加載本地圖片(SD卡根目錄下)
        wv.requestFocus();
        wv.getSettings().setDefaultTextEncodingName(encoding);  //對於data中含有中文字符的，必須加上這個設置，否則會亂碼。
        wv.loadData(data, mimeType, encoding);

注：1、中間兩個data字段分別對應加載本地網頁代碼和本地圖片的情況；
2、經過實際操作，發現前麵文本超級鏈接的html代碼可以正常顯示。點擊超級鏈接，調用外部web瀏覽器打開鏈接。
3、經過實際操作，發現後麵的本地圖片其實加載不上來，無法顯示。
4、loadData方法中，如果data含有中文字符，則需要調用 setDefaultTextEncodingName方法來設置WebView的text指定編碼。詳情請點擊閱讀：《關於WebView的loadData方法》

3、public void loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)

loadDataWithBaseURL方法也是將指定的data加載到WebView中。由於本身機製的原因，該方法不能加載來自網絡的內容。參數mimeType，即MIME Type，也就是該資源的媒體類型，可以取值text/html, image/jpeg等。參數 encoding為網頁編碼，可以取值utf-8, base64等。參數baseUrl為基礎目錄，data中的文件路徑可以是相對於基礎目錄的相對目錄。例如：文件file:///mnt/sdcard/Googles_13th_Birthday-2011-hp.jpg，baseUrl為file:///mnt/sdcard/，那麼data中就可以直接引用圖片 Googles_13th_Birthday-2011-hp.jpg了。參數historyUrl用作曆史記錄的字段，可以設置為null。具體參考如下：

        final String mimeType = "text/html";   // image/jpeg  etc
        final String encoding = "utf-8";   //base64  etc

        String baseUrl = null;
        String data = null;
        
        WebView wv = (WebView) findViewById(R.id.wv9);
        baseUrl = "file:///mnt/sdcard/";   //網頁基礎目錄
        data = "<a href='Google.html'>穀歌</a>";  //加載本地網頁Html代碼(SD卡根目錄下)
        data = "<img src ='Googles_13th_Birthday-2011-hp.jpg' />";  //：加載本地圖片(SD卡根目錄下)
        wv.requestFocus();                
        wv.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, null);

注：中間兩個data字段分別對應加載本地網頁和本地圖片的情況。經過測試，網頁和本地圖片都能正常加載。

下麵我們進行實例代碼解析：
res-layout-webview_1.xml

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

<ScrollView xmlns:andro
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"
    android:orientation="vertical">
    
    <!--一個線性垂直布局，包含十個WebView對象 -->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        <WebView android:
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            />
            
        <WebView android:
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            />
            
        <WebView android:
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            />
            
        <WebView android:
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            />
            
        <WebView android:
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            />
            
        <WebView android:
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            />
    
        <WebView android:
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            />
            
        <WebView android:
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            />
            
        <WebView android:
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            />
            
        <WebView android:
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            />
    </LinearLayout>
        
 </ScrollView>

src-com.example.android.apis.view-WebView1.java

package com.example.android.apis.view;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

import com.example.android.apis.R;


/**
 *<pre>WebView組件(mWebView)有一個輔助類叫WebSettings，它管理WebView的設置狀態。
 *該對象可以通過WebView.getSettings()方法獲得。

 *得到WebSettings對象，設置支持Javascript的參數
 *mWebView.getSettings().setJavaScriptEnabled(true);

 *設置可以支持縮放
 *mWebView.getSettings().setSupportZoom(true);

 *設置默認縮放方式尺寸是far
 *mWebView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);

 *設置允許訪問文件數據
 *mWebView.getSettings().setAllowFileAccess(true);
 
 *設置是否保存密碼
 *mWebView.getSettings().setSavePassword(true);
  
 *設置網頁默認編碼
 *mWebView.getSettings().setDefaultTextEncodingName(encoding);
 
 *設置出現縮放工具
 *mWebView.getSettings().setBuiltInZoomControls(true);</pre>
 * 
 */
public class WebView1 extends Activity {
    
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        
        setContentView(R.layout.webview_1);
        
        final String mimeType = "text/html";   // image/jpeg  etc
        final String encoding = "utf-8";   //base64  etc

        WebView wv = null;
        String baseUrl = null;
        String data = null;

        //加載在線網頁
        wv = (WebView) findViewById(R.id.wv1);
        wv.requestFocus(); //請求焦點
        wv.getSettings().setJavaScriptEnabled(true); //設置是否支持JavaScript
        wv.getSettings().setSupportZoom(true); //設置是否支持縮放
        wv.getSettings().setBuiltInZoomControls(true); //設置是否顯示內建縮放工具
        wv.getSettings().setSavePassword(true); //設置是否保存密碼
        wv.loadUrl("https://www.baidu.com/");
        
        //加載在線圖片       
        wv = (WebView) findViewById(R.id.wv2);
        wv.requestFocus();        
        wv.loadUrl("https://www.google.com/logos/2011/Googles_13th_Birthday-2011-hp.jpg");
     
        //加載本地網頁(SD卡根目錄下)
        wv = (WebView) findViewById(R.id.wv3);
        wv.requestFocus();                
        wv.loadUrl("file:///mnt/sdcard/Google.html");
    
        //加載本地圖片(SD卡根目錄下)
        wv = (WebView) findViewById(R.id.wv4);
        wv.requestFocus();                
        wv.loadUrl("file:///mnt/sdcard/Googles_13th_Birthday-2011-hp.jpg");

        //加載在線網頁失敗，把網頁地址當作字符串處理
        wv = (WebView) findViewById(R.id.wv5);
        data = "https://www.baidu.com/";
        wv.requestFocus();                
        wv.loadData(data, mimeType, encoding);
       
        //加載在線圖片失敗，隻顯示一個默認圖片進行替換               
        wv = (WebView) findViewById(R.id.wv6);
        data = "https://www.google.com/logos/2011/Googles_13th_Birthday-2011-hp.jpg"; 
        wv.requestFocus();                
        wv.loadData(data, mimeType, encoding);

        //加載本地網頁Html代碼，可以顯示超級鏈接。點擊，調用外部瀏覽器打開該鏈接。
        wv = (WebView) findViewById(R.id.wv7);
        data = "<a href ='https://www.baidu.com/'>百度</a>";
        wv.requestFocus();
        wv.getSettings().setDefaultTextEncodingName(encoding);  //對於data中含有中文字符的，必須加上這個設置，否則會亂碼。
        wv.loadData(data, mimeType, encoding);
   
        //加載本地圖片(SD卡根目錄下)
        wv = (WebView) findViewById(R.id.wv8);
        data = "loadData方法加載本地圖片<img src ='file:///mnt/sdcard/Googles_13th_Birthday-2011-hp.jpg' />";
        wv.requestFocus();       
        wv.getSettings().setDefaultTextEncodingName(encoding); //對於data中含有中文字符的，必須加上這個設置，否則會亂碼。
        wv.loadData(data, mimeType, encoding);
        
        //loadDataWithBaseURL方法：加載本地網頁Html代碼(SD卡根目錄下)，可以顯示超級鏈接。點擊直接顯示本地網頁內容。
        wv = (WebView) findViewById(R.id.wv9);
        baseUrl = "file:///mnt/sdcard/";   //網頁基礎目錄
        data = "<a href='Google.html'>穀歌</a>";  //相對路徑，相對基礎目錄而言
        wv.requestFocus();                
        wv.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, null);
        
        //loadDataWithBaseURL方法：加載本地圖片(SD卡根目錄下)，默認直接顯示該圖片
        wv = (WebView) findViewById(R.id.wv10);
        baseUrl = "file:///mnt/sdcard/";  //網頁基礎目錄
        data = "<img src ='Googles_13th_Birthday-2011-hp.jpg' />";  //相對路徑，相對基礎目錄而言
        wv.requestFocus();                
        wv.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, null);         
    }
}

關於WebView更詳細的用法介紹，請點擊閱讀：《超好的webview學習資料》

預覽效果：

最後更新：2017-04-02 06:51:58

API Demos 2.3 學習筆記 (10)-- Views->WebView

上一篇： mysql不預讀數據庫信息(use dbname 更快，不會卡)—Reading table information for completion of table and column names

下一篇： Eclipse中編譯Android項目工程失敗，提示： Error in an XML file: aborting build 解決辦法

相關內容

熱門內容

最新內容

API Demos 2.3 學習筆記 (10)-- Views-&gt;WebView

上一篇： mysql不預讀數據庫信息(use dbname 更快，不會卡)—Reading table information for completion of table and column names

下一篇： Eclipse中編譯Android項目工程失敗，提示： Error in an XML file: aborting build 解決辦法

相關內容

熱門內容

最新內容

API Demos 2.3 學習筆記 (10)-- Views->WebView