您的位置:首页 > 移动开发

Android开发之WebView应用

2013-06-24 14:10 393 查看
 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

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

<title>无标题文档</title>  

</head>  

  

<body>  

<p>一下是三种对话框</p>  

<p>警告、提醒对话框</p>  

<input type="submit" name="Submit" value="提交"  onclick="a()">  

  

<p>带选择的对话框</p>  

<input type="submit" name="Submit" value="提交"  onclick="b()">  

  

<p>要求用户输入的对话框</p>  

<input type="submit" name="Submit" value="提交"  onclick="c()">  

   

<script language="javascript">  

function a(){  

alert("警告、提醒对话框")  

}  

function b(){  

confirm("带选择的对话框")  

}  

function c(){  

prompt("要求用户输入的对话框")  

}  

</script>  

</body>  

</html>  

在该页面中声明了三个按钮,分别用于javascript脚本显示三种不同的对话框。

3、在layout目录下,新建一个布局文件prom_dialog.xml,用于显示对话框。具体代码如下:

[html] view
plaincopy

<?xml version="1.0" encoding="utf-8"?>  

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  

    android:gravity="center_horizontal"  

    android:orientation="vertical"  

    android:layout_width="fill_parent"  

    android:layout_height="wrap_content"  

    >  

    <TextView   

    android:id="@+id/TextView_PROM"  

        android:layout_width="fill_parent"  

    android:layout_height="wrap_content"/>  

    <EditText   

    android:id="@+id/EditText_PROM"  

    android:layout_width="fill_parent"  

    android:layout_height="wrap_content"  

    android:selectAllOnFocus="true"  

    android:scrollHorizontally="true"/>  

</LinearLayout>  

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

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

[html] view
plaincopy

<?xml version="1.0" encoding="utf-8"?>  

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  

    android:orientation="vertical"  

    android:layout_width="fill_parent"  

    android:layout_height="fill_parent"  

    >  

    <LinearLayout   

        android:orientation="horizontal"  

        android:layout_width="fill_parent"   

        android:layout_height="fill_parent"   

        android:animationCache="true"   

        android:layout_weight="9">  

        <EditText   

            android:id="@+id/EditText01"   

            android:layout_width="wrap_content"  

            android:layout_weight="9"   

            android:layout_height="wrap_content"   

            android:text="请输入网址"/>  

        <Button android:id="@+id/Button01"   

            android:layout_width="wrap_content"  

            android:layout_weight="1"   

            android:layout_height="wrap_content"  

            android:text="连接" />  

    </LinearLayout>  

    <WebView   

    android:id="@+id/WebView01"   

    android:layout_width="fill_parent"   

    android:layout_height="fill_parent"       

    android:layout_weight="1"  

    />   

</LinearLayout>  

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

[html] view
plaincopy

public class Activity01 extends Activity{  

    private final String DEBUG_TAG  = "Activity01";  

    private Button      mButton;  

    private EditText    mEditText;  

    private WebView     mWebView;  

    String url="file:///android_asset/Dialog.html";  

    public void onCreate(Bundle savedInstanceState)  

