昊仔

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
Android开发之WebView应用

Android开发之WebView的使用

Android网路功能很强大，WebView组件支持直接加载网页，可以将其视为一个浏览器，要实现该功能，具体步骤如下

1、在布局文件中声明WebView

2、在Activity中实例化WebView

3、调用WebView的loadUrl()方法，加载指定的URL地址网页

4、为了让WebView能够响应超链接功能，调用setWebViewClient()方法，设置WebView客户端

5、如果访问的页面中有Javascript，则webview必须设置支持Javascript。webview.getSettings().setJavaScriptEnabled(true); 

6、为了让WebView支持回退功能，覆盖onKeyDown()方法

7、一定要注意：在AndroidManifest.xml文件中添加访问互联网的权限，否则不能显示

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

下面通过一个列子来详细讲解WebView的使用。先来看该项目的运行效果图：

    

                                          图（一）                                                                                                   图（二）

    

                                         图（三）                                                                                                 图（四）

                                        图（五）

图（一）：当运行该项目，首先显示的界面。在该界面中，我们加载了一个html网页。

图（二）：当单击第一个提交按钮显示的对话框，这是个Alert对话框。

图（三）：当单击第二个提交按钮显示的对话框，这是个confirm对话框。

图（四）：当单击第三个提交按钮显示的对话框，这是个prompt对话框。

图（五）：当我们在EditText输入百度网址时，显示的百度首页。

下面来讲解下开发该项目的全过程：

1、创建一个Android项目，命名为WebViewTest。

2、创建一个html页面，命名为Dialog.html,并放在assets目录下。具体代码如下：

[html] view plaincopy
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <title>无标题文档</title>  
  5. </head>  
  6.   
  7. <body>  
  8. <p>一下是三种对话框</p>  
  9. <p>警告、提醒对话框</p>  
  10. <input type="submit" name="Submit" value="提交"  onclick="a()">  
  11.   
  12. <p>带选择的对话框</p>  
  13. <input type="submit" name="Submit" value="提交"  onclick="b()">  
  14.   
  15. <p>要求用户输入的对话框</p>  
  16. <input type="submit" name="Submit" value="提交"  onclick="c()">  
  17.    
  18. <script language="javascript">  
  19. function a(){  
  20. alert("警告、提醒对话框")  
  21. }  
  22. function b(){  
  23. confirm("带选择的对话框")  
  24. }  
  25. function c(){  
  26. prompt("要求用户输入的对话框")  
  27. }  
  28. </script>  
  29. </body>  
  30. </html>  

在该页面中声明了三个按钮，分别用于javascript脚本显示三种不同的对话框。
3、在layout目录下，新建一个布局文件prom_dialog.xml，用于显示对话框。具体代码如下：

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:gravity="center_horizontal"  
  4.     android:orientation="vertical"  
  5.     android:layout_width="fill_parent"  
  6.     android:layout_height="wrap_content"  
  7.     >  
  8.     <TextView   
  9.     android:id="@+id/TextView_PROM"  
  10.         android:layout_width="fill_parent"  
  11.     android:layout_height="wrap_content"/>  
  12.     <EditText   
  13.     android:id="@+id/EditText_PROM"  
  14.     android:layout_width="fill_parent"  
  15.     android:layout_height="wrap_content"  
  16.     android:selectAllOnFocus="true"  
  17.     android:scrollHorizontally="true"/>  
  18. </LinearLayout>  

在该布局文件中声明了一个TextView和一个EditText，该布局文件是用于第三个对话框使用的。

4、修改主布局文件main.xml，其具体内容如下：

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     >  
  7.     <LinearLayout   
  8.         android:orientation="horizontal"  
  9.         android:layout_width="fill_parent"   
  10.         android:layout_height="fill_parent"   
  11.         android:animationCache="true"   
  12.         android:layout_weight="9">  
  13.         <EditText   
  14.             android:id="@+id/EditText01"   
  15.             android:layout_width="wrap_content"  
  16.             android:layout_weight="9"   
  17.             android:layout_height="wrap_content"   
  18.             android:text="请输入网址"/>  
  19.         <Button android:id="@+id/Button01"   
  20.             android:layout_width="wrap_content"  
  21.             android:layout_weight="1"   
  22.             android:layout_height="wrap_content"  
  23.             android:text="连接" />  
  24.     </LinearLayout>  
  25.     <WebView   
  26.     android:id="@+id/WebView01"   
  27.     android:layout_width="fill_parent"   
  28.     android:layout_height="fill_parent"       
  29.     android:layout_weight="1"  
  30.     />   
  31. </LinearLayout>  

5、修改主程序文件，用于显示各项操作，具体操作都有注解，在这里就不多说了。代码如下：

