当前位置：首页 > news >正文

webview全屏处理，即插即用

news 2025/8/5 9:58:20

去年双十一有个直播的需求，听起来很简单，技术也都很成熟，但是真的开始实现后，还是有不少坑的，首先第一个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传给原生。

但在调用时，需要注意：

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

实现

布局

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

Java实现

private void setWebView(){mWebChromeClient = new WebChromeClient() {@Overridepublic 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); // 切换横屏}@Overridepublic 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);
}