第二十九講：WebView學(xué)習(xí)指南

Jcheng一霸 · 發(fā)表于 2013-8-28 16:26

>

點(diǎn)擊Go按鈕，可以看到本博客出現(xiàn)，不過(guò)沒(méi)有經(jīng)過(guò)任何縮放處理，在接下里的例子我們繼續(xù)研究，如何做更多的控制。

二、補(bǔ)充一點(diǎn)基礎(chǔ)知識(shí)：關(guān)于WebSettings

1、先看一下WebView的繼承關(guān)系，可以看到它不是在 android.widget包中，而是在android.webkit包中。

2、WebSettings ： WebView組件有一個(gè)輔助類叫WebSettings，它管理WebView的設(shè)置狀態(tài)。該對(duì)象可以通過(guò)WebView.getSettings()方法獲得。下面舉幾個(gè)例子來(lái)說(shuō)明WebSettings的用法：

//得到WebSettings對(duì)象，設(shè)置支持Javascript的參數(shù)

mWebView.getSettings().setJavaScriptEnabled(true);

//設(shè)置可以支持縮放

mWebView.getSettings().setSupportZoom(true);

//設(shè)置默認(rèn)縮放方式尺寸是far

mWebView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);

//設(shè)置出現(xiàn)縮放工具

mWebView.getSettings().setBuiltInZoomControls(true);

三、加載assets目錄下的本地網(wǎng)頁(yè)

WebView調(diào)用assets目錄下的本地網(wǎng)頁(yè)和圖片等資源非常方便，使用形如

wv.loadUrl("file:///android_asset/html/test1.html");

的調(diào)用方法即可，代碼在第四段落里。

在test1中點(diǎn)擊鏈接也可以跳轉(zhuǎn)到test2

四、使用 LoadData 方法加載內(nèi)容

可以在Java文件中或者XML文件中定義HTML的片段，也可以在assets目錄中存放HTML文件，然后使用LoadData加載其中的內(nèi)容，展示出來(lái)。下面我們使用第三部分的網(wǎng)頁(yè)來(lái)演示一下如何使用LoadData方法，并且看看他們之間的區(qū)別。

1、新建項(xiàng)目Lesson29_WebView2

2、新建2個(gè)Html文件在assets/html下，內(nèi)容略去，res/layout/main.xml的內(nèi)容也略去了，相信對(duì)你來(lái)說(shuō)已經(jīng)不成問(wèn)題。

3、MainWebView2.java 的內(nèi)容如下：

package android.basic.lesson29;

import java.io.IOException;
import java.io.InputStream;

import org.apache.http.util.ByteArrayBuffer;
import org.apache.http.util.EncodingUtils;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;

public class MainWebView2 extends Activity {
      /** Called when the activity is first created. */
      @Override
      public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);

            //定義UI組件
            Button b1 = (Button) findViewById(R.id.Button01);
            Button b2 = (Button) findViewById(R.id.Button02);

            final WebView wv = (WebView) findViewById(R.id.WebView01);

            //定義并綁定按鈕單擊監(jiān)聽(tīng)器
            b1.setOnClickListener(new View.OnClickListener() {
                     @Override
                     public void onClick(View v) {
                              //加載URL assets目錄下的內(nèi)容可以用 "file:///android_asset" 前綴
                              wv.loadUrl("file:///android_asset/html/test1.html");
                     }
            });

            //定義并綁定按鈕單擊監(jiān)聽(tīng)器
            b2.setOnClickListener(new View.OnClickListener() {
                     @Override
                     public void onClick(View v) {
                              String data = "";
                              try {
                                    // 讀取assets目錄下的文件需要用到AssetManager對(duì)象的Open方法打開(kāi)文件
                                    InputStream is = getAssets().open("html/test2.html");
                                    // loadData()方法需要的是一個(gè)字符串?dāng)?shù)據(jù)所以我們需要把文件轉(zhuǎn)成字符串
                                    ByteArrayBuffer baf = new ByteArrayBuffer(500);
                                    int count = 0;
                                    while ((count = is.read()) != -1) {
                                             baf.append(count);
                                    }
                                    data = EncodingUtils.getString(baf.toByteArray(), "utf-8");
                              } catch (IOException e) {
                                    e.printStackTrace();
                              }
                              // 下面兩種方法都可以加載成功
                              wv.loadData(data, "text/html", "utf-8");
                              // wv.loadDataWithBaseURL("", data, "text/html", "utf-8", "");
                     }
            });

      }
}

復(fù)制代碼

