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

全屏、沉浸式、fitSystemWindow使用及原理分析:全方位控制“沉浸式”的实现

APP端之所以能够更改状态栏颜色、导航栏的颜色,其实还是操作自己的View更改UI。...可以这么理解:状态栏与导航栏拥有自己独立的窗口,而且这两个窗口的优先级较高,会悬浮在所有窗口之上,可以把系统自身的状态栏与导航栏看做全透明的,之所有会有背景颜色,是因为下层显示界面在被覆盖的区域添加了颜色...下面就来分析一下,APP层的API如何影响SystemUI的显示的,并一步步解开所谓沉浸式与全屏的原理,首先看一下如何更改状态栏颜色。...DecorView内容区域的扩展与fitsystemwindow的意义 fitSystemWindow属性可以让DecorView的内容区域延伸到系统UI下方,防止扩展覆盖,达到全屏、沉浸等不同体验效果...DecorView级别的WindowInsets消费 默认样式Activity的状态栏是有颜色的,如果内容直接扩展到状态栏下方,一定会被覆盖掉,系统默认的实现是DecorView的根布局上加了个padding

5.3K40

一键切换亮色模式和暗色模式,用Figma搞定!

以一个PC端的应用界面为例。 本文中,我们创建样式的同时,会说明我们为什么会选择特定的颜色。因为这些差别对设计师非常重要。 0.常量样式 重要的是要注意,在为明暗模式选择颜色颜色会略有不同。...1.1颜色样式-灰度样式 灰度颜色是可更改样式,因为黑暗模式下应用相同的颜色时时,您将不会获得与明亮模式下相同的效果。...请注意:可以将系统颜色作为背景,但例如按钮,标签等颜色应该从亮色或者暗色模式的“常量样式调用。 2. 效果样式 效果样式是应用于设计系统某些组件的微小更改和效果。...您可以暗色模式下使用相同的效果,但是由于阴影颜色已经很暗,除非更改背景颜色,否则用户可能很难看到该效果。 内阴影效果与外部投影效果非常相似,但是这次阴影效果在元素内部给出。这使您的块元素看起来更厚。...为了使此功能起作用,应该区别对待可以“自适应”的状态栏和“非自适应”的状态栏。 3.总结 让我们总结一下,系统样式的总体结构如上图所示。

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

腾讯开源超实用的UI轮子库,我是轮子搬运工

QMUIBottomSheet Dialog 的基础上重新定制了 show() 和 hide() 的动画效果, 使 Dialog 界面底部升起和降下。... item 右侧显示一个开关或箭头或自定义的View QMUIDialog 提供了一系列常用的对话框,解决了使用系统默认对话框不同 Android 版本上的表现不一致的问题。...QMUIProgressBar 一个进度条控件,通过颜色变化显示进度,支持环形和矩形两种形式,主要特性如下: 支持进度条以文字形式显示进度,支持修改文字的颜色和大小。...配合 QMUIWindowInsetLayout 使用,可使 QMUITopBar 支持沉浸式状态栏界面顶部延伸到状态栏。...覆盖组件的默认表现 你可以通过项目中的 theme 中用 (value) 的形式来覆盖 QMUI 组件的默认表现。

4.7K30

最新iOS设计规范七|10大视觉规范(Visual Design)

iOS应用,您可以配置界面元素和布局,以iPad上执行多任务处理拆分视图中,屏幕旋转以及在其他设备上自动更改形状和大小。设计一个适应性强的界面在任何环境下都提供出色的体验非常重要。...请注意,当诸如录音和位置跟踪之类的后台任务处于活动状态,全屏iPhone上的状态栏不会更改高度。 如果你的APP当前隐藏状态栏,请重新考虑全屏iPhone的隐藏与否。...用户可以选择深色模式作为其默认界面风格,并且可以通过设置,使其设备环境光线较低自动切换到深色模式。由于用户系统范围内做出这些选择,因此他们通常希望所有应用程序都能尊重他们的偏好。 ?...暗模式是动态的,这意味着当界面位于前景(例如,弹出框或模式表),背景颜色会自动从基本颜色变为高色。该系统还使用增强的背景色多任务环境的应用程序之间以及多窗口上下文中的窗口之间提供视觉隔离。...这种格式将不同的字体样式组合到一个文件,并支持样式之间进行插值以创建中间的样式。通过插值,字体可以适应所有尺寸,同时为每种尺寸专门设计。

