Android 8.0 当中允许 Activiy 以画中画模式展现。...这是一种多窗口模式的改进加强,在视频类应用中用处非常大,有了这种模式,就可以在视频通话或者观看直播的过程当中打开另外的应用而不用退出当前视频。...准备环境 Android 8.0 或以上版本手机 Agora SDK 1.14.0 或以上 版本 Android Studio 3.0 或以上版本(非必需) 如何实现画中画模式 默认应用是不支持画中画模式的...,Activty 必需要用 enterPictureInPictureMode(PictureInPictureParams params) 方法,非常的简单,但是为了告诉系统进入画中画模式之后,Activity...View.GONE : View.VISIBLE); } 另外值得一说的是,进入画中画模式,系统会触发生命周期的方法 onPause/onResume 方法,我们需要根据需要适当的做些操作,比如是画中画模式的话
ionic中的模态窗口 在ionic中,除了常规的弹窗【$ionicPopup】还提供了浮动窗口【$ionicPopover】 其次在ionic中,还有一种新的弹窗,这样的弹窗,会占据整个页面,成为模态窗口...模态窗口,为了加载方便,通常会在页面中的script标签中进行添加,如下 在Angular的控制器中,就可以初始化这个模态窗口,并且定义函数来进行显示...、隐藏、删除的控制 var app = angular.module("myApp", ["ionic"]); app.controller("myCtrl", function($scope, $ionicModal...中模态窗口的使用方式,仅供参考。
ionic中的浮动框$ionicPopover 用ionic也有一段时间了,今天说一下它里面提供的一个小组件:浮动框 浮动框的使用在移动端的项目中已经很少了,只有在少数的一些特殊情况下才会出现。...所以官方文档中对于$ionicPopover的介绍也是非常少。...", ["ionic"]); app.controller("myCtrl", function($scope, $ionicPopover) { $ ionicPopover.fromTemplateUrl...fromTemplateUrl()函数中,指定了调用的模板页面template/template.html,这里在编辑浮动框内嵌模板页面的时候一定要注意使用ion-popover-view来进行内容的包含...ion-item> 修改 删除 在页面中,
浏览器画中画模式 浏览器画中画功能允许用户在一个小的叠加窗口中弹出网页中播放的视频 ?,Chrome 版本大于 71 均默认开启该功能。下面简单介绍一下该 API 如何使用 ?...requestPictureInPicture 方法即可,然后再调用 document 对象下的 exitPictureInPicture 方法就可以关闭画中画功能了 ?...另外,document 对象下的 pictureInPictureElement 指向画中画功能生效的那个 video 元素,如果没有开启画中画,那么返回值是 null 还有就是上述两个 API 都是异步的...document.pictureInPictureEnabled || videoElement.disablePictureInPicture } 流媒体的支持 另外画中画功能还支持流媒体。...banner 点击停止共享即可停止录制 DEMO 见:https://webrtc.github.io/samples/src/content/getusermedia/getdisplaymedia/ 与画中画结合的效果可以看这个
》有介绍过悬浮窗的使用方式,而到了Android8.0时推出来画中画模式,就是让当前的Activity缩小后显示在其它Activity的上方,使用起来也非常的简单,本篇我们就来试试Android8.0后推出的画中画模式...实现效果 代码实现 微卡智享 画中画设置 在manifests中的activity中加入画中画的配置 <activity android:name=".MainActivity...启动<em>画中画</em><em>模式</em> 上面这个是默认<em>的</em>构造<em>模式</em>,这个是最简单<em>的</em>启用<em>画中画</em><em>模式</em>。...,我们TextView<em>中</em>显示为<em>画中画</em><em>模式</em>,同时<em>画中画</em><em>的</em>按钮隐藏了,退后时文字改为正常<em>模式</em>,并且按钮也再显示出来。...正常<em>模式</em> <em>画中画</em><em>模式</em> 按钮启动<em>画中画</em> onCreate事件中加入按钮事件,点击按钮启动<em>画中画</em><em>模式</em>,这样一个简单<em>的</em><em>画中画</em>就实现了,确实要比原来做悬浮窗简单多了。
在ionic CLI v4.8.0版本创建项目时,会询问是创建ionic3还是ionic4项目,然而更新到 ionic CLI v4.10.2(latest)时,这个询问提示消失了,直接默认创建ionic3...项目,而且看参数是没有创建ionic3项目支持的,于是,我上Github发了个issue: How to create ionic3 project by ionic CLI v4.10.2(latest...) 结果ionic团队还是挺给力的,马上作出回复,并一天就解决并发布了新版本,详情进上面链接看。...所以我们想创建ionic3项目可以这样做,先升级ionic-cli到最新版本: npm i -g ionic 此时显示版本为ionic@4.10.3了,然后试着创建项目: ionic start tabTest...--type=ionic-angular 命令完成后就发现是ionic3项目了。
前言 在上一篇文章中(使用Ionic3创建原生app系统入门)介绍了如何使用ionic构建一个Android app 项目,并生成apk安装包。...ionic3中开发,基本和angular开发类似,只要了解一点angular开发知识便可以很容易上手。 简单介绍下 主要的开发工作就是在pages文件夹下,看名字也知道是什么意思了。...每个页面是一个独立的模块。文件名称不要重复,编译时会报错。 ? 项目结构 cordova-plugin-inappbrowser组件使用 这个组件看名字,大致应该知道是调用app内置浏览器的。...在我们的app中要嵌入第三方应用的时候需要使用。 在这个例子中,我要实现的便是个人介绍页面,链接到对应相关的第三方博客中。...plugin add cordova-plugin-inappbrowser npm install --save @ionic-native/in-app-browser 在模块中引入 app.module.ts
什么是,以及怎么用画中画 Windows 10 Creators Update以后UWP提供了一个新的视图模式CompactOverlay,中文翻译成 紧凑的覆盖层?...反正大部分时间我们都会称它为画中画模式。 ? 上图中右上角即为进入画中画模式的微软“电影和电视”应用。...这个类继承自StateTriggerBase,在监视的FrameworkElement的SizeChanged事件中调用SetActive改变State的激活状态。...画中画模式对我的番茄钟应用很重要。虽然我很喜欢在第二个屏幕上使用番茄钟,一来不占用我的工作区域,二来可以提醒别人我正在专注工作不要打扰,但对很多只有一个屏幕的用户来说画中画模式更加实用。...关于画中画模式的更多信息可以参考下面给出的网站。 5.
Ionic 2 实例开发 今日更新新增章节——Ionic 2 中添加图表: Chart.js是一个在HTML5的元素中绘制图标的JavaScript库,非常适合于HTML5的移动应用。...有安装简单、界面漂亮,且默认是响应式等有点,非常容易的适应你的屏幕大小和手机旋转。 本教程将通过安装使用Chart.js,并展示几种不同类型的图表。看起来是下面这个样子的: ?...Char.js示例 同期新增和修改的章节还有: 使用VS Code在Chrome中调试Ionic 2 在Ionic 2 Native中使用Cordova插件 Ionic 2中使用百度地图和Geolocation...没有苹果电脑打包iOS平台的 Ionic 2程序
/src/theme 文件夹下创建 theme.light.scss、theme.dark.scss 2个文件,分别用于日间模式、夜间模式的设置。...toolbar-background { background-color: #444; } .tab-button { background-color: #444; } } 这是我的2...ion-content> 个性化设置 夜间模式...this.theme) { this.presentToast('关闭应用后夜间模式将失效'); } this.settingDataProvider.setActiveTheme...'; import {StatusBar} from '@ionic-native/status-bar'; import {SplashScreen} from '@ionic-native/splash-screen
overlay视频技术使用非常广泛,常见的例子有,电视屏幕右上角显示的电视台台标,以及画中画功能,画中画是指在一个大的视频播放窗口中还存在一个小播放窗口,两个窗口不同的视频内容同时播放。...overlay技术中涉及两个窗口,通常把较大的窗口称作背景窗口,较小的窗口称作前景窗口,背景窗口或前景窗口里都可以播放视频或显示图片。FFmpeg中使用overlay滤镜可实现视频叠加技术。...——画中画 视频中叠加视频即为画中画功能。...注意两个视频仅图像部分会叠加在一起,声音是不会叠加的,有一个视频的声音会消失。 2.2.1 叠加计时器 找一个计时器小视频,将之叠加到背景视频上。我们可以从测试源中获取这个计时器视频。...API用法 使用滤镜API编程,解析不同的滤镜选项,以达到和命令行中输入命令同样的效果。
content中的resize方法,多少人知道和用过? resize这个方法官方文档有写,所以我以为没什么特别,直至有几人问我,才发现不少人是不知道这个东西的,所以还是写一下。...但其功能不仅于此,它还包含headers、footers或者tabs自身维度的调整,还有内部元素的动态添加/移除。 怎么理解呢?...这样说吧,如果想把一个元素固定在头部,可以放在headers里面,如果想固定在底部,可以放在footers里面,然而当把这个元素给删除的时候(如使用*ngIf),它所撑开的headers或者footers...空间是不会自动回收的,这样就会显示空白一片,这个时候,遇到此问题的人,一般第一反应是手动调整headers或者footers的高度样式,如ngClass或者ngStyle.height等等,然而不同平台...(ios、android...)的值是不同的,所以也不好处理。
应用一旦进入画中画模式,就会缩小为屏幕上的一个小窗口,该窗口可拖动可调整大小,非常适合用来播放视频。那么如何才能让App支持画中画呢?接下来将对画中画的开发工作进行详细介绍。...除了画中画模式的属性声明,与分屏模式类似,画中画还需注意进行以下几项处理: 1....对于视频播放页面,Activity代码同样不在onPause方法中暂停播放视频,而应当在onStop方法中暂停播放,并在onStart方法中恢复播放视频。 3....按下任务键并点击“分屏模式”按钮,接着把App拖到分屏区域,即可实现分屏模式的切换。然而系统却没提供“画中画模式”之类的按钮,就无法在桌面把应用拖入画中画,只能在App内部通过代码切到画中画模式。...若要退出画中画模式,则可点击缩小了的画中画窗口,如下图所示这时该窗口放大些许且画面呈现灰影,表示此刻画中画模式正处于控制操作。
[记录点滴]Ionic编译过程的研究 0x00 摘要 之前研究Ionic编译过程的笔记,发出来做个记录。当时是因为有些图片没有拷贝到应用中,所以需要调试编译过程。...ionic run/build/clean... 0x02 执行 以run为例,其会调用build下面的run函数 platforms\android\cordova\lib\run.js build...真正执行 build真正执行的命令在这里: new Api().build(buildOpts) ..../lib/prepare').clean.call(self, cleanOptions); 在Api.js中,build代码如下: Api.prototype.build = function (buildOptions...文件中的log .
1.安装ionic cli //Windows npm install -g ionic@latest //mac sudo npm install -g ionic@latest 2.创建项目 创建...ionic2的项目 默认是创建ionic2项目(--type=ionic-angular )可以不写类型 ionic start myNewProject 创建ionic1的项目 ionic...,pipe,provider,tabs) name 正在生成的组件的名称 可选参数 选项 描述 --no-module 不要为组件生成NgModule --constants 为惰性页面生成页面常量文件...# 创建页面 ionic g page login # 创建组件 ionic g component myComponent # 创建指令 ionic g directive myDirective...# 创建服务 ionic g provider userService # 创建通道 ionic g pipe myPipe 生成的项目目录结构 ?
临睡前写点东西,时间有限,又是一篇简单的文章,是关于手势的,因为白天有人问到。 手势Gestures,ionic官网上的文档描述非常简单,就下面一段就没了,估计很多人看完直接就懵了:只有6个事件吗?...手势.png 我粗略搜索了ionic关于手势事件的文章,像pressup等内容的,居然没有,orz……ionic常常使用流行的库来补充自身,像slide组件就是封装了swiper,而手势是使用了另一个有名的库...所以我们通过了解HammerJS就可以知道ionic3的手势事件——其实是6种,我简单列一下分类及其下事件: 一、pan——平移 ? pan.png 最小平移距离为10px,才会识别为pan....pinch.png 最少需要两个手指的操作,才会识别为pinch pinch pinchstart pinchmove pinchend pinchcancel pinchin pinchout...tap.png 多次tap间隔为300ms,用以区分是不是双击或其它,最大按下时间为250ms,用以区分press或其它 tap 上述事件在ionic中普通使用即可,具体事件参数通过$event获取
闪视卡片是记忆信息的重要工具,它的使用可以追溯到19世纪。 我们将要创建一个很酷的短暂动画来实现它。...看起来像是这个样子的: 闪视卡片示例 Ionic 2 实例开发 新增章节将为你介绍如何在Ionic 2 中的创建一个闪视卡片组件。
——《微卡智享》 本文长度为1839字,预计阅读5分钟 前言 上一篇《Android画中画(PIP)模式使用》介绍了画中画的使用,今天这篇来讲讲Action按钮的使用,主要是广播方式更新UI及Android...定义广播和常量 ACTION_TEXTVIEW和ACTION_TOAST定义的是更新TextView的显示和使用Toast的两个常量,然后再定义一个BroadcastReceiver中写代码的实现,区分不同的...builder.setAutoEnterEnabled(true) } enterPictureInPictureMode(builder.build()) } 判断画中画模式进入和退出时的广播监听...上一篇中使用onPictureInPictureModeChanged函数来判断时入画中画模式后将button按钮隐藏,回到全屏模式后再显示出来,现在在这个函数中再加入进入画中画时注册广播接收,关闭画中画时就释放广播接收...(mBroadcastReceiver) } } 有时候当用户主动按主屏幕键或是最近的应用按钮,还是可以切换到画中画模式,这里就用到了onUserLeaveHint方法了。
目录 【设计模式】汉堡中的设计模式——策略模式 每章一句 前言 情景带入 开始分析 策略模式 尝试编码 如果我要新添加一种形式呢?...,这很符合OCP原则,并且算法的具体实现也被完美的隐藏在各个实现类中,实在是很nice 策略模式的优点 其实刚刚也讲了,这里再总结一下 算法的具体实现封装在各个实现类中,客户端不需要知道 客户端可以根据场合随意切换到底要使用哪一种策略...type为5,免费送策略 通过简单工厂+策略模式,我们把原本存在于客户端中的判断给挪到工厂里面,把所有的运行逻辑都隐藏起来了;每次有新的策略,只需要新建一个类,修改一下HandlerFactory...【简单工厂+策略模式】之后小伙伴会有所疑问,这不就是把客户端的判断逻辑给转移到工厂中而已,虽然对于客户端来说,会更加的清爽,可是似乎没有根本性的解决问题,工厂中把if-else换成了switch-case...给出完整的代码 客户端调用情况 可以发现,原本各个实现类都不需要了,只需要在枚举中定义成员,即可达成原来的效果,而且在匹配对应的策略时,直接使用循环的方式,看起来非常的清爽 如果要添加新的策略,
在开发WordPress 主题的时候务必要开启Debug 模式(调试模式),以便检测出隐藏在前端页面背后的bug。...下面就为大家简单介绍一下开启的方法: 一般技巧 在WordPress 根目录下的wp-config.php 文件大概79行下有下面一段代码: /** * 开发者专用:WordPress调试模式。...* * 将这个值改为true,WordPress将显示所有用于开发的提示。 * 强烈建议插件开发者在开发环境中启用WP_DEBUG。...*/ define('WP_DEBUG', false); 按照其说明,将 false 改成true 就可以开启调试模式。 那么,在什么地方可以看到Debug 的提示呢? 前端页面: ? ?...高级技巧 wp-settings.php 中打开日志并指定日志文件: @ini_set('log_errors','On'); @ini_set('display_errors','Off'); @ini_set
领取专属 10元无门槛券
手把手带您无忧上云