4、運(yùn)行程序單擊第二個(gè)按鈕，效果如下：
對(duì)比上面的例子，我們可以看到兩個(gè)明顯的區(qū)別，其一，圖片沒(méi)加載出來(lái)，其二鏈接失效，點(diǎn)擊后無(wú)法加載test1.html 。五、兩個(gè)和WebView相關(guān)的重要對(duì)象：WebChromeClient 和 WebViewClient和WebView相關(guān)的輔助對(duì)象，除了WebSettings以外還有WebChromeClient和WebViewClient。接下來(lái)的這個(gè)例子內(nèi)容比較豐富，雖然注釋比較清晰，但是您一次消化起來(lái)還是比較困難的，因此您需要的是一點(diǎn)點(diǎn)耐心，多看幾遍，最重要的是自己至少敲代碼敲一遍。1、在上面的例子中繼續(xù)增加內(nèi)容，增加 test3.html 的內(nèi)容：

   <script type="text/JavaScript">
   function alertFuction(){
   var a=1;
   var b=2
   alert(a+b);
   }
   function confirmFuction(){
      confirm("你確定要?jiǎng)h除嗎?")
   }

   </script>

對(duì)話框測(cè)試
<input onclick="alertFuction()" value="提醒對(duì)話框" type="button">
<input onclick="confirmFuction()" value="選擇對(duì)話框" type="button">

<a href="test1.html">上一頁(yè)</a>

復(fù)制代碼

2、MainWebView3.java的內(nèi)容，請(qǐng)注意注釋內(nèi)容：

package android.basic.lesson29;

import java.io.FileOutputStream;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.AlertDialog.Builder;
import android.content.DialogInterface;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Picture;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;

public class MainWebView3 extends Activity {

