本文详细介绍如何在Android应用中定制WebView，包括基本使用方法、注意事项及具体实现步骤。通过自定义ProgressWebView，实现了加载进度显示、页面缩放等功能。
一.概览：
Android WebView在Android平台上是一个特殊的View， 他能用来显示网页，这个类可以被用来在你的app中仅仅显示一张在线的网页，还可以用来开发浏览器。WebView内部实现是采用渲染引擎来展示view的内容，提供网页前进后退，网页放大，缩小，搜索，在Android 4.3系统及其已下WebView内部采用Webkit渲染引擎，在Android 4.4采用chromium 渲染引擎来渲染View的内容。
二.WebView的基本使用(创建 webview 大致可以分为一下两种方式)
（1）创建WebView的实例加入到Activity view tree中
- WebView webview = new WebView(this);
- setContentView(webview); （2）在xml中配置WebView
（2）在xml中配置WebView
<Webview
android:layout_width="match_parent"
android:layout_height="match_parent" >
</Webview>
三.注意事项
- 打开网页时不调用系统浏览器， 而是在本WebView中显示：
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
- 按返回键时， 不退出程序而是返回上一浏览页面：
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
mWebView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
mWebView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
- 打开页面时， 自适应屏幕：
WebSettings webSettings = mWebView .getSettings(); webSettings.setUseWideViewPort(true);//设置此属性，可任意比例缩放 webSettings.setLoadWithOverviewMode(true);
- 页面支持缩放：
WebSettings webSettings = mWebView .getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setBuiltInZoomControls(true); webSettings.setSupportZoom(true);
- 如果webView中需要用户手动输入用户名、密码或其他，则webview必须设置支持获取手势焦点。
webview.requestFocusFromTouch();
- WebView 加载界面主要调用三个方法：LoadUrl、LoadData、LoadDataWithBaseURL.
1、LoadUrl 直接加载网页、图片并显示.（本地或是网络上的网页、图片、gif）
2、LoadData 显示文字与图片内容
3、LoadDataWithBase 显示文字与图片内容
- WebSettings 的常用方法介绍
setPluginsEnabled(true); //支持插件
setUseWideViewPort(false); //将图片调整到适合webview的大小
setSupportZoom(true); //支持缩放
setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); //支持内容重新布局
supportMultipleWindows(); //多窗口
setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存
setAllowFileAccess(true); //设置可以访问文件
setNeedInitialFocus(true); //当webview调用requestFocus时为webview设置节点
webview webSettings.setBuiltInZoomControls(true); //设置支持缩放
setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
setLoadWithOverviewMode(true); // 缩放至屏幕的大小
setLoadsImagesAutomatically(true); //支持自动加载图片
- WebViewClient 的方法全解
doUpdateVisitedHistory(WebView view, String url, boolean isReload) //(更新历史记录)
onFormResubmission(WebView view, Message dontResend, Message resend) //(应用程序重新请求网页数据)
onLoadResource(WebView view, String url) // 在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。
onPageStarted(WebView view, String url, Bitmap favicon) //这个事件就是开始载入页面调用的，通常我们可以在这设定一个loading的页面，告诉用户程序在等待网络响应。
onPageFinished(WebView view, String url) //在页面加载结束时调用。同样道理，我们知道一个页面载入完成，于是我们可以关闭loading 条，切换程序动作。
onReceivedError(WebView view, int errorCode, String description, String failingUrl)// (报告错误信息)
onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host,String realm)//（获取返回信息授权请求）
onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) //重写此方法可以让webview处理https请求。
onScaleChanged(WebView view, float oldScale, float newScale) // (WebView发生改变时调用)
onUnhandledKeyEvent(WebView view, KeyEvent event) //（Key事件未被加载时调用）
shouldOverrideKeyEvent(WebView view, KeyEvent event)//重写此方法才能够处理在浏览器中的按键事件。
shouldOverrideUrlLoading(WebView view, String url)
//在点击请求的是链接是才会调用，重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边。这个函数我们可以做很多操作，比如我们读取到某些特殊的URL，于是就可以不打开地址，取消这个操作，进行预先定义的其他操作，这对一个程序是非常必要的。
onFormResubmission(WebView view, Message dontResend, Message resend) //(应用程序重新请求网页数据)
onLoadResource(WebView view, String url) // 在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。
onPageStarted(WebView view, String url, Bitmap favicon) //这个事件就是开始载入页面调用的，通常我们可以在这设定一个loading的页面，告诉用户程序在等待网络响应。
onPageFinished(WebView view, String url) //在页面加载结束时调用。同样道理，我们知道一个页面载入完成，于是我们可以关闭loading 条，切换程序动作。
onReceivedError(WebView view, int errorCode, String description, String failingUrl)// (报告错误信息)
onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host,String realm)//（获取返回信息授权请求）
onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) //重写此方法可以让webview处理https请求。
onScaleChanged(WebView view, float oldScale, float newScale) // (WebView发生改变时调用)
onUnhandledKeyEvent(WebView view, KeyEvent event) //（Key事件未被加载时调用）
shouldOverrideKeyEvent(WebView view, KeyEvent event)//重写此方法才能够处理在浏览器中的按键事件。
shouldOverrideUrlLoading(WebView view, String url)
//在点击请求的是链接是才会调用，重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边。这个函数我们可以做很多操作，比如我们读取到某些特殊的URL，于是就可以不打开地址，取消这个操作，进行预先定义的其他操作，这对一个程序是非常必要的。
四.具体操作
预览如下图所示：
- 首先我们来自定义一个带进度条的WebView,名字为ProgressWebView：
public class ProgressWebView extends WebView { private ProgressBar progressbar; public ProgressWebView(Context context, AttributeSet attrs) { super(context, attrs); progressbar = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal); progressbar.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, 10, 0, 0)); Drawable drawable = context.getResources().getDrawable(R.drawable.progress_bar_states); progressbar.setProgressDrawable(drawable); addView(progressbar); setWebViewClient(new MyWebViewClient()); setWebChromeClient(new MyWebChromeClient()); //是否可以缩放 getSettings().setSupportZoom(true); getSettings().setBuiltInZoomControls(true); getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE); getSettings().setSupportMultipleWindows(true); getSettings().setJavaScriptCanOpenWindowsAutomatically(true); getSettings().setDomStorageEnabled(true); getSettings().setPluginState(WebSettings.PluginState.ON); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW); } } public class MyWebChromeClient extends WebChromeClient { @Override public void onProgressChanged(WebView view, int newProgress) { if (newProgress == 100) { progressbar.setVisibility(GONE); } else { if (progressbar.getVisibility() == GONE) progressbar.setVisibility(VISIBLE); progressbar.setProgress(newProgress); } super.onProgressChanged(view, newProgress); } @Override public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) { WebView mWebView = new WebView(view.getContext()); WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj; transport.setWebView(mWebView); resultMsg.sendToTarget(); return true; } } public class MyWebViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } @Override public void onReceivedSslError(WebView view, SslErrorHandler handler, android.net.http.SslError error) { handler.proceed(); } @Override public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event) { return super.shouldOverrideKeyEvent(view, event); } } @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { LayoutParams lp = (LayoutParams) progressbar.getLayoutParams(); lp.x = l; lp.y = t; progressbar.setLayoutParams(lp); super.onScrollChanged(l, t, oldl, oldt); } }
- 下面我们来看一下drawable目录下的progress_bar_states.xml是如何写的：
<?xml version="1.0" encoding="utf-8"?> <!-- 层叠 --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@android:id/background"> <shape> <corners android:radius="2dp" /> <gradient android:angle="270" android:centerColor="#E3E3E3" android:endColor="#E6E6E6" android:startColor="#C8C8C8" /> </shape> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="2dp" /> <gradient android:centerColor="#4AEA2F" android:endColor="#31CE15" android:startColor="#5FEC46" /> </shape> </clip> </item> </layer-list><layer-list>这个标签可能我们不是很熟悉，因为我们一般常用的就是<shape>和<selector>这两个，layer-list是将多个图片或上面两种效果按照顺序层叠起来，layer就像photoshop中的图层一样。
其中有个<clip>标签，是可以用来剪载图片显示，例如，可以通过它来做进度度。你可以选择是从水平或垂直方向剪载。
自定义好ProgressWebView之后，我们只需要在xml布局文件中声明就可以使用了：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <RelativeLayout android:id="@+id/title" android:layout_width="match_parent" android:layout_height="48dp" android:background="#22292c"> <ImageView android:id="@+id/iv_back" android:layout_width="40dp" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:paddingBottom="5dp" android:paddingLeft="5dp" android:paddingRight="5dp" android:paddingTop="5dp" android:scaleType="centerInside" android:src="@drawable/top_bar_back" /> <View android:id="@+id/view_temp" android:layout_width="1dp" android:layout_height="match_parent" android:layout_marginBottom="8dp" android:layout_marginTop="8dp" android:layout_toRightOf="@id/iv_back" android:background="#14191A" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:layout_toRightOf="@id/view_temp" android:text="具体名称" android:textColor="#ffffff" android:textSize="18sp" /> <ImageView android:layout_width="40dp" android:layout_height="match_parent" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:paddingBottom="5dp" android:paddingLeft="5dp" android:paddingRight="5dp" android:paddingTop="5dp" android:scaleType="centerInside" android:src="@drawable/icon_wallet_more" /> </RelativeLayout> <com.xxx.xxx.module.setting.ProgressWebView android:id="@+id/baseweb_webview" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
预览如下
- 接着我们定义一个BaseWebActivity来显示我们自定义的WebView
public class BaseWebActivity extends Activity { protected ProgressWebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.activity_baseweb); mWebView = (ProgressWebView) findViewById(R.id.baseweb_webview); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.getSettings().setSupportZoom(true); mWebView.getSettings().setBuiltInZoomControls(true); mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE); mWebView.getSettings().setSupportMultipleWindows(true); mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true); initData(); } private void initData() { Intent intent = getIntent(); String url = intent.getStringExtra("url"); if (url != null) { mWebView.loadUrl(url); } } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) { mWebView.goBack(); return true; } return super.onKeyDown(keyCode, event); } }
- 然后调用这个Activity即可，例如：
public class AboutUsActivity extends BaseSubActivity { @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_setting_about); findViewById(R.id.html_app).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String url = "http://xxxxx.html"; Intent intent = new Intent(AboutUsActivity.this, BaseWebActivity.class); intent.putExtra("url", url); startActivity(intent); } }); } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK) { new AlertDialog.Builder(this).setTitle("退出").setMessage("确认要退出吗？").setPositiveButton("OK", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { TOAST.showShort("确认退出"); } }).setNegativeButton("CANCLE", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { TOAST.showShort("取消退出"); } }).create().show(); return false; } return super.onKeyDown(keyCode, event); } }
扫一扫
7042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
