Android學習筆記50：使用WebView控件瀏覽網頁

　　在Android中，可以使用Webview控件來瀏覽網頁。通過使用該控件，我們可以自制一個簡單的瀏覽器，運行效果如圖1所示。

 圖1 運行效果

 

1.WebView

 　　在使用WebView控件時，首先需要在xml布局文件中定義一個WebView控件，定義的方法如下：

　　<WebView 
　　    android:id="@+id/webView"
　　    android:layout_width="match_parent"
　　    android:layout_height="match_parent"    />

 　　WebView中提供了很多方法，例如，我們可以使用canGoBack()方法判斷是否能夠從該網頁返回上一個打開的網頁；使用getTitle()和getUrl()方法獲得當前網頁的標題和URL路徑；使用loadUrl(String url)方法加載所要打開的網頁等等。如下的代碼通過使用loadUrl()方法在WebView控件中打開了百度主頁。

　　private WebView mWebView;
　　mWebView = (WebView)this.findViewById(R.id.webView);
　　mWebView.loadUrl("http://www.baidu.com/");

 

 2.WebSettings

 　　WebSettings用來設置WebView的屬性和狀態。WebSettings和WebView存在於同一個生命周期中，可以使用如下的方法獲得WebSettings對象。

　　WebSettings webSettings = mWebView.getSettings();

 　　在創建WebView時，系統會對WebView進行一些默認設置，當我們通過以上的方法得到WebSettings對象后，便可以從WebSettings對象中取出WebView的默認屬性和狀態了，當然了，我們也可以通過WebSettings對象對WebView的默認屬性和狀態進行設置。

　　WebSettings提供的一些常用的設置WebView的屬性和狀態的方法如下：

　　（1）setAllowFileAccess(boolean allow); 　　　　　　//設置啟用或禁止訪問文件數據

　　（2）setBuiltInZoomControls(boolean enabled); 　　//設置是否支持縮放

　　（3）setDefaultFontSize(int size);  　　　　　　　　  //設置默認的字體大小

　　（4）setJavaScriptEnabled(boolean flag); 　　　　　 //設置是否支持JavaScript

　　（5）setSupportZoom(boolean support); 　　　　　　//設置是否支持變焦

 

3.WebViewClient

　　WebViewClient主要用來輔助WebView處理各種通知、請求等事件。我們可以通過WebView的setWebViewClient()方法，為WebView對象指定一個WebViewClient，具體的實現方法如下所示：

　　MyWebViewClient myWebViewClient = new MyWebViewClient();
　　mWebView.setWebViewClient(myWebViewClient);
　　
    /*
     * Class　　：　　MyWebViewClient，用於輔助WebView，處理各種通知、請求等事件
     * Author 　:    博客園-依舊淡然
     */
    private class MyWebViewClient extends WebViewClient {
        
        //重寫父類方法，讓新打開的網頁在當前的WebView中顯示
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
        
    }

 　　可以看到，在如上的代碼中，我們通過在子類MyWebViewClient中重寫父類WebViewClient的shouldOverrideUrlLoading()方法，實現了讓新打開的網頁在當前的WebView中進行顯示，而不是調用Android系統自帶的瀏覽器進行訪問。

　　在WebViewClient中同樣提供了很多的方法，比如以下一些：

　　（1）doUpdateVisitedHistory(WebView view, String url, boolean isReload);　　　　　　　　   //更新歷史記錄

　　（2）onFormResubmission(WebView view, Message dontResend, Message resend);　　　　  //重新請求網頁數據

　　（3）onLoadResource(WebView view, String url);　　　　　　　　　　　　　　　　　　　　　　 //加載指定網址提供的資源

　　（4）onPageFinished(WebView view, String url);　　　　　　　　　　　　　　　　　　　　　　  //網頁加載完畢

　　（5）onPageStarted(WebView view, String url, Bitmap favicon);　　　　　　　　　　　　　　　//網頁開始加載

　　（6）onReceivedError(WebView view, int errorCode, String description, String failingUrl);　　//報告錯誤信息

 

4.WebChromeClient

　　WebChromeClient主要用來輔助WebView處理Javascript的對話框、網站圖標、網站標題以及網頁加載進度等。

　　同樣地，我們可以通過WebView的setWebChromeClient()方法，為WebView對象指定一個WebChromeClient。

　　在WebChromeClient中，當網頁的加載進度發生變化時，onProgressChanged(WebView view, int newProgress)方法會被調用；當網頁的圖標發生改變時，onReceivedIcon(WebView view, Bitmap icon)方法會被調用；當網頁的標題發生改變時，onReceivedTitle(WebView view, String title)方法會被調用。利用這些方法，我們便可以很容易的獲得網頁的加載進度、網頁的標題和圖標等信息了，正如下面的代碼所示：

    MyWebChromeClient myWebChromeClient = new MyWebChromeClient();
    mWebView.setWebChromeClient(myWebChromeClient);
    
　　/*
     * Class    ：   用於輔助WebView，處理JavaScript的對話框、網站圖標、網站標題、加載進度等
     * Author   :   博客園-依舊淡然
     */
    private class MyWebChromeClient extends WebChromeClient {
        
        //獲得網頁的加載進度，顯示在右上角的TextView控件中
        public void onProgressChanged(WebView view, int newProgress) {
            if(newProgress < 100) {
                String progress = newProgress + "%";
                mTextView_progress.setText(progress);
            } else {
                mTextView_progress.setText(" ");
            }
        }
        
        //獲得網頁的標題，作為應用程序的標題進行顯示
        public void onReceivedTitle(WebView view, String title) {
            MainActivity.this.setTitle(title);
        }
        
    }

 

5.WebView與Javascript

　　在WebView中不僅可以運行HTML代碼，更重要的是，WebView可以與Javascript互相調用。也就是說，在Javascript中可以獲取WebView的內容，與此同時，在WebView中也可以調用Javascript里面的方法。

　　下面就來說說如何在WebView中調用Javascript里面的方法。

　　這里，我使用了百度地圖的API接口（一份內嵌了Javascript的HTML文檔），在該接口中提供如下的Javascript方法：

    /*********************************/
    /*           查找地點            */
    /*********************************/
    var city = new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});   
    
    function findPlace(place)
    {
        city.search(place);
　　}

 　　我們要做的就是在WebView中調用findPlace()方法，完成地點的查找。在WebView中調用Javascript里面的方法是通過代碼WebView.loadUrl(“javascript:方法名()”)來實現的。如下的代碼，從EditText控件中獲得用戶想要查找的地名，然后調用了Javascript中的findPlace()方法，進行查找。

    /*
     * Function  :    點擊事件處理
     * Author    :    博客園-依舊淡然
     */
    public void onClick(View view) {
        switch(view.getId()) {
        case R.id.imagebutton_search:                    //查找地名
            String str = mEditText_input.getText().toString();
            String url = "javascript:findPlace('" + str + "')";
            mWebView.loadUrl(url);
            break;
        }
    }

 　　比如，我們對“圓明園”進行查找，可以看到如圖2所示的查找結果。 

 

 圖2 查找“圓明園”