      /** Called when the activity is first created. */
      @Override
      public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);

            // 定義UI組件
            Button b1 = (Button) findViewById(R.id.Button01);
            Button b2 = (Button) findViewById(R.id.Button02);
            Button b3 = (Button) findViewById(R.id.Button03);

            final WebView wv = (WebView) findViewById(R.id.WebView01);

            // 覆蓋默認(rèn)后退按鈕的作用，替換成WebView里的查看歷史頁(yè)面
            wv.setOnKeyListener(new View.OnKeyListener() {

                     @Override
                     public boolean onKey(View v, int keyCode, KeyEvent event) {
                              if (event.getAction() == KeyEvent.ACTION_DOWN) {
                                    if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {
                                             wv.goBack();
                                             return true;
                                    }
                              }
                              return false;
                     }
            });

            // 設(shè)置支持Javascript
            wv.getSettings().setJavaScriptEnabled(true);

            // 定義并綁定按鈕單擊監(jiān)聽(tīng)器
            b1.setOnClickListener(new View.OnClickListener() {
                     @Override
                     public void onClick(View v) {
                              // 加載URL assets目錄下的內(nèi)容可以用 "file:///android_asset" 前綴
                              wv.loadUrl("file:///android_asset/html/test1.html");
                     }
            });

            // 定義并綁定按鈕單擊監(jiān)聽(tīng)器
            b2.setOnClickListener(new View.OnClickListener() {
                     @Override
                     public void onClick(View v) {
                              // 加載URL assets目錄下的內(nèi)容可以用 "file:///android_asset" 前綴
                              wv.loadUrl("file:///android_asset/html/test3.html");
                     }
            });

            // 定義并綁定按鈕單擊監(jiān)聽(tīng)器
            b3.setOnClickListener(new View.OnClickListener() {
                     @Override
                     public void onClick(View v) {
                              Picture pic = wv.capturePicture();
                              int width = pic.getWidth();
                              int height = pic.getHeight();
                              if (width > 0 && height > 0) {
                                    Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
                                    Canvas canvas = new Canvas(bmp);
                                    pic.draw(canvas);
                                    try {
                                             String fileName = "sdcard/" + System.currentTimeMillis() + ".png";
                                             FileOutputStream fos = new FileOutputStream(fileName);

                                             if (fos != null) {
                                                      bmp.compress(Bitmap.CompressFormat.PNG, 90, fos);
                                                      fos.close();
                                             }
                                             Toast.makeText(getApplicationContext(), "截圖成功，文件名是：" + fileName, Toast.LENGTH_SHORT).show();
                                    } catch (Exception e) {
                                             e.printStackTrace();
                                    }
                              }
                     }
            });

            // 創(chuàng)建WebViewClient對(duì)象
            WebViewClient wvc = new WebViewClient() {

                     @Override
                     public boolean shouldOverrideUrlLoading(WebView view, String url) {
                              Toast.makeText(getApplicationContext(), "WebViewClient.shouldOverrideUrlLoading", Toast.LENGTH_SHORT)
                                             .show();
                              // 使用自己的WebView組件來(lái)響應(yīng)Url加載事件，而不是使用默認(rèn)瀏覽器器加載頁(yè)面
                              wv.loadUrl(url);
                              // 記得消耗掉這個(gè)事件。給不知道的朋友再解釋一下，Android中返回True的意思就是到此為止吧,事件就會(huì)不會(huì)冒泡傳遞了，我們稱之為消耗掉
                              return true;
                     }

                     @Override
                     public void onPageStarted(WebView view, String url, Bitmap favicon) {
                              Toast.makeText(getApplicationContext(), "WebViewClient.onPageStarted", Toast.LENGTH_SHORT).show();
                              super.onPageStarted(view, url, favicon);
                     }

                     @Override
                     public void onPageFinished(WebView view, String url) {
                              Toast.makeText(getApplicationContext(), "WebViewClient.onPageFinished", Toast.LENGTH_SHORT).show();
                              super.onPageFinished(view, url);
                     }

                     @Override
                     public void onLoadResource(WebView view, String url) {
                              Toast.makeText(getApplicationContext(), "WebViewClient.onLoadResource", Toast.LENGTH_SHORT).show();
                              super.onLoadResource(view, url);
                     }

            };

            // 設(shè)置WebViewClient對(duì)象
            wv.setWebViewClient(wvc);

            // 創(chuàng)建WebViewChromeClient
            WebChromeClient wvcc = new WebChromeClient() {

                     // 處理Alert事件
                     @Override
                     public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                              // 構(gòu)建一個(gè)Builder來(lái)顯示網(wǎng)頁(yè)中的alert對(duì)話框
                              Builder builder = new Builder(MainWebView3.this);
                              builder.setTitle("計(jì)算1+2的值");
                              builder.setMessage(message);
                              builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
                                    @Override
                                    public void onClick(DialogInterface dialog, int which) {
                                             result.confirm();
                                    }
                              });
                              builder.setCancelable(false);
                              builder.create();
                              builder.show();
                              return true;
                     }

                     @Override
                     public void onReceivedTitle(WebView view, String title) {
                              MainWebView3.this.setTitle("可以用onReceivedTitle()方法修改網(wǎng)頁(yè)標(biāo)題");
                              super.onReceivedTitle(view, title);
                     }

                     // 處理Confirm事件
                     @Override
                     public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
                              Builder builder = new Builder(MainWebView3.this);
                              builder.setTitle("刪除確認(rèn)");
                              builder.setMessage(message);
                              builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {

                                    @Override
                                    public void onClick(DialogInterface dialog, int which) {
                                             result.confirm();
                                    }

                              });
                              builder.setNeutralButton(android.R.string.cancel, new AlertDialog.OnClickListener() {

                                    @Override
                                    public void onClick(DialogInterface dialog, int which) {
                                             result.cancel();
                                    }

                              });
                              builder.setCancelable(false);
                              builder.create();
                              builder.show();
                              return true;
                     }

                     // 處理提示事件
                     @Override
                     public boolean onJsPrompt(WebView view, String url, String message, String defaultValue,
                                    JsPromptResult result) {
                              // 看看默認(rèn)的效果
                              return super.onJsPrompt(view, url, message, defaultValue, result);
                     }
            };

            // 設(shè)置setWebChromeClient對(duì)象
            wv.setWebChromeClient(wvcc);
      }
}

復(fù)制代碼

  3、運(yùn)行程序，查看結(jié)果：

啟動(dòng)起來(lái)時(shí)的畫面

點(diǎn)擊第一個(gè)按鈕，我們可以看到WebViewClient對(duì)象中定義的方法的確被調(diào)用了。



點(diǎn)擊第二個(gè)按鈕，我們看到加載的網(wǎng)頁(yè)中有兩個(gè)按鈕，我們知道默認(rèn)情況下Android會(huì)直接忽略掉由javascript弄出來(lái)的alert等彈出信息，除非我們?cè)赪ebChromeClient中覆蓋onJsAlert()方法和onJsConfirm()方法，讓我們分別點(diǎn)擊它們看看效果。

› 智能家居 / NAS / 路由 / 開(kāi)發(fā) / 音響 › TV應(yīng)用開(kāi)發(fā)交流

第二十九講：WebView學(xué)習(xí)指南

第二十九講：WebView學(xué)習(xí)指南