Android学习指南之二十九:WebView使用详解
2012-09-16 21:55
801 查看
在智能移动设备上打开浏览器浏览网页是移动用户很经常的操作。本文就来讲解Android中一个可以进行网页显示的控件WebView。同Chrome和Safari一样,WebView的网页渲染引擎也是Webkit。
使用WebView控件进行Android互联网程序开发又如下优势:
1、可以打开远程网址、也可以加载本地Html数据。
2、可以搭建Java和Javascript交互桥梁。
3、WebView控件可以高度定制。
下面我们通过几个例子来共同学习WebView的使用方法。
一、先做一个例子热热身看看效果:通过WebView访问一个网站
1、先来一个简单的例子,新建一个项目Lesson29_WebView。
2、因为要访问互联网所以先在AndroidManifest.xml中设定权限:
二、WebSettings基础知识补充
1、先看一下WebView的继承关系,可以看到它不是在android.widget包中,而是在android.webkit包中。
2、WebSettings :WebView组件有一个辅助类叫WebSettings,它管理WebView的设置状态。该对象可以通过WebView.getSettings()方法获得。下面举几个例子来说明WebSettings的用法:
WebView调用assets目录下的本地网页和图片等资源非常方便,使用形如:
wv.loadUrl("XML文件中定义HTML的片段,也可以在assets目录中存放HTML文件,然后使用LoadData加载其中的内容,展示出来。下面我们使用第三部分的网页来演示一下如何使用LoadData方法,并且看看他们之间的区别。
1、新建项目Lesson29_WebView2
2、新建2个Html文件在assets/html下,内容略去,res/layout/main.xml的内容也略去了,相信对你来说已经不成问题。
3、MainWebView2.java 的内容如下:
对比上面的例子,我们可以看到两个明显的区别,其一,图片没加载出来,其二链接失效,点击后无法加载test1.html 。
五、两个和WebView相关的重要对象:WebChromeClient和WebViewClient
和WebView相关的辅助对象,除了WebSettings以外还有WebChromeClient和WebViewClient。
接下来的这个例子内容比较丰富,虽然注释比较清晰,但是您一次消化起来还是比较困难的,因此您需要的是一点点耐心,多看几遍,最重要的是自己至少敲代码敲一遍。
1、在上面的例子中继续增加内容,增加test3.html的内容:
启动起来时的画面:
点击第一个按钮,我们可以看到WebViewClient对象中定义的方法的确被调用了。
点击第二个按钮,我们看到加载的网页中有两个按钮,我们知道默认情况下Android会直接忽略掉由javascript弄出来的alert等弹出信息,除非我们在WebChromeClient中覆盖onJsAlert()方法和onJsConfirm()方法,让我们分别点击它们看看效果。
接下来我们再页面中跳转几次后,使用后退按钮,查看我们是否屏蔽了Activity默认的行为,结果当然是屏蔽了^_^,这一段代码没有留意的同学回去在看一下吧。
接下来我们把页面切换到这一个网页:
然后我们按下第三个保存图片的按钮,不出意外的话我们截取到了该页的完整图片,并把它保存到了sdcard中了。
好了,因为篇幅关系,我们关于WebView的功能也只能介绍到这里,关于WebView的其它功能我们在接下来的项目中会涉及到,到时候我们再一起学习,本讲就到这里吧,各位下次再见。
使用WebView控件进行Android互联网程序开发又如下优势:
1、可以打开远程网址、也可以加载本地Html数据。
2、可以搭建Java和Javascript交互桥梁。
3、WebView控件可以高度定制。
下面我们通过几个例子来共同学习WebView的使用方法。
一、先做一个例子热热身看看效果:通过WebView访问一个网站
1、先来一个简单的例子,新建一个项目Lesson29_WebView。
2、因为要访问互联网所以先在AndroidManifest.xml中设定权限:
package android.basic.lesson29; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.webkit.WebView; import android.widget.Button; import android.widget.EditText; public class MainWebView extends Activity { WebView mWebView; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //定义UI组件 mWebView = (WebView) findViewById(R.id.WebView01); Button b1 = (Button) findViewById(R.id.Button01); final EditText et = (EditText) findViewById(R.id.EditText01); //得到WebSetting对象,设置支持Javascript的参数 mWebView.getSettings().setJavaScriptEnabled(true); //载入URL mWebView.loadUrl("http://www.baidu.com"); //使页面获得焦点 mWebView.requestFocus(); //给按钮绑定单击监听器 b1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //访问编辑框中的网址 mWebView.loadUrl(et.getText().toString()); } }); } }运行程序,在编辑框中输入一个网址,点击Go按钮,就可以看到该网页显示,不过没有经过任何缩放处理,在接下里的例子我们继续研究,如何做更多的控制。
二、WebSettings基础知识补充
1、先看一下WebView的继承关系,可以看到它不是在android.widget包中,而是在android.webkit包中。
2、WebSettings :WebView组件有一个辅助类叫WebSettings,它管理WebView的设置状态。该对象可以通过WebView.getSettings()方法获得。下面举几个例子来说明WebSettings的用法:
//得到WebSettings对象,设置支持Javascript的参数 mWebView.getSettings().setJavaScriptEnabled(true); //设置可以支持缩放 mWebView.getSettings().setSupportZoom(true); //设置默认缩放方式尺寸是far mWebView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR); //设置出现缩放工具 mWebView.getSettings().setBuiltInZoomControls(true);三、加载assets目录下的本地网页
WebView调用assets目录下的本地网页和图片等资源非常方便,使用形如:
wv.loadUrl("XML文件中定义HTML的片段,也可以在assets目录中存放HTML文件,然后使用LoadData加载其中的内容,展示出来。下面我们使用第三部分的网页来演示一下如何使用LoadData方法,并且看看他们之间的区别。
1、新建项目Lesson29_WebView2
2、新建2个Html文件在assets/html下,内容略去,res/layout/main.xml的内容也略去了,相信对你来说已经不成问题。
3、MainWebView2.java 的内容如下:
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); //定义并绑定按钮单击监听器 b1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //加载URL assets目录下的内容可以用 "file:///android_asset" 前缀 wv.loadUrl("file:///android_asset/html/test1.html"); } }); //定义并绑定按钮单击监听器 b2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String data = ""; try { // 读取assets目录下的文件需要用到AssetManager对象的Open方法打开文件 InputStream is = getAssets().open("html/test2.html"); // loadData()方法需要的是一个字符串数据所以我们需要把文件转成字符串 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", ""); } }); } }4、运行程序单击第二个按钮,效果如下:
对比上面的例子,我们可以看到两个明显的区别,其一,图片没加载出来,其二链接失效,点击后无法加载test1.html 。
五、两个和WebView相关的重要对象:WebChromeClient和WebViewClient
和WebView相关的辅助对象,除了WebSettings以外还有WebChromeClient和WebViewClient。
接下来的这个例子内容比较丰富,虽然注释比较清晰,但是您一次消化起来还是比较困难的,因此您需要的是一点点耐心,多看几遍,最重要的是自己至少敲代码敲一遍。
1、在上面的例子中继续增加内容,增加test3.html的内容:
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); // 覆盖默认后退按钮的作用,替换成WebView里的查看历史页面 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; } }); // 设置支持Javascript wv.getSettings().setJavaScriptEnabled(true); // 定义并绑定按钮单击监听器 b1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 加载URL assets目录下的内容可以用 "file:///android_asset" 前缀 wv.loadUrl("file:///android_asset/html/test1.html"); } }); // 定义并绑定按钮单击监听器 b2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 加载URL assets目录下的内容可以用 "file:///android_asset" 前缀 wv.loadUrl("file:///android_asset/html/test3.html"); } }); // 定义并绑定按钮单击监听器 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(); } } } }); // 创建WebViewClient对象 WebViewClient wvc = new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { Toast.makeText(getApplicationContext(), "WebViewClient.shouldOverrideUrlLoading", Toast.LENGTH_SHORT) .show(); // 使用自己的WebView组件来响应Url加载事件,而不是使用默认浏览器器加载页面 wv.loadUrl(url); // 记得消耗掉这个事件。给不知道的朋友再解释一下,Android中返回True的意思就是到此为止吧,事件就会不会冒泡传递了,我们称之为消耗掉 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); } }; // 设置WebViewClient对象 wv.setWebViewClient(wvc); // 创建WebViewChromeClient WebChromeClient wvcc = new WebChromeClient() { // 处理Alert事件 @Override public boolean onJsAlert(WebView view, String url, String message, final JsResult result) { // 构建一个Builder来显示网页中的alert对话框 Builder builder = new Builder(MainWebView3.this); builder.setTitle("计算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()方法修改网页标题"); 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("删除确认"); 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) { // 看看默认的效果 return super.onJsPrompt(view, url, message, defaultValue, result); } }; // 设置setWebChromeClient对象 wv.setWebChromeClient(wvcc); } }3、运行程序,查看结果:
启动起来时的画面:
点击第一个按钮,我们可以看到WebViewClient对象中定义的方法的确被调用了。
点击第二个按钮,我们看到加载的网页中有两个按钮,我们知道默认情况下Android会直接忽略掉由javascript弄出来的alert等弹出信息,除非我们在WebChromeClient中覆盖onJsAlert()方法和onJsConfirm()方法,让我们分别点击它们看看效果。
接下来我们再页面中跳转几次后,使用后退按钮,查看我们是否屏蔽了Activity默认的行为,结果当然是屏蔽了^_^,这一段代码没有留意的同学回去在看一下吧。
接下来我们把页面切换到这一个网页:
然后我们按下第三个保存图片的按钮,不出意外的话我们截取到了该页的完整图片,并把它保存到了sdcard中了。
好了,因为篇幅关系,我们关于WebView的功能也只能介绍到这里,关于WebView的其它功能我们在接下来的项目中会涉及到,到时候我们再一起学习,本讲就到这里吧,各位下次再见。
相关文章推荐
- Android学习 - WebView组件的使用详解
- Android webview使用详解
- Android WebView使用详解包括js互调(by 星空武哥)
- Android WebView使用方法详解 附js交互调用方法
- Android学习之 WebView使用小结
- Android——WebView组件的使用详解
- Android——WebView组件的使用详解
- Android webview使用详解
- Android webview使用详解
- Android webview使用详解
- android开发之WebView使用(非详解)
- Android WebView使用详解包括js互调(by 星空武哥)
- Android开发_WebView组件使用详解_LoadUrl直接显示网页内容
- android 学习心得---webview使用得到网页加载时间
- Android webview使用详解
- Android WebView使用详解
- Android webview使用详解
- Android WebView使用详解
- Android ViewPager学习之 使用详解
- android清除WebView使用的缓存的学习记录