zoukankan      html  css  js  c++  java
  • 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)

  • 相关阅读:
    nginx获取上游真实IP(ngx_http_realip_module)
    配置NFS固定端口
    elasticsearch 占CPU过高
    jdk集合常用方法分析之HashSet和TreeSet
    SparkSQL使用之如何使用UDF
    SparkSQL使用之JDBC代码访问Thrift JDBC Server
    SparkSQL使用之Thrift JDBC server
    SparkSQL使用之Spark SQL CLI
    jdk分析之String
    jdk集合常用方法分析之ArrayList&LinkedList&以及两者的对比分析
  • 原文地址:https://www.cnblogs.com/xilinch/p/9610091.html
Copyright © 2011-2022 走看看