x5webview 自定义全屏界面

Posted 那些人追过的年

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了x5webview 自定义全屏界面相关的知识,希望对你有一定的参考价值。

集成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完美去掉分享功能和缓存功能(2)

 

以上是关于x5webview 自定义全屏界面的主要内容,如果未能解决你的问题,请参考以下文章

如何在WORDPRESS首页插入一段自定义代码?

JavaFX自定义窗口标题栏

VSCode自定义代码片段——CSS选择器

php Divi全屏自定义菜单点击关闭代码

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段(vue主模板)