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 自定义全屏界面的更多相关文章
- iOS Swift WisdomScanKit二维码扫码SDK,自定义全屏拍照SDK,系统相册图片浏览,编辑SDK
iOS Swift WisdomScanKit 是一款强大的集二维码扫码,自定义全屏拍照,系统相册图片编辑多选和系统相册图片浏览功能于一身的 Framework SDK [1]前言: 今天给大家 ...
- android4.4上全屏界面实现禁止状态栏下拉
附上我改动的方法:PhoneWindowManager.java里面的改动 --- a/frameworks/base/policy/src/com/android/internal/policy/i ...
- iOS自定义全屏返回与tableView左划删除手势冲突解决
当自定义一个navigationController实现全屏右划返回时, 使用起来是不是很爽, 代码如下: - (void)viewDidLoad { [super viewDidLoad]; UIG ...
- JQuery+Bootstrap 自定义全屏Loading插件
/** * 自定义Loading插件 * @param {Object} config * { * content[加载显示文本], * time[自动关闭等待时间(ms)] * } * @param ...
- 自定义一个全屏的AlertDialog。
........... final MyDialog dialog = new MyDialog(this); LayoutInflater inflater = getLayoutInflater( ...
- iOS端一次视频全屏需求的实现(转)
对于一个带有视频播放功能的app产品来说,视频全屏是一个基本且重要的需求.虽然这个需求看起来很简单,但是在实现上,我们前后迭代了三套技术方案.这篇文章将介绍这三种实现方案中的利弊和坑点,以及实现过程中 ...
- javascript full screen 全屏显示 页面元素
javascript full screen 全屏显示 页面元素 要想让页面的某个元素全屏显示,就像在网页上看视频的时候,可以全屏观看一样,该怎么实现呢? 一种最简单的方式,就是动态改变你想要全屏显示 ...
- 给echarts加个“全屏展示”
echarts的工具箱并没有提供放大/全屏的功能, 查找文档发现可自定义工具https://www.echartsjs.com/option.html#toolbox.feature show代码 t ...
- VM虚拟机全屏显示
在虚拟机中使用全屏界面会有更强的用户体验.在编辑该文章的时候就是在使用虚拟机windows2008 R2系统.我的笔记本是苹果双系统.虚拟机安装在win7 64位系统下 1.首先查看主机的屏幕分辨率 ...
随机推荐
- 数据库服务注册(使用命令注册):解决my.ini配置文件不存在的问题
注册数据库的时候,有一键式安装,还有一种通过压缩包安装.今天主要来讲一下压缩包安装会出现的问题. 1. 新建一个my.ini文件,里面内容为: [client] port=3306 default-c ...
- Python运算符之三元运算符
三元运算符:也称之为条件表达式 [条件为真的结果] if 条件 else [条件为假的结果] 如: ium01 = 100 if100 > 200 else200 print(num01) #三 ...
- RabbitMQ学习以及与Spring的集成(三)
本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收. 在RabbitMQ的Spring配置文件中,首先需要增加命名空间. xmlns:rabbit="http://www. ...
- CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...
- BZOJ 2424 订货 最小费用流
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2424 题目大意: 某公司估计市场在第i个月对某产品的需求量为Ui,已知在第i月该产品的 ...
- JedisPool无法获得资源问题
线上碰到一个问题:redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resource from the ...
- [USACO09OPEN]Ski Lessons
嘟嘟嘟 先考虑这两点: 1.如果我们有结束时间相同的课程,且达到的能力相同,那么我们一定选择开始时间最晚的. 2.如果有能力值相同的滑雪坡,我们一定选择时间最短的. 因此先预处理两个数组.cla[i] ...
- Ansible--01
一.ansible是什么: 类似puppet之类的运维自动化工具 二.为什么选择ansible: 1. ansible是python语言开发的,python语言进入门槛低,方便基于pytnon对ans ...
- ElasticSearch 简单的 搜索 聚合 分析
一. 搜索1.DSL搜索 全部数据没有任何条件 GET /shop/goods/_search { "query": { "match_all": {} } } ...
- 第二部分 OpenStack安装与配置
第二部分 OpenStack安装与配置 一.引言 本章内容讲解如何在3台物理机上搭建最小化云平台,这3台机器分为称为Server1.Server2和Client1,之后的各章也是如此.Server ...