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);    }

 

這樣就大功告成。