7.9K30

Android | Compose 初上手

该函数通过调用其他可组合函数来使用这些数据来描述界面。将适当的数据传递给这些可组合函数,并沿层次结构向下传递数据。 image.png 当用户界面交互界面发起 onClick事件。...重组 Compose ,你可以用新数据再次调用某个可组合函数,这回导致组合函数重新进行重组。系统会根据需要使用新数据重新绘制发出的微件。Compose 框架可以只能的重组已经更改的组件。...以下演示了呈现列表重组如何跳过某些元素: /** * Display a list of names the user can click with a header */ @Composable...(TextLayoutResult) -> Unit = {},//计算布局回调 style: TextStyle = LocalTextStyle.current //文本的样式配置,如颜色...还有一点须要注意,如果要使用沉浸式状态栏,就需要自定义 topBar 了,要不然状态栏会被 topBar 覆盖。下面代码是设置沉浸式状态栏的。

5.2K20

iOS之深入解析Xcode 13正式版发布的40个新特性

四、资产目录 应用程序现在可以使用其资产目录的 iOS 应用程序图标资产作为备用应用程序图标; 允许选择适用于所有平台(包括 watchOS)的通用系统颜色。...,您可以使用属性检查器的 localize 属性系统 NSMenuItem 上配置本地化的等效键选项; iOS 15 的应用程序,可以使用属性检查器的 localize 属性系统 UI...; XCTest 现在能够受支持的 iOS 设备上的 UI 测试合成指针交互; Xcode 现在为在运行测试崩溃的进程收集代码覆盖率数据; 性能 XCTests 现在支持测量应用程序启动的 CPU...,通过转换方案创建的测试计划需要手动启用测试超时以保留现有行为; 用户界面测试现在支持 macOS 中使用 swipeUp、swipeDown、swipeLeft 和 swipeRight 系列方法;...使用 provideUserInterface 属性来确定 AUAudioUnit 是否具有用户界面

8.7K40

关于 Android 的各种 Bar 和“透明状态栏”的一些知识

说明: Android 4.4 之前状态栏一直就是黑色的, Android 4.4 带来了 windowTranslucentStatus 这一特性,这个时候才可以给状态栏设置颜色。...关于沉浸式和透明式概念说明 谷歌官方中: Android 4.4 Google 引入了可以阅读电子书、玩游戏、看电影支持全屏模式(Immersive Mode 沉浸模式),同时也支持更改修改状态栏颜色...STABLE 就是会始终给系统 UI 保留一个空间(不管系统 UI 有没有消失,并且悬浮在我们自己的 UI 视图上面 ) // 可以看到这种效果,状态栏仍然还在,只是你仔细发现,原布局有一部分被状态栏覆盖了...修改状态栏颜色 Android 5.0 (API 21) 后支持直接修改状态栏颜色 Android 4.4(API 19)之前是不允许操作状态栏的,也就是说 Android 4.4 之前,我们是没法对状态栏进行任何操作的...color ); // 方法二 样式: @color/colorAccent 对应状态栏颜色 修改状态栏文字颜色 关于状态栏的文字颜色

2.5K10

设计师的好帮手,Sketch 设计工具箱

