天天看點

Android WebView使用精解(一)



       Android開發中經常會需要在自己的app中嵌入浏覽網頁的功能,android sdk提供了具備網頁浏覽功能的控件-----WebView。接下來就詳細的講解WebView的使用。

  1. WebView簡介。

以下是官方api中的簡介:

A View that displays web pages. This class is the basis upon whichyou can roll your own web browser or simply display some online content withinyour Activity. It uses the WebKit rendering engine to display web pages andincludes methods to navigate forward and backward through a history, zoom inand out, perform text searches and more.

大意是:WebView是一個用來展示網頁的view,它使用Webkit渲染引擎渲染網頁内容,并且包含通過曆史記錄導航前進或後退的、放大或縮小網頁、搜尋文字等常見的浏覽器方法。

  1. 權限

使用WebView通常需要通路網絡,當然也可以加載本地資源,但更多的情

況是加載線上網頁,是以需要添加使用網絡的權限,在androidmanifest.xml的application标簽外加上如下的權限:

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

  1. 基本使用
  1. 添加到布局,有兩種方式将WebView添加到布局中
  1. 像其他的控件一樣,在布局檔案中添加

Xml檔案中:

<RelativeLayoutxmlns: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="${relativePackage}.${activityClass}" >

   <WebView

       android:id="@+id/webview"

       android:layout_width="match_parent"

       android:layout_height="match_parent" />

</RelativeLayout>

Activity中:

public class MainActivity extends Activity{

privateWebView mWebView;

@Override

protectedvoid onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mWebView=(WebView)findViewById(R.id.webview);

}

}

  1. 在Java代碼中使用

public class MainActivity extends Activity{

privateWebView mWebView;

@Override

protectedvoid onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        mWebView=newWebView(this);

        setContentView(mWebView);

}

}

       以上兩種方式都能在頁面布局中加入一個占滿整個activity的WebViewm,推薦使用第一種方式,使用起來更靈活。

  1. WebView加載資源。WebView可以加載三種類型的資源,如下:
  1. 網絡資源:

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

  2. assets路徑下的網頁

mWebView.loadUrl("file:///android_asset/index.html");

index.html是工程assets檔案夾下的一個網頁檔案。

  1. 本地網頁

mWebView.loadUrl("file:///本地路徑/index.html");

index.html存放在手機sd卡中

       注:點選網頁中的連結有可能會拉起手機的浏覽器,如果需要在WebView中展示連結的網頁,需要做如下設定:

mWebView.setWebViewClient(newWebViewClient(){

                     @Override

                     publicboolean shouldOverrideUrlLoading(WebView view, String url) {

                            view.loadUrl(url);

                            returntrue;

                     }

              });

  1. 進階功能
  1. 支援javascript
  1. 設定WebView支援javascript:

WebSettings settings = mWebView.getSettings();

settings.setJavaScriptEnabled(true);  //允許運作javascript

settings.setJavaScriptCanOpenWindowsAutomatically(true); //運作javascript建立視窗

  1. 向WebView注入java對象

    mWebView.addJavascriptInterface(new JSInterface(),"jsInterface");

    JSInterface定義如下:

private class JSInterface{

              public String getName() {

                     return "hello";

              }

}

網頁中javascript可以通過”别名.方法名(參數清單)”方式調用接口對象的方法,如

var name=jsinterface.getName();

alert(name);

  1. 注意事項

    2中的JSInterface在4.2以下系統中可以運作,但如此存在安全隐患,在4.2系統以上,google要求作為js接口的方法需要加上标注@JavascriptInterface,如下

private class JSInterface{

              @JavascriptInterface

              public String getName() {

                     return "hello";

              }

}

否則js中無法調用相關方法。

  1. 曆史導航

//根據曆史記錄是否可以傳回上一個頁面

              mWebView.canGoBack();

              //根據曆史記錄是否可以前進到下一個頁面

              mWebView.canGoForward();

              //根據曆史記錄是否可以前進或後退相應的步數,負數後退,正數前進

              mWebView.canGoBackOrForward(1);

              //根據曆史記錄後退到上一個頁面

              mWebView.goBack();

              //根據曆史記錄前進到下一個頁面

              mWebView.goForward();

              //根據曆史記錄前進或後退到相應的頁面

              mWebView.goBackOrForward(1);

  1. 縮放。設定允許縮放:

settings.setSupportZoom(true);

settings.setBuiltInZoomControls(true);

  1. 緩存

    settings.setCacheMode(mode);

    參數mode是整型值:LOAD_DEFAULT、 LOAD_CACHE_ELSE_NETWORK, LOAD_NO_CACHE 、 LOAD_CACHE_ONLY之一;

    LOAD_DEFAULT:如果有緩存且為過期,則加載緩存内容,否則加載網絡内容

    LOAD_CACHE_ELSE_NETWORK:如果有緩存,不管是否過期都加載緩存,否則加載網絡内容

    LOAD_NO_CACHE:不加在緩存,隻加載網絡内容

    LOAD_CACHE_ONLY:不加在網絡内容,隻加載緩存資源

  2. 兩個相關的輔助類
  1. WebViewClient,此類與網頁加載的各個階段過程相關,如網頁開始加載、網頁加載進度、網頁加載結束等,使用如下

mWebView.setWebViewClient(newWebViewClient());

可以覆寫其中相關回調執行相應的邏輯,如

//網頁開始加載時回調

onPageStarted(WebViewview, String url, Bitmap favicon)

//網頁加載完成時回調

onPageFinished(WebViewview, String url)

//加載錯誤是回調

onReceivedError(WebViewview, WebResourceRequest request, WebResourceError error)

//通知app即将加載新的url,app可以接管此url加載的操作,如果app不接管,預設行為是拉起手機浏覽器加載此url,是以如果需要webview加載網頁内容,則需要覆寫此回調方法,如三、2、所述

shouldOverrideUrlLoading(WebViewview, String url)

  1. WebChromeClient,此類與網頁渲染相關,如擷取到網頁标題、擷取到網頁圖示、js彈窗等

    有些同學發現設定了

settings.setJavaScriptEnabled(true);  //允許運作javascript

settings.setJavaScriptCanOpenWindowsAutomatically(true); //運作

在網頁中執行alert()函數無法彈出警告框,那是因為沒有設定此輔助類,需要做如下設定

mWebView.setWebChromeClient(new WebChromeClient());

還可以覆寫此類的相關回調方法,在網頁ui更新或者開始渲染時執行相關邏輯,如

//網頁标題變化時回調

onReceivedTitle(WebView view, String title)

//網頁圖示變化時回調

onReceivedIcon(WebView view, Bitmap icon)

//網頁加載進度變化時回調

onProgressChanged(WebView view, int newProgress)