android好用的webview,Android WebView的基本使用与注意点

最新推荐文章于 2024-08-10 12:02:04 发布
最新推荐文章于 2024-08-10 12:02:04 发布
阅读量578 收藏
点赞数
文章标签： android好用的webview

在Android开发中,WebView的使用频率越来越高,这里跟大家分享下WebView使用中的一些技巧或者注意点

11月21日更新:

修复Android 6.0网页title获取的bug,具体见-2.网页title的获取

11月4日更新:

新增-9.WebView视频全屏播放

1.WebView顶部展示加载进度

自定义控件,继承WebView

public class ErmWebView extends WebView {

private ProgressBar progressbar;

public ErmWebView(Context context, AttributeSet attrs) {

super(context, attrs);

progressbar = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal);

progressbar.setProgressDrawable(context.getResources().getDra(R.drawable.style_progressbar_web));//设置样式

progressbar.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 5, 0, 0));

addView(progressbar);

setWebChromeClient(new WebChromeClient());

}

public class WebChromeClient extends android.webkit.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);

}

}

2.网页title的获取

需要在WebChromeClient的onReceivedTitle()中获取,其他api获取不可靠

webview控件在Android6.0上有一个bug,那就是onReceivedTitle()会调用两次,一次为网页的url,一次为网页真正的title,故这里需要做一个过滤

mWebview.setWebChromeClient(new WebChromeClient(){

@Override

public void onReceivedTitle(WebView view, String title) {

super.onReceivedTitle(view, title);

//由于webview在title在6.0上会调用两次,故这里过滤掉title为url的那次

if (!getUrl().contains(title)) mTitleBar.setTitle(title);//设置title

}

});

3.本地图片(文件)选择

web页面中经常需要用户选取手机中的图片(文件)上传,这种默认的js调用,在iOS和PC端是OK的,但是Android端需要处理,否则不会做任何操作

private ValueCallback mUploadMessage;//回调图片选择，4.4以下

private ValueCallback mUploadCallbackAboveL;//回调图片选择，5.0以上