文末点击“阅读原文”下载工具箱组件库 概述 设计过程,我们常常需要对设计图进行说明、标注、记录想法、收集灵感、引用系统资源。然而,没有合适易用的工具,这些过程很容易让设计稿变得杂乱不堪。...制作过程,我践行宁缺毋滥的原则,尽可能简化组件结构和使用方式。为了做到这一点,我也利用了新版本 Sketch 的某些特性,如颜色选集。...使用组件,可使用较新的 Sketch 颜色选集功能一键更换。其中,orange 是 Sketch 主题色,颜色鲜亮、且界面设计中出现较少,故而大部分组件默认颜色为 orange。...搭配文字,建议灵活选用文字颜色,以便达成较高的对比度和较好的观看效果。 字体 组件库主要采用24、16、14三种文字尺寸。建议说明性的文字采用14号字,regular 字重,regular 颜色。...---- System 系统组件 指针、状态栏等无需设计师绘制的常用系统组件。 Cursor 指针 来自 macOS 系统组件。尺寸为32x32,此处为观看方便进行了放大。

70930

小程序实战(三) - head组件的封装与使用

阅读本文你可知道 如何在小程序中进行head配置 如何封装一个自定义head组件 默认的head配置方式 微信小程序的head一般是开发者通过app.json来设置统一的样式,又或者每个页面的json...对对应的页面进行设置 全局页面配置 我们可以app.json中进行系统默认的全局head配置 "window": { "backgroundTextStyle": "light",...) 单页面配置 除此之外,使用默认配置head的情况下,我们可以在想要自定义head内容的页面对应的json文字中进行配置,比如我想更改个人设置页面head文本内容,即在person.json中进行如下配置即可...,其他相关设置默认为app.json的配置。...应用需要换肤功能,需要根据设置来更改head的背景颜色

1.1K20

最新iOS设计规范三|3大界面要素:栏(Bars)

允许用户隐藏侧边栏以为其内容创造更多空间,并使用内置的边缘滑动手势再次显示侧边栏。避免默认情况下隐藏边栏。 侧边栏的标题要保持简洁明了。省略不必要和多余的词。...用户期望状态栏系统范围内保持一致,所以不要用自定义状态栏替换它。 ? 选择样式相协调的状态栏。...当用户尝试关注媒体状态栏可能会分散注意力。暂时隐藏这些元素以提供更沉浸的体验。例如,当用户浏览全屏照片时,“照片”应用程序将隐藏状态栏和其他界面元素。 ? 避免永久隐藏状态栏。...例如,如果iOS设备上没有歌曲,则“音乐”应用的“立即收听”选项卡将说明如何下载歌曲。 始终附加视图中切换上下文。...工具栏是半透明的,也可以添加背景颜色,并在用户不需要它们应该隐藏起来。 例如:Safari,当你开始滚动页面,工具栏会自动隐藏,因为你可能正在阅读。你还可以点击屏幕底部让它再次出现。

9.8K10

iOS 知识小集(Status Bar变换)

背景 iOS 中经常会有需要在某个界面改变状态栏颜色或者某个界面隐藏状态栏的需求。而改变状态栏颜色和控制状态栏显示和隐藏的API,iOS 的不同版本也发生了很多变化。...iOS 7以前 iOS 7之前,状态栏是不占视图位置的。每个控制器的根view都是从屏幕的Y轴20px处开始显示的。...iOS 7以前状态栏设置 从API来看,那时候也是支持代码里修改状态栏样式以及显示和隐藏的。只是因为状态栏对整个APP的影响不大,所以一般plist里设置好后,用不着再去修改了。 ?...要重写的方法 因为这三个方法都有默认值,如果我们要的状体栏样式什么的跟默认值效果一致,则不需要重写;如果不想要默认的效果,则直接在这三个方法里return 相应的值即可。...例如,我想要在这个界面状态栏为白色,状态栏不隐藏,那么我只用重写-preferredStatusBarStyle,like this: - (UIStatusBarStyle)preferredStatusBarStyle

1.3K21

Flutter 组件集录 | 全面认识 AppBar 组件 - 使用篇

