首页
学习
活动
专区
圈层
工具
发布

开启全面屏体验 | 手势导航 (一)

△ Android 10 中新加入的手势交互 通过使用手势交互来执行系统导航,应用可以使用到更多的屏幕空间。这有助于您为用户打造更加沉浸的体验。 在大多数设备上,用户都能选择他们喜欢的导航模式。...现有的三键导航模式 (包含后退、返回首页以及切换最近使用的应用) 会被保留。搭载 Android 10 及以上版本系统的所有设备都要求保留这一导航模式。...全面屏幕体验 我使用 "边到边" (edge-to-edge) 一词来描述那种将内容铺满整个屏幕,以实现更沉浸视觉体验的应用。默认情况下,应用内容的绘制范围从顶部状态栏下方开始,延伸至底部导航栏上方。...但如果应用的 UI 包含一个列表,而且列表顶端还固定放着一个 Toolbar 的话,那把内容绘制在状态栏后面就可能不合适了。同样,有些时候把内容绘制在导航栏下面也不合适。...如果满足以下条件,系统将使用遮盖: 启用了两键或三键导航模式。 设备制造商在手势导航模式下禁用了动态颜色适配。制造商这么做的原因可能是设备的性能不足以支持动态色彩适配。 ?

3.1K30

开启全面屏体验 | 手势导航 (一)