mWebview.setWebChromeClient(new WebChromeClient(){

//由于是隐藏API,故没有@Override注解

// For Android 3.0+单参数

public void openFileChooser(ValueCallback uploadMsg) {

mUploadMessage = uploadMsg;

Intent i = new Intent(Intent.ACTION_GET_CONTENT);

i.addCategory(Intent.CATEGORY_OPENABLE);

i.setType("image/*");

if (getContext() instanceof Activity) {

((Activity) getContext()).startActivityForResult(Intent.createChooser(i, "File Chooser"), FILE_SELECT_CODE);

}

}

// For Android 3.0+多参数

public void openFileChooser(ValueCallback uploadMsg, String acceptType) {

mUploadMessage = uploadMsg;

Intent i = new Intent(Intent.ACTION_GET_CONTENT);

i.addCategory(Intent.CATEGORY_OPENABLE);

i.setType("*/*");

if (getContext() instanceof Activity) {

((Activity) getContext()).startActivityForResult(Intent.createChooser(i, "File Browser"), FILE_SELECT_CODE);

}

}

// For Android 4.1

public void openFileChooser(ValueCallback uploadMsg, String acceptType, String capture) {

mUploadMessage = uploadMsg;

Intent i = new Intent(Intent.ACTION_GET_CONTENT);

i.addCategory(Intent.CATEGORY_OPENABLE);

i.setType("image/*");

if (getContext() instanceof Activity) {

((Activity) getContext()).startActivityForResult(Intent.createChooser(i, "File Chooser"), FILE_SELECT_CODE);

}

}

// For Android 5.0+

public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {

mUploadCallbackAboveL = filePathCallback;

Intent i = new Intent(Intent.ACTION_GET_CONTENT);

i.addCategory(Intent.CATEGORY_OPENABLE);

i.setType("*/*");

if (getContext() instanceof Activity) {

((Activity) getContext()).startActivityForResult(Intent.createChooser(i, "File Browser"), FILE_SELECT_CODE);

}

return true;

}

}

//将选择结果回调给网页

@Override

public void onActivityResult(int requestCode, int resultCode, Intent data) {

super.onActivityResult(requestCode, resultCode, data);

if (resultCode != Activity.RESULT_OK) {

if (Build.VERSION.SDK_INT >= 21) //5.0以上版本处理

mWebview.getUploadCallbackAboveL().onReceiveValue(null);//取消选择必须回调null,否则web处于阻塞状态,无法继续操作

else

mWebview.getUploadMessage().onReceiveValue(null);

return;

}

switch (requestCode) {

case FILE_SELECT_CODE: {

if (Build.VERSION.SDK_INT >= 21) {//5.0以上版本处理

Uri uri = data.getData();

Uri[] uris = new Uri[]{uri};

mWebview.getUploadCallbackAboveL().onReceiveValue(uris);//回调给js

} else {//4.4以下处理

Uri uri = data.getData();

Logger.i(uri.toString());

mWebview.getUploadMessage().onReceiveValue(uri);

}

}

break;

}

}

以上代码在大部分手机测试通过,但不排除个别机型存在bug的可能

4.宽度自适应

如果网页比较宽,webView就可以左右滑动,用户一屏看不到所有的内容,体验会比较差,我们可以设置页面自适应

WebSettings settings = getSettings();

settings.setJavaScriptEnabled(true);//开启js

settings.setUseWideViewPort(true);//宽度自适应

settings.setLoadWithOverviewMode(true);

settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

html中的图片需要自适应,否则可能会出现图片特别宽,导致整个页面无法自适应

5.自定义网页加载出错页面

对于客户端来说,加载出错包括 网络出错+网页Load出错.默认的出错页面比较丑,并且会直接显示URL,导致我们的url暴露.

mWebview.setWebViewClient(new WebViewClient() {

@SuppressWarnings("deprecation")

@Override

public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {//低版本

mWebview.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);//去除默认的404页面

mEmpty.showErrorType("网页加载出错,请点击重试");

}

@TargetApi(android.os.Build.VERSION_CODES.M)//编译版本>23

@Override

public void onReceivedError(WebView view, WebResourceRequest req, WebResourceError rerr) {

onReceivedError(view, rerr.getErrorCode(), rerr.getDescription().toString(), req.getUrl().toString());

}

});

多次测试之后,上面这样写才能捕捉到所有加载出错的回调,并且在大部分机型及API版本测试通过.

6.返回键处理

用户希望能够返回到上一个网页,而不是直接退出当前webActivity

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

mLeftTv.setVisibility(View.VISIBLE);

if (keyCode == KeyEvent.KEYCODE_BACK && mWebview.canGoBack()) {

mWebview.goBack();

return true;

}

return super.onKeyDown(keyCode, event);

}

7.退出WebView

WebView的底层调用WebKit内核,加载也会另开线程,所以当WebView所在的Activity退出时,WebView内部的组建和线程可能并没有销毁,导致持续占用资源,甚至视频或者音频还在播放

@Override

protected void onPause() {

super.onPause();

if (mWebview != null) mWebview.onPause();//退出关闭webview

}

@Override

protected void onDestroy() {

super.onDestroy();

if (mWebview != null) mWebview.destroy();//退出关闭webview

}

以上代码在大部分手机上含视频播放的web页面测试通过,视频及视频声音不会再播放.但音频web页面退出未测试

8.与JS代码互相调用

有时候JS与原生互相调用各自的方法

mWebview.addJavascriptInterface(new InfoJs(), "infojs");//增加js交互的方法

public class InfoJs {

@JavascriptInterface

public void showToast(String s) {

ToastUtils.showToast("展示toast " + s);

}

}

JS调原生也可以用URL重定向来调,这样iOS比较好实现.

9.WebView视频全屏播放