所以根据这个线索可以知道高度是如何确定的:AppBar 定义了 preferredSize 成员,所以抽象的 get 方法,将获取该成员: AppBar 构造方法,preferredSize... drawer 属性非空,会自动提供 leading,点击响应事件打开 drawer 。...---- AppBar 的使用过程,有一个非常重要,可能很少人注意的一点: AppBar 的背景色可以影响顶部状态栏颜色。...比如默认情况下背景色是蓝色,状态栏是白色: 如果背景色是白色,状态栏就会是黑色,这样就很方便。 如果不使用 AppBar,也能界面跳着跳着状态栏就错乱了。比如类似下面的情况。...---- 如果状态栏颜色和你预期的不同,可以通过 systemOverlayStyle 属性来设置状态栏颜色,如下 light 会将状态栏图标的颜色变白: systemOverlayStyle: const

1.2K10

最新iOS设计规范五|3大界面要素:控件(Controls)

栏(Bars) 栏,可以告诉用户APP当前在所在的位置、能提供导航,还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种:导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。...太长的文本可能会使您的界面拥挤,并可能在较小的屏幕上被截断。 只必要添加边框或背景颜色默认情况下,系统按钮没有边框或背景。但是,某些内容区域中,边框或背景是表示交互性所必需的。...虽然你无法更改编辑菜单的形状,但它的位置是可配置的 - 你可以改变展示位置来避免它覆盖重要内容或界面的某些部分。 不要使用与编辑菜单相同功能的其他控件。...iOS 12及更早版本,以及全面屏显示的设备上,网络活动指示器会在发生联网屏幕顶部的状态栏旋转,联网完成后消失。和活动加载指示器样式一样,并且是非交互式的。 ?...通过菜单,您可以无需向主界面添加按钮的情况下为用户提供澄清动作目标或自定义动作行为的方法。例如: · 当用户点击应用的“添加”按钮,您可以显示一个菜单,让用户指定要添加的项目。

8.5K30

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

我们 Android 10 添加了新的系统导航模式,用户可以通过手势交互执行后退、返回至主屏以及打开设备助手等操作。 ?...默认情况下,应用内容的绘制范围从顶部状态栏下方开始,延伸至底部导航栏上方。(状态栏和导航栏统称为系统栏) ? 实现从边到边的全面屏体验后,系统栏会覆盖应用内容前方。...△ 应用内容全屏范围内渲染,而且导航栏后面2. 更改系统颜色 我们的应用布局现在已经拓展至全屏范围,因此需要同步更改一下系统栏的颜色,以便看清其后面的应用内容。...具体来说,系统会执行以下两项操作之一: 动态颜色适配 系统栏里的内容会根据其后面的内容改变颜色。如果拖拽条位于浅色内容前方,它将变为深色,深色内容前方则变为浅色。 ?...△ 使用手势导航模式系统提供的半透明遮盖 否则,系统将使用动态色彩适应。上文中列出的条件是目前系统用来判断的依据,将来可能会更改

2.4K30

Android 沉浸式解析和轮子使用

用户可以通过状态栏与导航栏原来区域的边缘向内滑动让系统栏重新显示。...提示气泡——第一次进入沉浸模式系统将会显示一个提示气泡,提示用户如何再让系统栏显示出来。...粘性标签——这就是你设置了 IMMERSIVE_STICKY 标签的 UI 状态,用户会向内滑动以展示系统栏。半透明的系统栏会临时的进行显示,一段时间后自动隐藏。...style> 二、ZanImmersionBar 轮子的原理和使用 实际开发过程,我们不仅仅只会遇到以上三种版本兼容问题,还需要考虑如:不同手机品牌,动态该状态栏背景,以及 Fragment 需要有自己的状态栏颜色场景...2.5 PopupWindow 实现沉浸式 重点是调用以下方法,但是此方法会导致有导航栏的手机底部布局会被导航栏覆盖,还有底部输入框无法根据软键盘弹出而弹出。

