webview全屏处理，即插即用

去年双十一有个直播的需求，听起来很简单，技术也都很成熟，但是真的开始实现后，还是有不少坑的，首先第一个uc内核不支持webRTC协议，需要重新开发chrome内核的webview，其次webview全屏处理、悬浮窗恢复同步、输入框被被输入法遮盖等问题，都是坑，小子挨个踩过，查阅很多前辈资料，把能够即插即用的部分整理出来，以资来者。

原理

H5在调用系统全屏和恢复接口时，会触发WebChromeClient的onShowCustomView(View, CustomViewCallback)和onHideCustomView()接口，所以只要在两个方法中分别实现横竖屏切换和全屏展示和隐藏即可。

其中需要注意的：
1、在onShowCustomView()中有个入参CustomViewCallback，这回调需要在全屏恢复时调用，以告知H5解决全屏展示。

2、布局中增加一个充满屏幕的控件，用以承载全屏的展示。

源码注释

/**
 * Notify the host application that the current page has entered full screen mode. After this
 * call, web content will no longer be rendered in the WebView, but will instead be rendered
 * in {@code view}. The host application should add this View to a Window which is configured
 * with {@link android.view.WindowManager.LayoutParams#FLAG_FULLSCREEN} flag in order to
 * actually display this web content full screen.
 *
 * <p>The application may explicitly exit fullscreen mode by invoking {@code callback} (ex. when
 * the user presses the back button). However, this is generally not necessary as the web page
 * will often show its own UI to close out of fullscreen. Regardless of how the WebView exits
 * fullscreen mode, WebView will invoke {@link #onHideCustomView()}, signaling for the
 * application to remove the custom View.
 *
 * <p>If this method is not overridden, WebView will report to the web page it does not support
 * fullscreen mode and will not honor the web page's request to run in fullscreen mode.
 *
 * <p class="note"><b>Note:</b> if overriding this method, the application must also override
 * {@link #onHideCustomView()}.
 *
 * @param view is the View object to be shown.
 * @param callback invoke this callback to request the page to exit
 * full screen mode.
 */
public void onShowCustomView(View view, CustomViewCallback callback) {};

Google源码的注释写的确实清楚，这个方法就是做了一件事儿： 更改渲染对象，新对象通过view传给原生。

但在调用时，需要注意：

1. 宿主APP要配置全屏属性
2. 在关闭全屏时，记得调用#onHideCustomView#onCustomViewHidden()

实现

布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <WebView
        android:id="@+id/float_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
        
    <FrameLayout
        android:id="@+id/float_frameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>
</LinearLayout>

Java实现

private void setWebView(){
    mWebChromeClient = new WebChromeClient() {
        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {
        	super.onShowCustomView(view, callback);
        	if (mCustomView != null) {
            	callback.onCustomViewHidden(); // 通知H5全屏关闭
            	return;
        	}
        	mCustomView = view; // 缓存全屏视图
        	mFrameLayout.addView(mCustomView); // 向全屏控件添加全屏视图
        	mCustomViewCallback = callback;
        	mWebview.setVisibility(View.GONE); // 将已有webview控件隐藏
        	setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); // 切换横屏
        }

        @Override
        public void onHideCustomView() {
        	webview.setVisibility(View.VISIBLE);
        	if (mCustomView == null) {
            	return;
        	}
        	mCustomView.setVisibility(View.GONE);
        	mFrameLayout.removeView(mCustomView);
        	mCustomViewCallback.onCustomViewHidden(); // 通知H5全屏关闭
        	mCustomView = null;
        	setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); // 切换竖屏
        	super.onHideCustomView();
        }
    };
    mWebview.setWebChromeClient(mWebChromeClient);
}

参考

Android WebView 全屏播放视频