首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

实现边到边的体验 | 让您的软键盘动起来 (一)

Android 11 中的新功能之一是可以让应用在对于屏幕上的软键盘打开和关闭的过程创建无缝过渡的动画效果,这一功能源自 Android 11 中对 WindowInsets API 的大量改进。...总共分为三步: 首先,我们需要做到 "边到边" (edge-to-edge); 第二步,应用需要针对边衬区动画做出反应; 最后第三步就是应用在恰当的场景中控制并使用边衬区动画。...,视窗希望在极端的情况下该如何布局内容。...WindowInsetsController 之前我们提到过,有一些 View.SYSTEM_UI_* 标志已经在 Android 11 中被弃用,并且被新的 API 代替。...,这些也都在 API 30 中被弃用,并被 WindowInsetsController 中的 API 代替。

35720

实现边到边的体验 | 让您的软键盘动起来 (一)

Android 11 中的新功能之一是可以让应用在对于屏幕上的软键盘打开和关闭的过程创建无缝过渡的动画效果,这一功能源自 Android 11 中对 WindowInsets API 的大量改进。...总共分为三步: 首先,我们需要做到 "边到边" (edge-to-edge); 第二步,应用需要针对边衬区动画做出反应; 最后第三步就是应用在恰当的场景中控制并使用边衬区动画。...上面的每一步都环环相扣,所以我们会在不同的文章中分别介绍。在这个系列的第一部中,我们会介绍如何实现边到边,以及 Android 11 中相关 API 的改动。...,视窗希望在极端的情况下该如何布局内容。...#3: 处理视觉冲突 现在让我们来看一下第三步: 避免与系统 UI 产生重叠,也可以说是使用视窗边衬区来决定如何移动应用的内容来避免与系统 UI 的冲突。

