Android WebView实践总结（二）WebView全屏播
2018-11-19 本文已影响68人
艾伦oy
我接着上一篇的总结继续写，上一篇已经可以正常加载网页并且做基本控制，不过我发现一个问题，播放网页视频的时候无法进入全屏模式进行视频播放，体验极差，原来这里是我们自己需要手动对全屏模式进行处理的。这篇主要写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.遇到的一个问题
在优酷网上点击播放视频的时候出现了错误页面，提示：
error.jpg
这个问题是网址使用了外链导致的，需要在
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;
}
问题解决.jpg
好了，webview实践总结第二篇到这里写完了，觉得有用的可以点个小心心支持一下，（比心手势.png）
预告：第三篇写webview的图片上传与网页长按处理。
