分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

x5webview 自定义全屏界面

发布时间:2023-09-06 02:13责任编辑:苏小强关键词:webview

集成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); ???}

这样就大功告成。 

x5webview 自定义全屏界面

原文地址:https://www.cnblogs.com/xilinch/p/9610091.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved