您现在的位置是:网站首页> 内容页

x5webview 自定义全屏界面

  • 凯旋门网站app
  • 2019-01-11
  • 48人已阅读
简介集成X5WEBVIEW可以选择全屏模式为标准全屏还是x5全屏,而不设置默认为false。首先看看标准全屏的基本设置,if(webView.getX5WebViewExtension(

集成X5WEBVIEW可以选择全屏模式为标准全屏还是x5全屏,而不设置默认为false。

首先看看标准全屏的基本设置,

if (webView.getX5WebViewExtension() != null) { Bundle data = new Bundle() data.putBoolean("standardFullScreen" false)// true表示标准全屏,false表示X5全屏;不设置默认false, data.putBoolean("supportLiteWnd" false)// false:关闭小窗;true:开启小窗;不设置默认true, data.putInt("DefaultVideoScreen" 1)// 1:以页面内开始播放,2:以全屏开始播放;不设置默认:1 webView.getX5WebViewExtension().invokeMiscMethod("setVideoParams" data) }

如果使用的是标准全屏那么,显示页面如下:

 

可以看到典型的 可以横竖屏切换的按钮,锁屏的按钮,缓存和分享的按钮以及视频名标题。 这些内容在一些场景下是可能不希望看到显示的,比如缓存按钮,比如使用模板打开的页面分享出来是模板地址。

因此需要一种标准的全屏模式,而非x5全屏模式。

使用标准全屏模式代码如下:

if (webView.getX5WebViewExtension() != null) { Bundle data = new Bundle() data.putBoolean("standardFullScreen" true)// true表示标准全屏,false表示X5全屏;不设置默认false, data.putBoolean("supportLiteWnd" false)// false:关闭小窗;true:开启小窗;不设置默认true, data.putInt("DefaultVideoScreen" 1)// 1:以页面内开始播放,2:以全屏开始播放;不设置默认:1 webView.getX5WebViewExtension().invokeMiscMethod("setVideoParams" data) }

需要在内部处理全屏的交互,在布局中增加代码如下:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"   android:id="@+id/webViewLayout" android:orientation="vertical">

<!-- 视频全屏--> <FrameLayout android:id="@+id/video_fullView" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@color/black" android:visibility="gone"> <TextView android:id="@+id/tv_touch" android:layout_width="150dp" android:layout_height="45dp" android:layout_gravity="right" android:layout_marginTop="20dp" android:background="@color/transparent" /> </FrameLayout>

</FrameLayout>

首先添加 一个webviewChromeClient,处理onShowCustomView、onHideCustomView两个方法的回调。在类中添加如下代码

private IX5WebChromeClient.CustomViewCallback xCustomViewCallback private FrameLayout video_fullView// 全屏时视频加载view private View xCustomView private com.tencent.smtt.sdk.WebChromeClient xwebchromeclient = new com.tencent.smtt.sdk.WebChromeClient() { @Override public void onProgressChanged(com.tencent.smtt.sdk.WebView webView int percent) { super.onProgressChanged(webView percent) if (percent > 40) { webView.setVisibility(View.VISIBLE) } } // 拦截全屏调用的方法 @Override public void onShowCustomView(View view IX5WebChromeClient.CustomViewCallback callback) { super.onShowCustomView(view callback) getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE) Log.e("my""onShowCustomView----xCustomView:" + xCustomView) webView.setVisibility(View.INVISIBLE) // 如果一个视图已经存在,那么立刻终止并新建一个 if (xCustomView != null) { callback.onCustomViewHidden() return } view.setVisibility(View.VISIBLE) video_fullView.addView(view) xCustomView = view xCustomView.setVisibility(View.VISIBLE) xCustomViewCallback = callback video_fullView.setVisibility(View.VISIBLE) } @Override public void onHideCustomView() { super.onHideCustomView() Log.e("my""onHideCustomView----xCustomView:" + xCustomView) if (xCustomView == null){ // 不是全屏播放状态 return } getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT) xCustomView.setVisibility(View.GONE) video_fullView.removeView(xCustomView) xCustomView = null video_fullView.setVisibility(View.GONE) xCustomViewCallback.onCustomViewHidden() webView.setVisibility(View.VISIBLE) } } /** * 判断是否是全屏 * * @return */ public boolean inCustomView() { return (xCustomView != null) } /** * 全屏时按返加键执行退出全屏方法 */ public void hideCustomView() { xwebchromeclient.onHideCustomView() getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT) }

设置x5webview的webchrome,代码如下:

webView.setWebChromeClient(xwebchromeclient)

为了处理返回事件,还需要加上如下代码:

@Override public boolean onKeyDown(int keyCode KeyEvent event) { if (inCustomView() && keyCode == KeyEvent.KEYCODE_BACK) { hideCustomView() return } return super.onKeyDown(keyCode event) }

 

这样就大功告成。 

 

1 0 9)

文章评论

Top