webview虽然默认支持全屏播放的事件,但是在大部分手机上都是无法全屏的,要么点击全屏是空白,要么没有任何反应,好在WebView有提供全屏及取消全屏的回调事件,所以如果需要支持WebView的全屏播放,就需要处理一下:

1.布局文件中增加一个与WebView同等级的FrameLayout,用于装载全屏的Video控件

android:id="@+id/webView"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

android:id="@+id/video"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

2.处理全屏及取消全屏事件:

private class CustomWebViewChromeClient extends WebChromeClient{

@Override

public void onShowCustomView(View view, CustomViewCallback callback) {

fullScreen();

mWebview.setVisibility(View.GONE);

mVideo.setVisibility(View.VISIBLE);

mVideo.addView(view);

mCallBack=callback;

mWebTitle.setVisibility(View.GONE);//如果有titleBar,一并隐藏

super.onShowCustomView(view, callback);

}

@Override

public void onHideCustomView() {

fullScreen();

if (mCallBack!=null){

mCallBack.onCustomViewHidden();

}

mWebview.setVisibility(View.VISIBLE);

mVideo.removeAllViews();

mVideo.setVisibility(View.GONE);

mWebTitle.setVisibility(View.VISIBLE);//如果有titleBar,一并显示出来

super.onHideCustomView();

}

}

private void fullScreen() {//强制切换屏幕方向

if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

} else {

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

}

}

关于作者

刘 jin
关注
android webView
02-01
android webView 文档
Android WebView.apk 浏览器内核 com.android.webview
12-15
Android 原生浏览器内核，包名 com.android.webview，内核版本116。 适用版本：Android API 24 及以上版本。 com.android.webview_116.0.5845.163-minAPI24.apk
Android：这是一份全面 & 详细的Webview使用攻略
liuno0的博客
09-13 4888
前言 现在很多App里都内置了Web网页（Hybrid App），比如说很多电商平台，淘宝、京东、聚划算等等，如下图 京东首页 那么这种该如何实现呢？其实这是Android里一个叫WebView组件实现 今天，我将献上一份全面介绍 WebView的常见用法。 目录 示意图 1. 简介 WebView是一个基于webkit引擎、展现web页面的控件。 Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4后直接使用了.
秒开WebView？Android性能优化全攻略
最新发布
先天无极编程圣体的博客
08-10 388
通过自定义和来控制加载流程，进一步优化加载体验。@Override// 页面加载完成后的操作@Override});WebView 的优化涉及到多个方面，包括初始化优化、设置调整、加载策略、内存管理和网络优化等。通过合理的优化，可以大幅提升 WebView 的加载速度，实现“秒开”效果。这不仅能改善用户体验，还能使应用在资源有限的环境下运行得更加顺畅。
Android WebView基本使用
热门推荐
安辉
09-11 17万+
WebView介绍Android WebView在Android平台上是一个特殊的View， 基于webkit引擎、展现web页面的控件，这个类可以被用来在你的app中仅仅显示一张在线的网页，还可以用来开发浏览器。WebView内部实现是采用渲染引擎来展示view的内容，提供网页前进后退，网页放大，缩小，搜索。Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4后直
Android WebView使用全面解析（加载网络资源、本地HTML，JS交互）
lzy_tinyjoy
09-30 1万+
简述：     WebView是什么？有什么用途？我们先来看一下官方介绍：      A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Ac
Android控件（webview）
syp_snowy的博客
05-21 1497
WebView mWebView =（WebView）findViewById（R.id.show_webView）; mWebView.loadUrl（Consts.WEB_URL_BAIDU）; // WEB_URL_BAIDU =“https://www.baidu.com/” ``` ## 2.WebView的三个基本组件## ### 2.1WebSettings（做各种设置）*...
android 使用webview控件，注意在android9.0以后必须使用https才能访问网页
03-11
然而，随着网络安全性的不断提升，Android系统对WebView的使用也有了更严格的要求。在Android 9.0（Pie）及更高版本中，如果你的应用试图加载HTTP（非加密）链接，系统将不再支持这种行为，强制要求使用更安全的...
com.google.android.webview.apk
03-10
webview全称叫做Android System WebView，它是Android生态系统的重要组成部分，也是Chrome浏览器的内核。可以让你的手机变得瞬间畅通，它会及时优化网页相关数据，有着接入式的操作体验数据，各种类型的应用程序可...
Android中webview使用的一些坑
08-27
Android中WebView的使用是一个非常重要的知识点，对于Android开发者来说，掌握WebView的使用是非常必要的。在这里，我们将会介绍一些WebView使用中需要注意的坑，以便帮助大家更好地使用WebView。 一、WebView的...
Android代码-Android-X5WebView基本封装
08-06
Android-X5WebView基本封装和使用 通过OkHttp拦截器、自定义CookieJar有效完成客户端与H5端的Cookie同步管理 监听WebView的加载进度 滚动条的设置（隐藏或者显示,内侧显示还是外侧显示） 优化X5WebView的预加载问题...
crosswalk-webview比webview更好用
02-02
crosswalk-webview 比android原生的webview更好用速度更快，支持富文本显示，能够更好的支持富文本网页
Android WebView 之Helloworld
06-13
Android WebView 之Helloworld
灵活易用的WebView库-Android开发
05-26
Extra WebView Library具有精美主题的灵活易用的WebView库。 与API级别17 RTL兼容的快速概述支持全屏模式的多主题支持sh Extra WebView Library灵活而易于使用的WebView库，具有精美的主题。 与API级别17 RTL兼容的快速概述，支持全屏模式共享的多主题支持，URL便捷方式搜索，以及带有EventBus库处理的书签和投票图标的页面支持预览演示您可以从此处下载最新的演示APK：https：/ /github.com/bkhezry/ExtraWebView/blob/master/assets/DemoExtraWebView-last.apk截图###全屏模式S
一个特别好用的公共WebView
森森先生的博客
10-27 630
一个自带进度条，只需要传入Url的公共WebView公共Activity
Android WebView
cxu123321的博客
10-10 252
Android WebView 潜心之力关注 0.1382020.06.07 00:50:25字数 999阅读 2,219 一、简介 WebView是Android系统中的原生控件，其主要功能与前端页面进行响应交互，快捷省时地实现如期的功能，相当于增强版的内置浏览器。 使用时需要在配置文件里设置网络权限，定义布局大小和样式，绑定和操作控件。 manifest.xml <uses-permission android:name="android.permission.INTERNET" /&
Android Webview
越努力越幸运
06-10 1159
Android Webview 使用 1、Webview是什麽 可以加载网页 js可与原生通讯 2、API如何用 AndroidManifest.xml 添加网络权限 <uses-permission android:name="android.permission.INTERNET"/> xml布局文件 <WebView android:id="@+id/mWebView" android:layout_width="match_parent"
WebView全面解析
自由奔跑的风
08-24 2万+
WebView全面解析 简介 WebView是android中一个非常重要的控件，它的作用是用来展示一个web页面。它使用的内核是webkit引擎，4.4版本之后，直接使用Chrome作为内置网页浏览器。 作用 显示和渲染网页； 可与页面JavaScript交互，实现混合开发。 使用介绍 使用WebView之前，不要忘记在清单文件中声明访问网络权限： &amp;lt;uses...
android开发中WebView的使用(附完整程序)
yezhiqiu_love的专栏
05-03 547
WebView是个好东西，作用相当于一个迷你的浏览器，采用Webkit内核，因此完美支持html,javascript,css等。有时候，我们完 全可以把UI甚至数据处理都交给WebView，配合PHP等服务端程序，这样Android开发就变成了网页开发，可以省很多精力。 下面是一个WebView的简单例子，如果用把所有功能都交给服务端脚本处理，这个程序已经很完整了，你只要写好网页，把URL填...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值