△ Android 10 中新加入的手势交互 通过使用手势交互来执行系统导航,应用可以使用到更多的屏幕空间。这有助于您为用户打造更加沉浸的体验。 在大多数设备上,用户都能选择他们喜欢的导航模式。...现有的三键导航模式 (包含后退、返回首页以及切换最近使用的应用) 会被保留。搭载 Android 10 及以上版本系统的所有设备都要求保留这一导航模式。...全面屏幕体验 我使用 "边到边" (edge-to-edge) 一词来描述那种将内容铺满整个屏幕,以实现更沉浸视觉体验的应用。默认情况下,应用内容的绘制范围从顶部状态栏下方开始,延伸至底部导航栏上方。...但如果应用的 UI 包含一个列表,而且列表顶端还固定放着一个 Toolbar 的话,那把内容绘制在状态栏后面就可能不合适了。同样,有些时候把内容绘制在导航栏下面也不合适。...如果满足以下条件,系统将使用遮盖: 启用了两键或三键导航模式。 设备制造商在手势导航模式下禁用了动态颜色适配。制造商这么做的原因可能是设备的性能不足以支持动态色彩适配。

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

    Android 10 终于来了!增加了不少新特性

    前言 Android 10 正式发布了,根据官网的介绍,聚焦于隐私可控、手机自定义与使用效率,此版本主要带来了十大新特性: [image] 智能回复 使用机器学习来预测你在回复信息时可能会说些什么,这项功能在...手势导航 引入手势导航后,应用程序不仅可以实现全屏幕的内容显示,还能最大限度地减少系统导航键的可见程度,这对于当下主流的全面屏手机尤为重要。...此外:大家发现了没: 1、Android Q 的名称,它并不像以前一样,以甜食命名,也不是以任何以字母 Q 开头来命名,而是简单称它为 Android 10。...通知管理新增了“优先”、“无声”和“自适应通知”三种功能,新增深色主题的背景。...手势导航将变成Android 10的默认导航模式,从屏幕底部向上滑动可回到主界面,上滑并按住松开可切换后台App,从左侧或右侧边缘向相反方向滑动可返回上一桌面。

    1.7K40

    是android 15才有的,解决了什么问题?

    “窗口 Insets(WindowInsets)” 不是 Android 15 才有的东西——它其实早在 Android 10(API 29) 之前就出现了,但到了 Android 11–15,它被彻底取代了老的布局适配机制...一、什么是「Window Insets」WindowInsets 表示的是 系统窗口(System Windows)占用的区域信息,比如:区域示例说明状态栏(Status bar)屏幕上方时间/信号栏内容不要绘制到这里导航栏...(Navigation bar)底部三键 / 手势区域触控手势、返回键等区域键盘(IME)软键盘弹出时会遮挡输入框Display cutout(刘海/挖孔)notch 区域需要避开 简单理解: WindowInsets...三、WindowInsets 解决的问题(相比旧方式)问题旧方案WindowInsets 解决方式状态栏、导航栏尺寸不固定需要硬编码或不同设备适配动态计算 Insets全屏 + 手势冲突不同 ROM 表现不一致官方统一...换句话说: Android 15 更彻底地让 WindowInsets 成为唯一的系统安全绘制边界机制, 所有窗口绘制逻辑(状态栏、导航栏、手势区域)都通过它管理。

    11910

    Android全面屏适配指南

    全面屏手机屏幕的宽高比例比较特殊,不再是以前的16:9。比如三星的Galaxy S8屏幕分辨率是:2960×1440,对应的屏幕比例为:18.5:9。...下面,从以下两个方面来探究APP完美适配全面屏手机的方法: 更大的屏幕高宽比例 虚拟导航键(NavigationBar) 屏幕高宽比例 由于全面屏手机的高宽比比之前大,如果不适配的话,Android默认为最大的宽高比是...布局文件,非常方便; 跟上面介绍的几种布局对比,可以更方便地实现百分比布局,适配全面屏也毫无压力; 虚拟导航键适配 适配虚拟导航键是适配全面屏的重要内容,由于不同手机厂商对系统做了不同的修改,因此对系统界面底部的...现在很多的手机没有底部实体的Home键和Back键,为了支持虚拟导航键,大部分手机都提供了虚拟的导航键,开发者可以通过上面的方法hasNavigationBar获取手机是否支持虚拟导航键。...当然,也可以在【设置】面板中来手动打开或关闭虚拟导航键,并且部分手机还支持使用手势来开启和关闭导航键。 那么,对于开发者来说,怎么知道是否开启了虚拟导航键呢,又如何进行适配呢?

    2.5K30

    Android Q 手势导航背后的故事

    ,用户很容易发生误触事件) 手势导航有助于提供沉浸度更高的应用体验: 大屏窄边已成为当下主流硬件趋势,而手势导航能够最大限度减少系统在应用的内容之上绘制视觉元素 (例如: 主屏/返回键和底部导航栏),从而为用户创造更具沉浸感的体验...鉴于并不是所有用户都偏好使用手势导航,尤其是那些在灵活度及活动性方面受限的用户,因此,所有的 Android 设备会继续提供三键导航支持。 为什么选用这些手势?...许多用户对它给予了很高的评价,认为返回键让 Android 导航更加简便,也更易学习 (尽管,业内对于 “正确” 行为的定义还尚有争议) ——而且,返回键的使用也十分频繁,甚至超过主屏键 (Home)...从定性角度来看,尽管许多用户认为三键导航比 Android Q 模式更加符合人体工程学,但是后者要更适合单手操控,且操作范围也更广。...在 Android Q 模式下,返回手势在最初 3 天的使用频率较低,但过了这段时间之后,用户每天进行返回操作的次数将与三键导航及 Android P 导航中的次数持平。 开发者该如何应对?

    2.6K50

    处理视觉冲突 | 手势导航 (二)

    Insets 区域负责描述屏幕的哪些部分会与系统 UI 相交 (intersect),例如导航或状态栏。如果您的控件出现在了这些区域内,就可能被系统 UI 遮盖。...在系统使用手势导航模式时 (即导航栏变成屏幕底部的一条粗线,也就是导航条),由于导航条有动态色彩调整功能,这个冲突可能不会那么明显。...Android 10 带来了新的手势导航模式,允许用户通过手势动作,而不是导航按钮来进行导航: 从屏幕左/右边缘向中间滑动,相当于后退按钮 (Back)。...在 Android 10 上,系统手势区域如下: △ 左/右侧的后退操作区域宽 40dp,下方的主屏操作区域高 60dp 如果您有需要滑动操作的控件出现在了系统手势区域内,就可以使用对应的数值来将这些控件挪开...在 Android 10 上,当前唯一的强制区域是屏幕底部的主屏手势区域,系统保留这个区域就可以让用户在任何时候都可以退出当前应用: △ 底部 60dp 即为强制系统手势边衬区 稳定显示边衬区 方法:

    3.6K30

    腾讯文档 | 全平台系统设计

    1.2 系统环境 Windows 和 Mac 的头部有差异;部分 Android 系统底部保留了虚拟三大金刚键;小程序右上角固定有一个控件;H5 自带顶部和底部导航栏,需考虑最小展示区域。...可以通过信息降噪,加强对比来让信息传达能明确,帮助用户完成单个任务;而清晰的导航可以避免小屏幕上页面频繁切换所带来的导航负担。 用户通常为单手手持设备,因此我们将主导航下移使得更容易点击。...平板端 在交互方式上和手机很相似,但更大的屏幕尺寸允许用户实现轻量的多任务。在平板上我们支持了三栏布局以提升信息展示效率,减少不必要的页面跳转。...考虑到用户通常为双手手持,我们将主导航放在了左侧更方便点击的位置。 桌面端 是主力生产平台,通常是多窗口多任务,键鼠操作精确高效。...同时在列表页中,更大的空间让我们可以把目录树展开,减少导航跳转。 下图汇总了三个端导航的映射关系以及功能上的差异点。 2.

    2.8K20

    大屏时代的生态变迁,看平板手机的拇指热键与界面布局

    虽然根据Android设计规范的要求,我们应该在小屏手机中将App的导航与功能控件放置在顶部,以避免与底部的系统导航栏产生冲突,但是在大屏设备上,可以将一些高频控件从标准的Action Bar中移出,并放置到屏幕底部...在默认情况下,Android的Action Bar会将所有的导航及功能选项整合到界面顶部(左),而分体式Action Bar则会将一些重要功能放到屏幕底部,使其更便于被拇指点击(右)。...在Android中,将交互元素堆叠在屏幕底部的做法确实容易增加误操作的可能性,这是客观事实。...可以通过屏幕底部的悬浮按钮触发更多功能,同时避免与Android的系统导航栏产生大范围的冲突。 此外,也可以尝试将控件放置在顶部,但使其能够响应某种作用于屏幕下方的辅助交互形式。...三星为其Android平板手机创造了一种独特的单手操作模式(如图1.26所示),整个界面会缩小到普通小屏手机的尺寸,这样就使几乎所有的交互元素都能位于拇指热区当中了。

    3K10

    Android 15新特性,强制edge-to-edge全面屏体验

    绝大部分的App其实都只使用了绿色这部分的空间,屏幕上方的状态栏以及屏幕下方的导航栏这两个白色部分的空间都是没有利用起来的,想想你写的App是不是也是这样?...当我们在照片墙上进行滚动时,你会发现屏幕底部导航条的颜色会随着滚动而发生变化。...这个是Android系统自带的功能,为了保证在启用了edge-to-edge全面屏体验之后,底部导航条不会因为因为背景的原因而难以识别。...发现了这个现象之后,可能细心的朋友立马就察觉到了,那如果我手机底部的导航栏模式不是这种手势导航栏,而是传统的Back、Home、Task 3按键导航栏,edge-to-edge全面屏体验会变成什么样呢?...另外从Android 10开始,Google引入了手势导航,这使得手机屏幕的左右两侧可以用于触发Back键操作,手机屏幕的底部可以用于触发Home键操作,触发区域如下图中的黄色部分所示。

    2.5K11

    如何处理手势冲突 | 手势导航连载 (三)

    作者 / Chris Banes, Android 开发者关系团队工程师 我们将在近期为大家带来一个关于 "手势导航" 的系列连载,本文是手势导航连载的第三篇,如果您希望查看前两篇文章,请点击下方链接...对 Android 10 来说,强制交互区域只有一个,那就是屏幕底部。该区域内的滑动操作能让用户返回主屏或访问最近使用的其他应用。...但请注意,我们依然需要在播放控件底部插入一个内边距,其值等于系统栏的高度,这样可以使歌曲名称等文本不会被系统导航条 (即屏幕底部的那条 "横线") 遮盖。...这就是 Android 10 中新引入的手势区域排除 API。 应用可以通过 Android 10 中新增的系统手势区域排除 API 来让系统边缘的一部分区域不响应系统手势。...这时屏幕底部的系统手势交互冲突已经解决了,但屏幕左右两侧的 "后退" 操作依然和进度条有冲突: 在上图中,由于进度条的播放头正好位于右侧手势区内,因此系统认为用户正在用手势执行 "返回" 操作,因此显示了

    6K30

    『React Navigation 3x系列教程』之createStackNavigator开发指南

    屏幕转场风格 默认情况下,createStackNavigator提供了转场过渡效果,在Android和iOS上过渡效果是不同的,这也是React Native重平台性的一个体现,在Android上从屏幕底部淡入...,在iOS上是从屏幕的右侧划入,当然你也可以通过配置让StackNavigator支持屏幕从底部滑入的效果。...RouteConfigs RouteConfigs支持三个参数screen、path以及navigationOptions; screen(必选):指定一个 React 组件作为屏幕的主要显示内容,当这个组件被...例如,您可以使用模糊视图来创建半透明标题。...第三步:界面跳转 export default class HomePage extends React.Component { //在这里定义每个页面的导航属性 static navigationOptions

    6.8K10

    浅谈 Android 自定义锁屏页的发车姿势

    切歌再熄灭屏幕   这时的她估计已经被广场舞的歌曲骚扰了有10秒,续了10次命,这是我们程序员不愿意看到的,所以有必要依靠我们灵活的双手构建出自定义的音乐锁屏页,将切歌过程被压缩为两步:点亮屏幕和切歌,...但是当用户在锁屏页底部滑动,隐藏后的虚拟按键还是会滑出,而且如果用户是物理按键的话就必须进行屏蔽了。   Back键和Menu键可以通过重写onKeyDown()方法进行屏蔽: ?   ...这样的设定对于看图软件,视频软件等等没什么大问题,但是对于游戏之类用户需要经常点击屏幕的 App,那就几乎是悲剧了——这也是为什么你在 Android 4.4 之前找不到什么全屏模式会自动隐藏导航栏的应用...设置了前文的5个Flag之后,锁屏页效果图如下: ? 手指在屏幕底端上划,Navigation Bar会弹出,悬浮于锁屏页底部,随后自动消失。...在 Android 5.0 之后引入了 Material Design,状态栏和导航栏也玩出了更多花样。

    4.5K91

    沉浸模式 | 手势导航连载 (四)

    作者 / Chris Banes, Android 开发者关系团队工程师 本文是手势导航连载的第四篇文章,如果您希望了解其他手势导航的话题,请查看本系列的其他文。...我们来看一下运行在 Android 10 上,且使用手势导航的 Markers 绘图应用: image.png 如上图所示,一旦用户开始在屏幕边缘附近滑动 (绘制),就会触发后退手势,这会打断用户当前的操作...屏幕底部的主屏手势区域依旧会正常存在,是无法排除的 "强制" 手势区域。处于粘性沉浸模式的应用可能会占用两个垂直边缘的整个长度,因此屏幕底部的主手势区域可能是用户呼出系统栏并退出应用的唯一方法。...如果用户想要退出应用,则可以从屏幕底部向上滑动呼出系统栏,进行后退或返回主屏的操作。...在 Android 10 上使用手势区域排除 API github.com/chrisbanes/… 总结对比: 非粘性与粘性 呼,一口气看到这里可能有点记不住。

    1.6K30

    可折叠设备、平板设备和大屏设备更新一览

    让我们来谈谈基础支持,也就是让应用 "大屏幕就绪" 必须支持的功能。谈到大屏幕就绪,有三个重点课题: 为大屏幕设计 多任务 输入模式 下面让我们逐一展开介绍。...△ 在 Chrome OS 设备上使用 Android 应用的用户通常会配置实体键盘;应用应该支持标准的键盘导航和快捷键,以提供更全面的无障碍使用体验 组件更新 我们更新了 Jetpack 和 Material...NavRail 垂直导航栏 在功能上等同于底部导航,并在大屏幕上提供了更符合人体工程学的导航体验。当您扩展用户界面到大屏幕上时,使用 NavRail 会更利于手指点击,因为用户通常会握住大屏幕的两边。...因为在这种情况下,使用底部导航栏会造成遮挡,从而减少可见内容的数量,特别是当平板设备横向使用时。 其他组件 我们还对其他多个组件进行了更新。...独占资源 Android 10 提供了同时恢复多个应用的功能,并设有单一的 "顶层恢复" 应用。大多数应用无需更新即可受益于这一变更。最明显的例外则是当您的应用使用了独占资源,如麦克风或摄像头的时候。

    2.7K20

    Android Studio 4.0+ 中新的 UI 层次结构调试工具

    该版本的布局检查器延续了之前版本的功能并且更加多样化。首先,布局检查器可以用两种方式显示 UI 层次结构: 以二维的轮廓格式,或者以一种称为旋转模式 (rotation mode) 的三维视图形式。...,但是里面少了一些东西: 底部的导航标签。...看一下布局文件,我们可以看到底部的导航视图是存在的,但是屏幕却没有显示它。...首先我们可以看到 LinearLayout 里布局了一个工具栏 (toolbar),然后是 navigation host。在它下面,您可以看到导航栏位于最下方——看来底部的导航栏被挤出了屏幕。...LinearLayout 的尺寸正常了,但是底部的导航栏的位置不对: 有很多方法可以解决这个问题: 我们可以设置 navigation host 和底部导航栏的 layout_weight 参数,或者我们可以将

    2.8K20

    为任意屏幕尺寸构建 Android 界面

    比如其中的一个成功案例 Candy Camera,它通过优化可折叠设备和大屏幕的布局,使得使用这些设备的用户在应用上花费的时间增加了 10%,7 天用户留存率更是增长了 14%,而这并不是个例。...△ 更改之前的 Trackr 样式 上图是我们进行更改之前的 Trackr 样式,您会发现不管在什么设备或屏幕下,都会有一个单窗口任务列表以及用于导航到归档或设置页面的底部应用栏。...△ 警告窗口 展开警告可以查看到 Android Studio 是否提供了修改建议,这里关于底部应用栏警告的修改建议就是使用 Navigation Rail、抽屉式导航栏,或使用顶部应用栏代替。...当查看 Phone Reference Device 时,依然能够看到底部应用栏,而切换到更大的屏幕后,我们发现它开始使用 NavRail 了,一切按照我们的预期进行。...当前,这一功能可在 Android 10 上使用,随着时间的推移将支持更高的 API 级别,以确保现有的屏幕截图测试能够继续与自动化测试设备配合运行。

    5.4K20

    Android Studio 4.0+ 中新的 UI 层次结构调试工具

    请注意,旋转仅在 Android 10 或以上的设备上才可以使用。 您也可以选中一个视图,然后右键点击它后,窗口仅显示它的子视图。 同样,您可以仅显示一个所选视图的父视图。...和旋转特性一样,这个功能也仅适用于 Android 10 以上的设备。 通过布局检查器您还可以将新设计的界面和现有 UI 进行比较。...当您运行应用的时候,您会看到一个可爱的 android,但是里面少了一些东西: 底部的导航标签。看一下布局文件,我们可以看到底部的导航视图是存在的,但是屏幕却没有显示它。...首先我们可以看到 LinearLayout 里布局了一个工具栏 (toolbar),然后是 navigation host。在它下面,您可以看到导航栏位于最下方——看来底部的导航栏被挤出了屏幕。...LinearLayout 的尺寸正常了,但是底部的导航栏的位置不对: 有很多方法可以解决这个问题: 我们可以设置 navigation host 和底部导航栏的 layout_weight 参数,或者我们可以将

    3.6K10

    为 Android 应用打造精良的 Chrome OS 使用体验

    这里我们整理了 (以及新增了一些) 适配时的重点供 Android 开发者们参考。 让 Android 应用适配 Chrome OS 生态环境: www.youtube.com/watch?...△ 同一个界面针对不同屏幕的布局文件 导航模式 同时,您的应用在不同的屏幕尺寸上都应该易于使用。提供纵向、横向等布局,使得应用可以根据可用的屏幕宽度,在底部导航、侧边导航和侧边扩展导航模式之间切换。...构建不同导航的示例: github.com/google/chro… 电子邮件应用 Reply 就针对多种屏幕重新设计了其功能和布局。...使用 Chromebook 进行开发 在 I/O 上我们还发布了很多新内容,将 Chrome OS 打造成为 Web 和 Android 开发者更快捷、更简单、更安全的开发环境,具体包括: 一键安装 Android...△ 一键安装 Android Studio 通过 USB 连接使用 ADB 调试 不再需要开发者模式,只需使用 USB 连接手机即可进行调试。

    68310
    领券