WebChromeClient常用API与功能使用详解

原文连接 WebChromeClient常用API与功能使用详解

在WebView的开发过程中当你需要使用到一些高级功能可以通过设置WebChromeClient从而来辅助WebView处理 JavaScript 的对话框、网站图标、网站title、加载进度等

WebChromeClient常用的API方法
1.通知应用程序当前网页加载的进度
@Override
public void onProgressChanged(WebView view, int newProgress)
2.获取网页title标题
@Override
public void onReceivedTitle(WebView view, String title)

获取标题的时间主要取决于网页前段设置标题的位置,一般设置在页面加载前面,可以较早调用到这个函数

3.网页中有H5播放flash video的时候按下全屏按钮将会调用到这个方法,一般用作设置网页播放全屏操作
@Override
public void onShowCustomView(View view, CustomViewCallback callback)

对应的取消全屏方法

@Override
public void onHideCustomView()

WebView下载监听

通过设置webview下载监听进而监听网页下载

mWebView.setDownloadListener(new DownloadListener() {
    @Override
    public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
    }
});

一般可在downloadStart 处进行下载处理

WebChromeClient高级功能实现
1.让你的webview支持File Input 标签

在Android 5.0 API 21后 借助新的 onShowFileChooser() 方法,您现在不但可以在 WebView 中使用输入表单字段,而且可以启动文件选择器从 Android 设备中选择图片和文件

public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback,
                                 WebChromeClient.FileChooserParams fileChooserParams) {
    if (mFilePathCallback != null) {
        mFilePathCallback.onReceiveValue(null);
    }
    mFilePathCallback = filePathCallback;

    Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
    if (takePictureIntent.resolveActivity(getPackageManager()) != null) {
        // Create the File where the photo should go
        File photoFile = null;
        try {
            photoFile = createImageFile();
            takePictureIntent.putExtra("PhotoPath", mCameraPhotoPath);
        } catch (IOException ex) {
            // Error occurred while creating the File
            Log.e(TAG, "Unable to create Image File", ex);
        }

        // Continue only if the File was successfully created
        if (photoFile != null) {
            mCameraPhotoPath = "file:" + photoFile.getAbsolutePath();
            takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT,
                    Uri.fromFile(photoFile));
        } else {
            takePictureIntent = null;
        }
    }

    Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
    contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
    contentSelectionIntent.setType("image/*");

    Intent[] intentArray;
    if (takePictureIntent != null) {
        intentArray = new Intent[]{takePictureIntent};
    } else {
        intentArray = new Intent[0];
    }
    Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER);
    chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent);
    chooserIntent.putExtra(Intent.EXTRA_TITLE, "Image Chooser");
    chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, intentArray);
    startActivityForResult(chooserIntent, INPUT_FILE_REQUEST_CODE);
    return true;
}

在选择完图片后回调onActivityResult 获取图片

@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode != INPUT_FILE_REQUEST_CODE || mFilePathCallback == null) {
        super.onActivityResult(requestCode, resultCode, data);
        return;
    }

    Uri[] results = null;

    // Check that the response is a good one
    if (resultCode == Activity.RESULT_OK) {
        if (data == null) {
            // If there is not data, then we may have taken a photo
            if (mCameraPhotoPath != null) {
                results = new Uri[]{Uri.parse(mCameraPhotoPath)};
            }
        } else {
            String dataString = data.getDataString();
            if (dataString != null) {
                results = new Uri[]{Uri.parse(dataString)};
            }
        }
    }

    mFilePathCallback.onReceiveValue(results);
    mFilePathCallback = null;
    return;
}

2.支持全屏视频播放

设置webview视频未播放时默认显示占位图

@Override
public Bitmap getDefaultVideoPoster() {
    if(getActivity() == null) {
        return null;
    }

    return BitmapFactory.decodeResource(getActivity().getApplicationContext().getResources(),
            R.drawable.video_poster);
}

视频播放全屏时调用

@Override
public void onShowCustomView(View view,
                             WebChromeClient.CustomViewCallback callback) {
    // if a view already exists then immediately terminate the new one
    if (mCustomView != null) {
        onHideCustomView();
        return;
    }

    // 1. Stash the current state
    mCustomView = view;
    mOriginalSystemUiVisibility = getActivity().getWindow().getDecorView().getSystemUiVisibility();
    mOriginalOrientation = getActivity().getRequestedOrientation();

    // 2. Stash the custom view callback
    mCustomViewCallback = callback;

    // 3. Add the custom view to the view hierarchy
    FrameLayout decor = (FrameLayout) getActivity().getWindow().getDecorView();
    decor.addView(mCustomView, new FrameLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT));


    // 4. Change the state of the window
    getActivity().getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_LAYOUT_STABLE |
                    View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
                    View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
                    View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
                    View.SYSTEM_UI_FLAG_FULLSCREEN |
                    View.SYSTEM_UI_FLAG_IMMERSIVE);
    getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
}

视频取消全屏时候调用

@Override
public void onHideCustomView() {
    // 1. Remove the custom view
    FrameLayout decor = (FrameLayout) getActivity().getWindow().getDecorView();
    decor.removeView(mCustomView);
    mCustomView = null;

    // 2. Restore the state to it's original form
    getActivity().getWindow().getDecorView()
            .setSystemUiVisibility(mOriginalSystemUiVisibility);
    getActivity().setRequestedOrientation(mOriginalOrientation);

    // 3. Call the custom view callback
    mCustomViewCallback.onCustomViewHidden();
    mCustomViewCallback = null;

}

具体实例可以参照 GoogleChrome高级使用实例
[https://github.com/GoogleChrome/chromium-webview-samples]

下篇将讲解WebView优化以及在开发过程中常遇到的问题

推荐阅读更多精彩内容