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