webview进度条设置之WebChromeClient常用API与功能使用详解

转载自原文地址

0. 写在前面

在使用这个WebChromeClient设置进入条有一点要注意，因为这进度加载不止一种样式，我们设置progress时，这个控件默认的style是那种转圈的，不仔细看可能看不清，以为没设置上，所以我们一般可以改变这个控件的样式，一般都是这种最经典的，就是经度条，代码就是在progress中加一条style属性。就这点要注意。

 style="?android:attr/progressBarStyleHorizontal" 

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

WebChromeClient常用的API方法

1.通知应用程序当前网页加载的进度

1 2	@Override public void onProgressChanged(WebView view, int newProgress)

2.获取网页title标题

1 2	@Override public void onReceivedTitle(WebView view, String title)

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

3.网页中有H5播放flash video的时候按下全屏按钮将会调用到这个方法，一般用作设置网页播放全屏操作

1 2	@Override public void onShowCustomView(View view, CustomViewCallback callback)

对应的取消全屏方法

1 2	@Override public void onHideCustomView()

WebView下载监听

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

1 2 3 4 5

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 设备中选择图片和文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

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 获取图片

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

@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视频未播放时默认显示占位图

1 2 3 4 5 6 7 8 9

@Override public Bitmap getDefaultVideoPoster() { if(getActivity() == null) { return null; } return BitmapFactory.decodeResource(getActivity().getApplicationContext().getResources(), R.drawable.video_poster); }

视频播放全屏时调用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

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

视频取消全屏时候调用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

@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; }