    {  

        super.onCreate(savedInstanceState);  

        setContentView(R.layout.main);  

        mButton = (Button) findViewById(R.id.Button01);  

        mEditText = (EditText) findViewById(R.id.EditText01);  

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

        //设置支持JavaScript脚本  

        WebSettings webSettings = mWebView.getSettings();    

        webSettings.setJavaScriptEnabled(true);  

        //设置可以访问文件  

        webSettings.setAllowFileAccess(true);  

        //设置支持缩放  

        webSettings.setBuiltInZoomControls(true);  

        mWebView.loadUrl(url);  

        //设置WebViewClient  

        mWebView.setWebViewClient(new WebViewClient()  

        {     

            public boolean shouldOverrideUrlLoading(WebView view, String url)   

            {     

                view.loadUrl(url);     

                return true;     

            }    

            @Override  

            public void onPageFinished(WebView view, String url)   

            {  

                super.onPageFinished(view, url);  

            }  

            @Override  

            public void onPageStarted(WebView view, String url, Bitmap favicon)   

            {  

                super.onPageStarted(view, url, favicon);  

            }  

        });  

        //设置WebChromeClient  

        mWebView.setWebChromeClient(new WebChromeClient(){  

            @Override  

            //处理javascript中的alert  

            public boolean onJsAlert(WebView view, String url, String message,  

                    final JsResult result)   

            {  

                //构建一个Builder来显示网页中的对话框  

                Builder builder = new Builder(Activity01.this);  

                builder.setTitle("提示对话框");  

                builder.setMessage(message);  

                builder.setPositiveButton(android.R.string.ok,  

                        new AlertDialog.OnClickListener() {  

                            public void onClick(DialogInterface dialog, int which) {  

                                //点击确定按钮之后,继续执行网页中的操作  

                                result.confirm();  

                            }  

                        });  

                builder.setCancelable(false);  

                builder.create();  

                builder.show();  

                return true;  

            };  

            //处理javascript中的confirm  

            public boolean onJsConfirm(WebView view, String url, String message,  

                    final JsResult result)   

            {  

                Builder builder = new Builder(Activity01.this);  

                builder.setTitle("带选择的对话框");  

                builder.setMessage(message);  

                builder.setPositiveButton(android.R.string.ok,  

                        new AlertDialog.OnClickListener() {  

                            public void onClick(DialogInterface dialog, int which) {  

                                result.confirm();  

                            }  

                        });  

                builder.setNegativeButton(android.R.string.cancel,  

                        new DialogInterface.OnClickListener() {  

                            public void onClick(DialogInterface dialog, int which) {  

                                result.cancel();  

                            }  

                        });  

                builder.setCancelable(false);  

                builder.create();  

                builder.show();  

                return true;  

            };  

            //处理javascript中的prompt  

            //message为网页中对话框的提示内  

            //defaultValue在没有输入时,默认显示的内容  

            public boolean onJsPrompt(WebView view, String url, String message,  

                    String defaultValue, final JsPromptResult result) {  

                //自定义一个带输入的对话框由TextView和EditText构成  

                final LayoutInflater factory = LayoutInflater.from(Activity01.this);  

                final View dialogview = factory.inflate(R.layout.prom_dialog, null);  

                //设置TextView对应网页中的提示信息  

                ((TextView) dialogview.findViewById(R.id.TextView_PROM)).setText(message);  

                //设置EditText对应网页中的输入框  

                ((EditText) dialogview.findViewById(R.id.EditText_PROM)).setText(defaultValue);  

                Builder builder = new Builder(Activity01.this);  

                builder.setTitle("带输入的对话框");  

                builder.setView(dialogview);  

                builder.setPositiveButton(android.R.string.ok,  

                        new AlertDialog.OnClickListener() {  

                            public void onClick(DialogInterface dialog, int which) {  

                                //点击确定之后,取得输入的值,传给网页处理  

                                String value = ((EditText) dialogview.findViewById(R.id.EditText_PROM)).getText().toString();  

                                result.confirm(value);  

                            }  

                        });  

                builder.setNegativeButton(android.R.string.cancel,  

                        new DialogInterface.OnClickListener() {  

                            public void onClick(DialogInterface dialog, int which) {  

                                result.cancel();  

                            }  

                        });  

                builder.setOnCancelListener(new DialogInterface.OnCancelListener() {  

                            public void onCancel(DialogInterface dialog) {  

                                result.cancel();  

                            }  

                        });  

                builder.show();  

                return true;  

            };  

            //设置网页加载的进度条  

            public void onProgressChanged(WebView view, int newProgress)   

            {  

                Activity01.this.getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress * 100);  

                super.onProgressChanged(view, newProgress);  

            }  

            //设置应用程序的标题title  

            public void onReceivedTitle(WebView view, String title)   

            {  

                Activity01.this.setTitle(title);  

                super.onReceivedTitle(view, title);  

            }  

        });  

        //连接按钮事件监听  

        mButton.setOnClickListener(new OnClickListener()  

        {  

            public void onClick(View v)  

            {  

                try   

                {  

                    //取得编辑框中我们输入的内容  

                    String url = mEditText.getText().toString();  

                    //判断输入的内容是不是网址  

                    if ( URLUtil.isNetworkUrl(url) )  

                    {    

                        //装载网址  

                        mWebView.loadUrl(url);  

                    }  

                    else  

                    {  

                        mEditText.setText("输入网址错误,请重新输入");  

                    }  

                }  

                catch (Exception e)   

                {  

                    Log.e(DEBUG_TAG, e.toString());  

                }  

            }  

        });  

    }  

    public boolean onKeyDown(int keyCode, KeyEvent event)  

    {  

        if ((keyCode == KeyEvent.KEYCODE_BACK) &&   

             mWebView.canGoBack())  

        {  

            //返回前一个页面  

            mWebView.goBack();  

            return true;  

        }  

        return super.onKeyDown(keyCode, event);  

    }    

}  

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)方法。

  public boolean onKeyDown(int keyCoder,KeyEvent event){
                        if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){
                                webview.goBack();   //goBack()表示返回webView的上一页面

                                return true;
                        }
                        return false;
                }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: