在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<Uri> mUploadMessage;//回调图片选择，4.4以下
private ValueCallback<Uri[]> mUploadCallbackAboveL;//回调图片选择，5.0以上

mWebview.setWebChromeClient(new WebChromeClient(){
    //由于是隐藏API,故没有@Override注解

     // For Android 3.0+单参数
    public void openFileChooser(ValueCallback<Uri> 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<Uri> 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<Uri[]> 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比较好实现.
• JS与原生的交互,网上有很多资料,写的比较详细,如:android中Webview与javascript的交互（互相调用）

9.WebView视频全屏播放

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

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

<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

<FrameLayout
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);
    }
}

关于作者

• 简 书:uncochen
• github:ChenZhen
• 新浪微博:@Chen丶振
• Email:18620156376@163.com