3.2K10

.NET MAUI 社区工具包 1.3版本发布

MAUI(多应用程序用户界面)框架是微软用于跨平台应用程序开发的最新框架,取代了 Xamarin 和 Xamarin Forms。...其中两项工具包改进已作为行为实现,这是MAUI框架的设计决策,允许开发人员向现有用户界面控件添加功能,而无需对它们进行子类化并使用扩展类。 彩色状态栏是一种称为状态栏行为的新行为类。...它允许开发人员将其添加到页面行为的集合,指定状态栏颜色样式(无论是深色还是浅色内容)。...gravatar 的缓存生命周期,或者找不到 gravatar 提供默认图像。...开发人员调试使用库的代码,可以单步执行库实现本身。 新添加的功能已在 NMCT 的示例应用程序中提供,该应用程序也托管 GitHub 上。

53820

六天完成一个简单iOS App - 第二天

关注页面的搭建 登录界面的搭建 方法抽取与知识点总结 一. 关注页面的搭建 关注页面我们这里只做未登录的。因为登陆以后才可以看到关注了哪些用户或者频道。 ?...登陆界面的搭建 首先涉及到登录界面状态栏颜色的问题,我们需要将状态栏颜色改为白色,可以控制器内实现方法更改 - (UIStatusBarStyle)preferredStatusBarStyle {...return UIStatusBarStyleLightContent; } 关于修改状态栏颜色更详细的介绍可以去看状态栏的管理 因为登陆界面很多地方都需要用到,例如查看关注需要登陆,添加关注也需要先登录...,发表新帖也要登陆,登录界面不属于任何一个模块,同时很多地方也要用到它,所以将它写在Other文件夹,另外登录界面一定是Mode出来的,一旦判断需要登录才可以进行操作就Mode出登录界面。...if (placeholderColor == nil) { // 系统默认颜色GRB值 placeholderColor = [UIColor colorWithRed

2K50

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

我们 Android 10 添加了新的系统导航模式,用户可以通过手势交互执行后退、返回至主屏以及打开设备助手等操作。...默认情况下,应用内容的绘制范围从顶部状态栏下方开始,延伸至底部导航栏上方。(状态栏和导航栏统称为系统栏) 实现从边到边的全面屏体验后,系统栏会覆盖应用内容前方。...更改系统颜色 我们的应用布局现在已经拓展至全屏范围,因此需要同步更改一下系统栏的颜色,以便看清其后面的应用内容。...具体来说,系统会执行以下两项操作之一: 动态颜色适配 系统栏里的内容会根据其后面的内容改变颜色。如果拖拽条位于浅色内容前方,它将变为深色,深色内容前方则变为浅色。...△ 使用手势导航模式系统提供的半透明遮盖 否则,系统将使用动态色彩适应。上文中列出的条件是目前系统用来判断的依据,将来可能会更改

12210

iOS开发常用之 HUD 弹窗

MMProgressHUD - 设置HUD出现和消失的方式(包括上下,左右,淡入淡出,放大缩小等等),设置HUD的内容(可以HUD中加入帧动画,动态图片等等),设置HUD出现时的底部覆盖颜色,等等...PreLoader的实现讲解 Toast-Swift - 高可定制易用的Toast弹出信息或通知用户界面组件类。 对话框 WCAlertView - 自定义的对话框。...DQAlertView - 扁平化的样式不错。 HHAlertView - 一个简单的alertview有三种样式,有成功,失败,和警告三种样式,支持代表和阻止两种回调。...TAOverlay - TAOverlay可以通过叠加层展示有用的信息,可自定义文本和背景色,添加阴影和模糊效果,以及更改字体大小或者用户自定义图片替换页面的图标。...TBActionSheet.swift - 支持Carthage,可自定义度100%的ActionSheet,支持微信样式

4.2K20
领券