Android--webView嵌套網頁

標籤：

webView嵌套網頁

因為某種原因，我們總是需要展示一些複雜的文本，Html.fromHtml()已經不能滿足我們的需求，比如後台可編輯的文本在最上層顯示起來比較吃力，所以為瞭解決一些複雜的文本顯示就需要用到WebView。

通過phongGap或者extjs jquery mobile等等的移動開發平台開發
其原理就是將一個用HTML5開發的程式通過各種平台打包成apk ios winPhone等等的平台的應用

WebView 主要調用三個方法：LoadUrl、LoadData、LoadDataWithBaseURL.
　　1、LoadUrl            直接載入網頁、圖片並顯示.（本地或是網路上的網頁、圖片、gif）
　　2、LoadData           顯示文字與圖片內容 （模擬器1.5、1.6）
　　3、LoadDataWithBase  顯示文字與圖片內容（支援多個模擬器版本）

1.WebView

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

這裡是要有網路許可權的

 

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

（1）anGoBack()                   判斷是否能夠從該網頁返回上一個開啟的網頁；

（2）getTitle()、getUrl()        獲得當前網頁的標題和URL路徑

（3）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的屬性和狀態的方法如下：

　　（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中進行顯示，而不是調用Android系統內建的瀏覽器進行訪問。

        webView.setWebViewClient(new WebViewClient() {            public boolean shouldOverrideUrlLoading(WebView view, String url) {                view.loadUrl(url);                //如果返回true用webView去開啟，為false調用系統瀏覽器或第三方瀏覽器。                return true;            }        });

 

 

我們可以通過WebView的setWebViewClient()方法，為WebView對象指定一個WebViewClient

        MyWebViewClient myWebViewClient = new MyWebViewClient();        mWebView.setWebViewClient(myWebViewClient);        private class MyWebViewClient extends WebViewClient {            //重寫父類方法，讓新開啟的網頁在當前的WebView中顯示            public boolean shouldOverrideUrlLoading(WebView view, String url) {                view.loadUrl(url);                return true;            }        }

可以看到，在如上的代碼中，我們通過在子類MyWebViewClient中重寫父類WebViewClient的shouldOverrideUrlLoading()方法，

在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);        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()方法，進行尋找。

     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所示的尋找結果。 

 

 

 

WebView in ScrollView

我們都知道ScrollView和WebView都有滾動的效果，所以我們需要先屏蔽WebView的滾動事件。

<ScrollView    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:descendantFocusability="blocksDescendants" >

中文亂碼

如果出現中文亂碼，你可以這樣設定

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

 

Auto Scale

這時候如果後端如果傳過來的不是完整的Html，而是只有body部分的內容，那麼我們就需要補充並添加一些css樣式來達到自適應的效果。

WebView webView = new WebView(this);webView.setWebViewClient(new SimpleWebViewClient(title));        webView.getSettings().setDefaultTextEncodingName("utf-8");if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {    webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);} else {     webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);}webView.loadData(getHtmlData(body), "text/html; charset=utf-8", "utf-8");

 

別忘了頭部的設定：

private String getHtmlData(String bodyHTML) {    String head = "<head>" +                "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"> " +                "<style>img{max-width: 100%; width:auto; height:auto;}</style>" +                "</head>";    return "<html>" + head + "<body>" + bodyHTML + "</body></html>";}

 

如何控制WebView的高度，沒想到WebView可以自己適應內容最長的高度。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Android--webView嵌套網頁