Android WebView實踐總結（二）WebView全屏播放

摘要： 我接著上一篇的總結繼續寫，上一篇已經可以正常載入網頁並且做基本控制，不過我發現一個問題，播放網頁視訊的時候無法進入全屏模式進行視訊播放，體驗極差，原來這裡是我們自己需要手動對全屏模式進行處理的。這篇主要寫 WwebView實現全屏播放 ，還有記錄一下在處理全屏播放時候遇到的一個問題。 ...

我接著上一篇的總結繼續寫，上一篇已經可以正常載入網頁並且做基本控制，不過我發現一個問題，播放網頁視訊的時候無法進入全屏模式進行視訊播放，體驗極差，原來這裡是我們自己需要手動對全屏模式進行處理的。這篇主要寫 WwebView實現全屏播放 ，還有記錄一下在處理全屏播放時候遇到的一個問題。

1.思考

播放視訊的時候點選全屏圖示點選後木有反應，但其實是觸發了 WebChromeClient 類中 onShowCustomView(View view, CustomViewCallback callback) 事件的，注意這個方法裡面的兩個引數 view 和 callback ， view 就是傳過來的視訊播放的檢視內容， callback 回撥介面看原始碼可知裡面有一個方法 onCustomViewHidden() 註釋給的解釋是 （Invoked when the host application dismisses the） ，意思是檢視關閉的時候呼叫這個 onCustomViewHidden() 方法，退出全屏的時候會回撥 onHideCustomView() 無引數方法，得出結論：簡單的來說就是進入全屏模式的時候把 onShowCustomView 方法中的View新增到一個容器中顯示出來，退出全屏模式時在 onHideCustomView 方法中把檢視從容器remove掉就OK了，順便處理一下橫豎屏切換。

/**
* A callback interface used by the host application to notify
* the current page that its custom view has been dismissed.
*/
public interface CustomViewCallback {
/**
* Invoked when the host application dismisses the
* custom view.
*/
public void onCustomViewHidden();
}

2.開啟硬體加速

為什麼要開啟硬體加速啊？因為不開啟的話會有視訊無法正常播放的問題，還有就是瀏覽網頁的時候更流暢。

在application節點中新增 android:supportsRtl="true" 在activity中新增 android:hardwareAccelerated="true" ,在application新增表示整個應用程式開啟，在activity新增表示當前頁面開啟。

<application
android:allowBackup="true"
android:hardwareAccelerated="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:configChanges="orientation|screenSize|keyboardHidden"
android:hardwareAccelerated="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

3.網頁全屏模式切換回調處理

layout佈局中新增 FrameLayout 作為全屏模式的檢視容器；

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.allyn.webview.MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.v4.widget.ContentLoadingProgressBar
android:id="@+id/pro_schedule"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="3dp"
android:max="100"
android:progress="0"
android:visibility="visible" />

<com.allyn.webview.MyWebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="500dp" />
</LinearLayout>

<FrameLayout
android:id="@+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>

全屏模式切換回調處理

mWebView.setWebChromeClient(new WebChromeClient() {
//檢視View
private View mCustomView;
// 一個回撥介面使用的主機應用程式通知當前頁面的自定義檢視已被撤職
private CustomViewCallback mCustomViewCallback;

//網頁進入全屏模式監聽
@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
super.onShowCustomView(view, callback);
mFrameLayout = findViewById(R.id.frameLayout);
if (mCustomView != null) {
callback.onCustomViewHidden();
return;
}
//賦值，關閉時需要呼叫
mCustomView = view;
// 將video放到FrameLayout中
mFrameLayout.addView(mCustomView);
//退出全屏模式時釋放需要呼叫，這裡先賦值
mCustomViewCallback = callback;
// 設定webView隱藏
mWebView.setVisibility(View.GONE);
//切換至橫屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
}

//網頁退出全屏模式監聽
@Override
public void onHideCustomView() {
//顯示豎屏時候的webview
mWebView.setVisibility(View.VISIBLE);
if (mCustomView == null) {
return;
}
//隱藏
mCustomView.setVisibility(View.GONE);
//從當前檢視中移除
mFrameLayout.removeView(mCustomView);
//釋放自定義檢視
mCustomViewCallback.onCustomViewHidden();
mCustomView = null;
//切換至豎屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
super.onHideCustomView();
}
});

3.APP橫豎屏切換處理

注意：需要在 AndroidManifest.xml 檔案中的 activity 節點下新增 android:configChanges="orientation|screenSize|keyboardHidden" ，這麼設定是為了使橫豎屏切換後Activity不會重新啟動。

//螢幕旋轉監聽
@Override
public void onConfigurationChanged(Configuration config) {
super.onConfigurationChanged(config);
switch (config.orientation) {
//豎屏方向
case Configuration.ORIENTATION_LANDSCAPE:
//設定全屏
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
break;
//橫屏方向
case Configuration.ORIENTATION_PORTRAIT:
//關閉全屏
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
break;
}
}

到這裡全屏播放的功能完成了，效果圖如下：

4.遇到的一個問題

在優酷網上點選播放視訊的時候出現了錯誤頁面，提示：

這個問題是網址使用了外鏈導致的，需要在 shouldOverrideUrlLoading（）

方法中對url做處理，判斷url的字首進行本地跳轉。

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//網址處理
if (url == null) return false;
//外鏈判斷處理
try {
if (url.startsWith("weixin://") //微信
|| url.startsWith("alipays://") //支付寶
|| url.startsWith("mailto://") //郵件
|| url.startsWith("tel://")//電話
|| url.startsWith("baiduhaokan://")//百度
|| url.startsWith("tbopen://")//百度+
|| url.startsWith("youku://")//優酷
|| url.startsWith("dianping://")//大眾點評
//其他自定義的scheme
) {
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(intent);
return true;
}
} catch (Exception e) { //防止crash (如果手機上沒有安裝處理某個scheme開頭的url的APP, 會導致crash)
return true;//沒有安裝該app時，返回true，表示攔截自定義連結，但不跳轉，避免彈出上面的錯誤頁面
}
/**
* 可對指定網址進行攔截
*/
view.loadUrl(url);
return true;
}

好了，webview實踐總結第二篇到這裡寫完了，覺得有用的可以點個小心心支援一下，（比心手勢.png）

• github Demo原始碼點這裡

預告：第三篇寫webview的圖片上傳與網頁長按處理。