1.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    WWDC 2017前瞻:硬件细节已遭曝光,但苹果在软件方面的布局却始终慎重

    WWDC 2017开幕在即,小编想与你一起重温往届WWDC上iOS、macOS等系统软件的更新发展之路。 ?...iOS 8 在WWDC 2014上更新的iOS 8在功能上拥有诸多变革。...其次,苹果首次在iOS 8上开放了输入法SDK,方便用户在不越狱的情况下也能使用第三方输入法。 ? 而在果粉们较为关心的iMessage功能上,iOS 8也作出了较大改进。...开发者应用 在WWDC 2014上,苹果引入了一种全新的编程语言Swift。与之前使用的Objective-C相比,Swift的优势在于速度、安全、互动等全方位。...在此次更新后,iCloud Drive也可以在Mac上使用,所有文件在macOS和iOS之间共享,支持自动将旧文件移动到iCloud上,从而释放macOS的空间。

    1.3K60

    【老孟Flutter】Flutter 2 新增的功能

    此外,我们在flutter.dev上创建了一个新的Ads页面,您可以在其中找到所有有用的资源,例如插件实施指南,内嵌横幅和原生广告代码实验室,以及重叠横幅,非页内广告和奖励视频广告代码实验室。...实际上,此版本带来了与iOS相关的178个PR合并,包括23495(将状态恢复带到iOS),67781(它满足了长期存在的直接从命令行构建IPA而无需打开Xcode的要求)的要求,以及69809,更新了...Flutter Fix是事物的组合。首先,dartCLI工具有一个新的命令行选项,名为dart fix,它知道在哪里可以查找已弃用的API列表以及如何使用这些API更新代码。...图片发布 多年来,我们一直在将旧的API标记为已弃用,但是现在有了关于何时删除实际已弃用的API的政策,Flutter 2是我们第一次这样做。...即使我们尚未捕获所有已弃用的API作为数据来提供Flutter Fix,我们仍将继续从先前已弃用的API中添加更多信息,并将在未来的重大更改中继续这样做。

    7.9K20

    【方向盘】使用IDEA的60+个快捷键分享给你,权为了提效(视窗、选择篇)

    本文继续,聊聊IDEA在视窗和选择方面的快捷键操作。...(view):内容的载体 选择(selection):操作的目标 IntelliJ IDEA快捷键 视窗 在图形化界面里,视窗的重要性不言而喻。...由于“屏幕”显示面积有限,我们经常需要隐藏/打开此视窗,该动作很明显属于高频动作,所以特别适合用有个快捷键来“代替”,提高开发效率。...那么如上图所示,当打开的视窗比较多了,已严重干扰到编辑器窗口的“显示面积”时,怎么办? 忍。不乏少数,编辑器视窗一行只能显示几十个字符了、共只能显示十几行了,依旧能继续干 逐个关闭。...总结 本文继续介绍了IDEA 视图和选择相关的快捷键,希望在文本编辑、代码编辑的道路上能够帮助到你来提高开发效率。 还是补上那句话:快捷键没有任何技巧性,练就完了!

    59710

    CSS入门13-单位详解

    3.1.2-2 3.1.3 ex ex是指所用字体中小写x的高度,不同字体x的高度可能不同。实际上,很多浏览器取em值一半作为ex值。 ex在实际中常用于微调。...3.1.4 ch ch与ex类似,被定义为数字0的宽度。当无法确定数字0宽度时,取em值的一半作为ch值。 IE8-不支持。 ch在实际中主要用于盲文排版。...3.2 相对视窗宽高的长度单位 视窗相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时,它们都会相应地缩放。然而,当根元素的overflow值为auto时,任何滚动条会假定不存在。...关于视窗相关的单位有vh、vw、vmin、vmax4个单位。 兼容性上,IE8-不支持,IOS7.1-不支持,android4.3-不支持。...3.2.2 vw 布局视窗宽度的1/100 设置width:100vw;可以达到与屏幕等宽的效果。

    64120

    Playwright系列:第13章 Playwright实用技巧

    在 Playwright 测试中,我们经常会遇到一些实用场景,如等待页面加载、处理弹窗、上传下载文件等。...本章我们将学习 Playwright 中的一些常用技巧,在测试脚本中运用这些技巧可以实现复杂的测试场景,也让测试脚本更加健壮。...Cookie page2 = page.context().newPage(); // page2 可以读取刚才设置的Cookie,实现跨页面登录测试 移动设备视窗调整 在移动设备上测试时,我们可能需要调整设备视窗来适应不同设备或调试移动界面...- `chai`:功能强大的通用断言库,可以通过 `chai-playwright` 扩展包使用 Playwright 相关断expect-playwright言。...Playwright 技巧涵盖了测试过程中常见的实用场景,包括等待处理、文件操作、Cookie 使用、视窗调整和断言等。

    1.9K50

    vw, vh视窗宽高单位的使用

    因此,本文后面要展示的N个demo,就没有必要再低版本的IE浏览器上查看了~~ 三、明确含义 看到上图黄色背景标示的文字(“视窗”用“视区”一词代替更恰当): vw 相对于视窗的宽度:视窗宽度是100vw...最佳测试浏览器是IE9. // zxx: 不容易啊,IE系终于勃起了一把~~ 四、承上启下 视区相关单位vw, vh目前浏览器的支持算是比较弱的,因此,基本上不可能从现有的站点上找到相关的实际应用。...因此,我没事的时候,脑子里就要盘算,该单位可用在何处呢?如果跟其他CSS3的属性配合使用呢?...尼玛,当我做覆盖以及定位这两个demo的时候,心一下子凉下去了: vw, vh用在宽度自适应上没有价值——%可以实现之~~ 现在又:vw, vh用在absolute/fixed定位属性元素上没有价值——...%可以实现之~~ vw, vh这两个视区相关动态单位似乎应用前景一下子黯淡了很多,潜力似乎也就那样——想来想去,得出一个结论:vw, vh视区大小相关单位只适用于非定位元素的高度相关属性上!

    2.5K10

    macOS 13 Ventura 10 大新功能一览

    App 与视窗之间的全新工作方式 「幕前管理」会自动整理开启的app 及视窗,以便用户专注于工作,同时让一切一目了然。...用户正在使用的视窗会在中间显眼位置显示,其余开启的视窗会置于左侧,让用户轻松迅速地在任务之间自由切换。用户进行需要使用不同app 的特定工作或项目时,亦可将视窗组合在一起。...「幕前管理」可与macOS 其他视窗工具如「指挥中心」及「空间」配合使用,只需点按一下,用户就能轻易前往桌面。 2....此外,Spotlight 现在更提供艺人、电影、演员、电视节目、商家及体育相关的丰富搜寻结果。 8.更安全的Safari 浏览体验 使用通行密匙在Safari 浏览网页就更加安全。...为相簿「上锁」 「已隐藏」和「最近删除」相簿预设为已锁上状态,你可在Mac 上使用Touch ID 或密码的认证方式来解

    1.9K20

    兼容iphone x * 刘海的正确姿势

    以往的做法 其实对于 web 前端来说,刘海在绝大多数的场景下是可以不用处理的,因为 safari 或客户端(微信,手Q等)的 statusBar 已经替我们抹平了顶部刘海,我们只需要关心底部的那条黑色的胡子...如果明年又多几个尺寸那就会是没完没了的改改改。 正确的姿势 在 ios 11 中我们可以使用 viewport-fit=cover + safe-area-inset-*。...Webkit在iOS11中新增CSS Functions: env( )替代constant( ),文档中推荐使用env( ),而 constant( ) 从Safari Techology Preview...41 和iOS11.2 Beta开始会被弃用。...否则 calc 会计算出一个不合法的值,则本句声明不会生效。这样在不支持 env 设备中也可以达到兼容的目的。 目前到这,在横屏场景下左侧的内容就不会被刘海遮挡住了: ?

    1.1K30

    模态框的最佳实践

    2 内容概要 来自 Wikipedia 的定义:模态框是一个定位于应用视窗定层的元素。它创造了一种模式让自身保持在一个最外层的子视察下显示,并让主视窗失效。用户必须在回到主视窗前在它上面做交互动作。...内容是否相关。模态框是作为当前页面的一种衍生或补充,如果其内容与当前内容毫不相干,那么可以使用其他操作(如新页面跳转)来替代模态框; 模态框内部应该避免有过多的操作。...举两个例子,Facebook 在这方面给我们很好的 demo,它的分享模态框与主视窗是在同一个位置,给人非常流畅的体验。还看到一个细节,从主视窗到模态框焦点上的字体会变大。...你让这些用户如何退出 很多的 Windows PC 都已经获得了很好的触屏支持,而你的网页依旧只支持了键盘跟鼠标? 在没有苹果触摸板的地方,横向滚动条是不是一个逆天的设计?...这时候,对于产品而言,我们可以采集用户研究的方法去判断,用数据结论代替感官上的结论。 另外,可访问性在这两年时不时会在一些文章中看到,但非常少。

    1.4K40

    关于Flutter 2.5稳定版你知道多少?

    Flutter 应用在真实的使用场景下的应用模板等。...作为 调整消息通道 的一部分,我们从消息编解码器中移除了不必要的拷贝,在不同内容的大小和设备上减少了高达 50% 的延迟 (详见 #25988、#26331)。...4010 [camera] 在 iOS 上不触发平放时的设备方向 4158 [camera] 修复 iOS 上设置焦点和曝光点的坐标旋转 4197 [camera] 修复相机预览在设备方向改变时不总是重建的问题...集成测试是在设备上运行的整个应用测试,在 integration_test 目录下运行,并使用与 widget 单元测试相同的 testWidgets() 功能。...弃用意味着这些平台可能可以正常使用 Flutter,但我们不会在这些平台上测试新版本的 Flutter 或插件。您可以在 Flutter 文档网站 上看到 目前 Flutter 支持的平台列表。

    3.7K20

    论CSS中可使用的font-size的长度单位

    本文里, 你可以学习到不同的长度单位,以及它们是如何影响其元素中的字体大小的。 像素单位(px) 像素是固定的长度单位。它们是根据用户屏幕上的每一个点的尺寸确定的。...它们常用在自适应网站设计中与根据不同的页面宽度断点设置不同的字体大小。...参加CodePen上的使用百分比设置字体大小的例子,(by @SitePoint)。 视窗单位(vw,vh,vmin,vmax) 视窗单位非常有趣。...例如,1vw在视窗为400px宽时是4px,在视窗宽度为1000px时,就变成了10px。SitePoint上已经有一篇文章专门讨论视窗单位和它们的应用场景。想了解的话可以去看一下那篇文章。...一个小技巧就是在使用视窗单位的同时,也使用其他字体设置,避免字体过大或者过小。这个技巧在视窗单位的基础排版一文中有具体解释。

    2.4K20

    精读《模态框的最佳实践》

    2 内容概要 来自 Wikipedia 的定义:模态框是一个定位于应用视窗定层的元素。它创造了一种模式让自身保持在一个最外层的子视察下显示,并让主视窗失效。用户必须在回到主视窗前在它上面做交互动作。...内容是否相关。模态框是作为当前页面的一种衍生或补充,如果其内容与当前内容毫不相干,那么可以使用其他操作(如新页面跳转)来替代模态框; 模态框内部应该避免有过多的操作。...举两个例子,Facebook 在这方面给我们很好的 demo,它的分享模态框与主视窗是在同一个位置,给人非常流畅的体验。还看到一个细节,从主视窗到模态框焦点上的字体会变大。...你让这些用户如何退出 很多的 Windows PC 都已经获得了很好的触屏支持,而你的网页依旧只支持了键盘跟鼠标? 在没有苹果触摸板的地方,横向滚动条是不是一个逆天的设计?...这时候,对于产品而言,我们可以采集用户研究的方法去判断,用数据结论代替感官上的结论。 另外,可访问性在这两年时不时会在一些文章中看到,但非常少。

    57010

    一个简洁、有趣的无限下拉方案

    兼容性 主要在 Safari 上兼容性较差,需要 12.2 及以上才兼容,不过还好,有 polyfill 可食用。 一些应用场景 页面滚动时的懒加载实现。 无限下拉(本文的实现)。...那么: 最开始渲染的是数组中序号为 0 - 19 的元素,即此时对应的 firstIndex 为 0; 当序号为 19 的元素(即上一步的 lastItem )进入视窗时,我们就会往后渲染 10 个元素...获取滚动距离,然后: 设置父元素的 translate 来实现整体内容的上移(下移); 再基于这个滚动距离进行相应计算,得知相应子元素已经被滚动到视窗外,并且判断是否应该将这些离开视窗的子元素移动到末尾...这看起来与实际业务场景有些不符。解决思路: 思路 1、利用 Skeleton Screen Loading 来同步渲染数据元素,不受数据异步获取的影响。...延伸拓展 请大家思考一下,无限下拉有了,那么无限上拉基于这种方案要如何调整实现呢? 如果将 Intersection Observer 用到 iScroll 里面去,原有方案可以怎样优化?

    1.9K20

    ISUX「六月」行业设计趋势速递

    Stage Manager 分组管理桌面 在iMac和iPad上多任务时,使用Stage Manager可以快速切换主视窗,并对任务进行自由组合视窗。...苹果使用iPhone上的超广角摄像头在通过计算提供一个桌面俯视视图,方便桌面操作演示。 双屏联动 通过数据线连接,即可将ipad和imac进行联动,更大的屏幕,各终端无需重复安装应用。...对所有人有以下重要更新点: ① Android长按列表中聊天可以先预览并进行聊天标记(包括已读、静音、固定或删除)  ② IOS外部分享提高发送大文件时,增加发送进度动画。 ...机器上,当手机连接到音频设备时,会在更多更重要的场景推荐音乐,包括锁屏状态。 ...16、年轻人的戏剧化表达  现在在微博等平台,年轻人喜欢用这种夸张文本来描述画面,来表达自己激动的心情。  在饭圈流行的花墙,现在突破饭圈,被很多年轻人用在各种祝福场景中。

    1.1K10

    【SAS Says】基础篇:SAS软件入门(上)

    一些更好的问题或许是,比如,它们的某些模块相比起来如何,它们的扩展性相比如何、它们的运算效率相比如何等等。个人认为,最好的问题是,在我现在如此这般的情况下,哪一款软件最适合我?...1.6 SAS视窗环境中的视窗和命令 1.7 在SAS视窗环境中提交程序 ---- SAS软件入门(上) 1.1 SAS语言 许多软件要么是菜单驱动,要么是命令驱动(输入命令——看结果)。...但是超过32767个变量的SAS数据集不能用在早期的SAS版本上。 SAS命名规则 为你的变量和数据集命名,使它们容易被辨别。...如果你使用的是个人电脑,那么SAS视窗环境的感觉和其他软件类似。 SAS企业向导 ? 如果你有SAS企业向导软件,这个软件在windows下即可运行。...你可以用这个软件提交程序:使用插入菜单打开代码窗口,输入序或打开现有SAS程。之后你可以用本地电脑、或者在远程服务器上(需要安装)运行SAS程序。 非交互式模式 ?

    3.8K80
    领券