[html] view plaincopy
  1. public class Activity01 extends Activity{  
  2.     private final String DEBUG_TAG  = "Activity01";  
  3.     private Button      mButton;  
  4.     private EditText    mEditText;  
  5.     private WebView     mWebView;  
  6.     String url="file:///android_asset/Dialog.html";  
  7.     public void onCreate(Bundle savedInstanceState)  
  8.     {  
  9.         super.onCreate(savedInstanceState);  
  10.         setContentView(R.layout.main);  
  11.         mButton = (Button) findViewById(R.id.Button01);  
  12.         mEditText = (EditText) findViewById(R.id.EditText01);  
  13.         mWebView = (WebView) findViewById(R.id.WebView01);  
  14.         //设置支持JavaScript脚本  
  15.         WebSettings webSettings = mWebView.getSettings();    
  16.         webSettings.setJavaScriptEnabled(true);  
  17.         //设置可以访问文件  
  18.         webSettings.setAllowFileAccess(true);  
  19.         //设置支持缩放  
  20.         webSettings.setBuiltInZoomControls(true);  
  21.         mWebView.loadUrl(url);  
  22.         //设置WebViewClient  
  23.         mWebView.setWebViewClient(new WebViewClient()  
  24.         {     
  25.             public boolean shouldOverrideUrlLoading(WebView view, String url)   
  26.             {     
  27.                 view.loadUrl(url);     
  28.                 return true;     
  29.             }    
  30.             @Override  
  31.             public void onPageFinished(WebView view, String url)   
  32.             {  
  33.                 super.onPageFinished(view, url);  
  34.             }  
  35.             @Override  
  36.             public void onPageStarted(WebView view, String url, Bitmap favicon)   
  37.             {  
  38.                 super.onPageStarted(view, url, favicon);  
  39.             }  
  40.         });  
  41.         //设置WebChromeClient  
  42.         mWebView.setWebChromeClient(new WebChromeClient(){  
  43.             @Override  
  44.             //处理javascript中的alert  
  45.             public boolean onJsAlert(WebView view, String url, String message,  
  46.                     final JsResult result)   
  47.             {  
  48.                 //构建一个Builder来显示网页中的对话框  
  49.                 Builder builder = new Builder(Activity01.this);  
  50.                 builder.setTitle("提示对话框");  
  51.                 builder.setMessage(message);  
  52.                 builder.setPositiveButton(android.R.string.ok,  
  53.                         new AlertDialog.OnClickListener() {  
  54.                             public void onClick(DialogInterface dialog, int which) {  
  55.                                 //点击确定按钮之后,继续执行网页中的操作  
  56.                                 result.confirm();  
  57.                             }  
  58.                         });  
  59.                 builder.setCancelable(false);  
  60.                 builder.create();  
  61.                 builder.show();  
  62.                 return true;  
  63.             };  
  64.             //处理javascript中的confirm  
  65.             public boolean onJsConfirm(WebView view, String url, String message,  
  66.                     final JsResult result)   
  67.             {  
  68.                 Builder builder = new Builder(Activity01.this);  
  69.                 builder.setTitle("带选择的对话框");  
  70.                 builder.setMessage(message);  
  71.                 builder.setPositiveButton(android.R.string.ok,  
  72.                         new AlertDialog.OnClickListener() {  
  73.                             public void onClick(DialogInterface dialog, int which) {  
  74.                                 result.confirm();  
  75.                             }  
  76.                         });  
  77.                 builder.setNegativeButton(android.R.string.cancel,  
  78.                         new DialogInterface.OnClickListener() {  
  79.                             public void onClick(DialogInterface dialog, int which) {  
  80.                                 result.cancel();  
  81.                             }  
  82.                         });  
  83.                 builder.setCancelable(false);  
  84.                 builder.create();  
  85.                 builder.show();  
  86.                 return true;  
  87.             };  
  88.             //处理javascript中的prompt  
  89.             //message为网页中对话框的提示内  
  90.             //defaultValue在没有输入时，默认显示的内容  
  91.             public boolean onJsPrompt(WebView view, String url, String message,  
  92.                     String defaultValue, final JsPromptResult result) {  
  93.                 //自定义一个带输入的对话框由TextView和EditText构成  
  94.                 final LayoutInflater factory = LayoutInflater.from(Activity01.this);  
  95.                 final View dialogview = factory.inflate(R.layout.prom_dialog, null);  
  96.                 //设置TextView对应网页中的提示信息  
  97.                 ((TextView) dialogview.findViewById(R.id.TextView_PROM)).setText(message);  
  98.                 //设置EditText对应网页中的输入框  
  99.                 ((EditText) dialogview.findViewById(R.id.EditText_PROM)).setText(defaultValue);  
  100.                 Builder builder = new Builder(Activity01.this);  
  101.                 builder.setTitle("带输入的对话框");  
  102.                 builder.setView(dialogview);  
  103.                 builder.setPositiveButton(android.R.string.ok,  
  104.                         new AlertDialog.OnClickListener() {  
  105.                             public void onClick(DialogInterface dialog, int which) {  
  106.                                 //点击确定之后，取得输入的值，传给网页处理  
  107.                                 String value = ((EditText) dialogview.findViewById(R.id.EditText_PROM)).getText().toString();  
  108.                                 result.confirm(value);  
  109.                             }  
  110.                         });  
  111.                 builder.setNegativeButton(android.R.string.cancel,  
  112.                         new DialogInterface.OnClickListener() {  
  113.                             public void onClick(DialogInterface dialog, int which) {  
  114.                                 result.cancel();  
  115.                             }  
  116.                         });  
  117.                 builder.setOnCancelListener(new DialogInterface.OnCancelListener() {  
  118.                             public void onCancel(DialogInterface dialog) {  
  119.                                 result.cancel();  
  120.                             }  
  121.                         });  
  122.                 builder.show();  
  123.                 return true;  
  124.             };  
  125.             //设置网页加载的进度条  
  126.             public void onProgressChanged(WebView view, int newProgress)   
  127.             {  
  128.                 Activity01.this.getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress * 100);  
  129.                 super.onProgressChanged(view, newProgress);  
  130.             }  
  131.             //设置应用程序的标题title  
  132.             public void onReceivedTitle(WebView view, String title)   
  133.             {  
  134.                 Activity01.this.setTitle(title);  
  135.                 super.onReceivedTitle(view, title);  
  136.             }  
  137.         });  
  138.         //连接按钮事件监听  
  139.         mButton.setOnClickListener(new OnClickListener()  
  140.         {  
  141.             public void onClick(View v)  
  142.             {  
  143.                 try   
  144.                 {  
  145.                     //取得编辑框中我们输入的内容  
  146.                     String url = mEditText.getText().toString();  
  147.                     //判断输入的内容是不是网址  
  148.                     if ( URLUtil.isNetworkUrl(url) )  
  149.                     {    
  150.                         //装载网址  
  151.                         mWebView.loadUrl(url);  
  152.                     }  
  153.                     else  
  154.                     {  
  155.                         mEditText.setText("输入网址错误，请重新输入");  
  156.                     }  
  157.                 }  
  158.                 catch (Exception e)   
  159.                 {  
  160.                     Log.e(DEBUG_TAG, e.toString());  
  161.                 }  
  162.             }  
  163.         });  
  164.     }  
  165.     public boolean onKeyDown(int keyCode, KeyEvent event)  
  166.     {  
  167.         if ((keyCode == KeyEvent.KEYCODE_BACK) &&   
  168.              mWebView.canGoBack())  
  169.         {  
  170.             //返回前一个页面  
  171.             mWebView.goBack();  
  172.             return true;  
  173.         }  
  174.         return super.onKeyDown(keyCode, event);  
  175.     }    
  176. }  

6、别忘了在AndroidManifest.xml中添加"android.permission.INTERNET",否则会出Web page not available错误。

7、项目到此就开发完毕了。执行之，便会得到以上效果。

这里有几个知识点需要注意下： 

1)为了让WebView从apk文件中加载assets，Android SDK提供了一个schema，前缀为"file:///android_asset/"。WebView遇到这样的schema，就去当前包中的 assets目录中找内容。如上面的"file:///android_asset/Dialog.html"

2)在这里我们为Dialog添加了三种不同的对话框提示，在程序中，我们也使用了三种不同的javascript脚本处理了这三种不同的对话框。切忌，不同的对话框，有不同的函数进行相应的处理。

 

最后，我们总结下：

    1、添加权限：AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page not available错误。
    2、在要Activity中生成一个WebView组件：WebView webView = new WebView(this);
    3、设置WebView基本信息：
          如果访问的页面中有Javascript，则webview必须设置支持Javascript。
          webview.getSettings().setJavaScriptEnabled(true);  
          触摸焦点起作用
          requestFocus();
          取消滚动条
          this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);
    4、设置WevView要显示的网页：
          互联网用：webView.loadUrl("http://www.google.com"); 
          本地文件用：webView.loadUrl("file:///android_asset/XX.html");  本地文件存放在：assets文件中
    5、如果希望点击链接由自己处理，而不是新开Android的系统browser中响应该链接。
          给WebView添加一个事件监听对象（WebViewClient)      
        
          并重写其中的一些方法
                shouldOverrideUrlLoading：对网页中超链接按钮的响应。
                                          当按下某个连接时WebViewClient会调用这个方法，并传递参数：按下的url 
                onLoadResource   
                onPageStart  
                onPageFinish  
                onReceiveError
                onReceivedHttpAuthRequest
          

    6、如果用webview点链接看了很多页以后，如果不做任何处理，点击系统“Back”键，整个浏览器会调用finish()而结束自身，如果希望浏览的网页回退而不是退出浏览器，需要在当前Activity中处理并消费掉该Back事件。
       覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法。

  1.   public boolean onKeyDown(int keyCoder,KeyEvent event){
  2.                         if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){
  3.                                 webview.goBack();   //goBack()表示返回webView的上一页面
  5.                                 return true;
  6.                         }
  7.                         return false;
  8.                 }
posted on 2013-09-30 17:10  昊仔  阅读(386)  评论(0)  编辑  收藏  举报