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

沉浸式管理:让你的APP更优雅

详细介绍 解决状态栏和布局顶部重合 上面已经说了,沉浸式原理就是使整个布局延伸到状态栏和导航栏,既然这样必然导致一个问题,就是状态栏和布局顶部重叠,直接看图 ?...View.INVISIBLE:隐藏状态栏,同时Activity会伸展全屏显示。 View.SYSTEM_UI_FLAG_FULLSCREEN:Activity全屏显示,且状态栏被隐藏覆盖掉。...View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN:Activity全屏显示,但状态栏不会被隐藏覆盖,状态栏依然可见,Activity顶端布局部分会被状态遮住。...android 5.0以上核心代码 Android自5.0起,为我们提供了设置状态栏和导航栏颜色的API,我们可以自己设置状态栏和导航栏的颜色。...android 4.4核心代码 在4.4里就没有5.0以上这些api了,只能设置透明状态栏和导航栏,而且设置透明导航栏之后,底部布局会被导航栏遮住,那怎么办呢?

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

    Android实战经验分享之如何获取状态栏和导航栏的高度

    在 Android 应用开发中,有时我们需要知道状态栏和导航栏的高度,以便在布局中进行调整。获取这些高度的方法有几种,每种方法在准确性和兼容性方面有所不同。...获取状态栏高度的方法 方法一:通过资源名称获取 这种方法最常见,也最推荐,具有较高的准确性和兼容性。...: 0 } 获取导航栏高度的方法 方法一:通过资源名称获取 这种方法和获取状态栏高度的方式类似。...: 0 } 对比和总结 1、 通过资源名称获取: 优点:简单、代码兼容性好。 缺点:可能受某些定制 ROM 的影响,准确性在极少数情况下可能有问题。...兼容性建议 对于支持的最低 API 级别较低的应用,建议优先使用通过资源名称获取的方法,因为这种方法在大多数情况下效果良好。

    46110

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

    可以这么理解:状态栏与导航栏拥有自己独立的窗口,而且这两个窗口的优先级较高,会悬浮在所有窗口之上,可以把系统自身的状态栏与导航栏看做全透明的,之所有会有背景颜色,是因为下层显示界面在被覆盖的区域添加了颜色...Surface图 第一个XXXXActivity,大小是屏幕大小 第二个状态栏StatusBar,大小对应顶部那一条 第三个是底部虚拟导航栏NavigationBar,大小对应底部那一条 HWC_FRAMEBUFFER_TARGET...当然,如果设置了隐藏状态栏,或者导航栏,并且没有让布局随着隐藏而动态变化的话,就会看到被覆盖的padding,默认是白色,如下图,隐藏状态栏前后的对比: ? 没隐藏状态栏 ?...DecorView级别的WindowInsets消费 默认样式Activity的状态栏是有颜色的,如果内容直接扩展到状态栏下方,一定会被覆盖掉,系统默认的实现是在DecorView的根布局上加了个padding...的Content子View是一个LinearLayout,可以看出它并不是全屏,而是底部有一个Margin,正好对应导航栏的高度,顶部有个padding,这个其实是由fitSystemWindow决定的

    5.7K40

    iPhoneX 适配实践

     2、提供全屏用户体验,这里主要是指列表要延展到屏幕底部。  3、避免将可交互控件放在屏幕底部或者屏幕圆角区域,防止视觉遮挡和系统边缘手势冲突。...上图为官方标准的黑色背景,注意不是纯黑色的,还能分辨传感器区域  三、SafeArea安全区域 安全区域是指在屏幕顶部和底部区域之间能正常显示内容的区域。...顶部区域包括导航栏、状态栏或者传感器区域,底部区域包含Tabbar、工具栏或者home键指示器区域。...四、布局适配 1、自定义导航栏 如果你的项目存在导航栏界面push到全屏界面,或者手势滑动做很炫的过场动画,那么你可能会用到自定义导航栏NavigationBar,每个ViewController维护自身的...constraintEqualToConstant:44]; [NSLayoutConstraint activateConstraints:@[left, right, top, height]]; }  导航栏背景未扩展到状态栏

    3.8K41

    鸿蒙开发实战案例:沉浸式适配案例

    介绍开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感,从而使用户获得最佳的UI体验。...,默认不与系统设置的非安全区域比如状态栏、导航栏区域重叠,默认情况下开发者开发的界面都被布局在安全区域内。...若页面顶部和底部背景色不一致,需分别处理,如本案例单独对顶部组件设置了expandSafeArea熟悉使其绘制延伸至状态栏。详情见NavImmersive.ets。...页中设置网页元素对安全区进行避让设置Web组件绘制延伸至状态栏和导航条。.... // 设置窗口强制全屏布局 windowClass.setWindowLayoutFullScreen(true); ...})获取状态栏和导航条的高度。

    6620

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

    默认情况下,应用内容的绘制范围从顶部状态栏下方开始,延伸至底部导航栏上方。(状态栏和导航栏统称为系统栏) ? 实现从边到边的全面屏体验后,系统栏会覆盖在应用内容前方。...我们将它设置为可选,仅仅是为了最大程度地减少开发者的工作量和测试量。 在状态栏后面绘制内容 接下来,我们来看看屏幕顶部的状态栏。只要您的内容和布局允许,我们建议尽量把内容也拓展到状态栏的后方。...举个具体的例子,比如像下图那样把一张背景图铺在状态栏后面,具体的技术实现可以参考类似 AppBarLayout 等布局,并将其放在屏幕顶部。 ?...但如果应用的 UI 包含一个列表,而且列表顶端还固定放着一个 Toolbar 的话,那把内容绘制在状态栏后面就可能不合适了。同样,有些时候把内容绘制在导航栏下面也不合适。...△ 应用内容在全屏范围内渲染,而且在导航栏后面2. 更改系统栏颜色 我们的应用布局现在已经拓展至全屏范围,因此需要同步更改一下系统栏的颜色,以便看清其后面的应用内容。

    2.5K30

    模拟京东首页导航条渐变

    &搜索框)发生变化 导航条的透明度在改变,但是上面的文字&&图片还是很清晰,未被透明度所影响 顶部的时间工具条,在导航条颜色变化的时候,也会变化 ---- 搭建步骤 1.隐藏系统默认导航条,自定义导航条...思路:使用UIView创建自定义导航条,然后在自定义的UIView进行操作 隐藏导航条: - (void)viewWillAppear:(BOOL)animated{ [super viewWillAppear...,解决办法:_navigationView.alpha = 1 - alpha; 3.监听导航条透明度,当它等于1的时候,改变导航条颜色和按钮状态 - (void)scrollViewDidScroll...,动态设置顶部时间状态栏颜色 if (_navigationView.alpha >= 1) { //开始导航条变化 _statusBarStyle...UIStatusBarStyleDefault; } //设置状态栏刷新 [self setNeedsStatusBarAppearanceUpdate]; } //设置顶部状态栏颜色

    2.6K90

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

    默认情况下,应用内容的绘制范围从顶部状态栏下方开始,延伸至底部导航栏上方。(状态栏和导航栏统称为系统栏) 实现从边到边的全面屏体验后,系统栏会覆盖在应用内容前方。...我们将它设置为可选,仅仅是为了最大程度地减少开发者的工作量和测试量。 在状态栏后面绘制内容 接下来,我们来看看屏幕顶部的状态栏。只要您的内容和布局允许,我们建议尽量把内容也拓展到状态栏的后方。...举个具体的例子,比如像下图那样把一张背景图铺在状态栏后面,具体的技术实现可以参考类似 AppBarLayout 等布局,并将其放在屏幕顶部。...但如果应用的 UI 包含一个列表,而且列表顶端还固定放着一个 Toolbar 的话,那把内容绘制在状态栏后面就可能不合适了。同样,有些时候把内容绘制在导航栏下面也不合适。...: △ 应用内容在全屏范围内渲染,而且在导航栏后面2.

    23110

    【HarmonyOS Next】原生沉浸式界面

    背景在实际项目中,为了软件使用整体色调看起来统一,一般顶部和底部的颜色需要铺满整个手机屏幕。因此,这篇帖子是介绍设置的方法,也是应用沉浸式效果。...如下图:底部的绿色延伸到上面的状态栏和下面的导航栏UI在鸿蒙应用中,全屏UI元素分为状态栏、应用界面和导航栏。...一般实现应用沉浸式效果由两种方式:窗口全屏布局方案:调整布局系统为全屏布局,界面元素延伸到状态栏和导航条区域实现沉浸式效果。组件延伸方案:组件布局在应用界面区域,通过接口方法延伸到状态栏和导航栏。...Cause:' + JSON.stringify(err)); });为了避免构件被挡住,根据导航条和状态栏的高度,修改bottomRectHeight和topRectHeight的数值。...list:背景颜色设置为黄色,从图片可以看出已经延伸至导航条和状态栏了。Text:背景颜色设置成红色,就可以看到整个组件的滑动过程.

    10310

    Android 沉浸式解析和轮子使用

    1.1.2 两种使用这个属性的方式: 在使用时候,我们通常需要考虑的是状态栏一值显示在顶部而不会隐藏或者被遮挡(其他 app 情况如:读书 app 或者是游戏 app 则需要隐藏顶部状态栏),所以只需要通过代码设置...所以Android5.0以上可以设置状态栏和导航栏背景颜色,但还不能改变状态栏和导航栏图标和字色。...,但状态栏不会被隐藏覆盖,状态栏依然可见,Activity顶端布局部分会被状态栏遮住。...2.5 在 PopupWindow 中实现沉浸式 重点是调用以下方法,但是此方法会导致有导航栏的手机底部布局会被导航栏覆盖,还有底部输入框无法根据软键盘弹出而弹出。...,然后再去了解各个厂家定制化的属性在哪些版本阶段使用,以及是否需要对异形屏适配,最后才是在实际开发和需求中对状态栏和导航栏处理。

    3.2K10

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

    此篇文章主要讲解关于沉浸式状态栏,程序全屏和分清状态栏、ActionBar、ToolBar 的一些知识内容。主要是讲解如何适配状态栏。...关于沉浸式和透明式概念说明 在谷歌官方中: 在 Android 4.4 Google 引入了可以在阅读电子书、玩游戏、看电影时支持全屏模式(Immersive Mode 沉浸模式),同时也支持更改修改状态栏的颜色...screnn_stable.png 5.沉浸模式 // 所谓沉浸模式就是一开始我们的 UI 布局是全屏的,状态栏和虚拟导航键也是隐藏的,当我们需要的系统 UI 的时候,从状态栏的位置下拉就可以出现系统...,导航栏和状态栏就会出来,过一会就会消失,类似于游戏中那样。...View.SYSTEM_UI_FLAG_HIDE_NAVIGATION:作用使 UI 布局延伸到导航栏,全屏显示,导航栏消失。

    2.8K10

    HarmonyOS鸿蒙开发 - 解决上下两栏白边 - 沉浸式效果

    我们看看它目前的情况,以及假设有白边的情况这是美团正常情况,会看到顶部是黄色,状态栏也变为黄色,视觉效果上浑然一体以下假设状态栏白色可以看到视觉效果上会比较突兀通过对比我们发现,确实在实际app开发过程中...Window背景色实现沉浸式设置窗体背景色实现先看不设置的情况下,我们写的一个宽高百分百,且背景颜色为红色的界面,如下图,可以看到状态栏和整体背景色不一致,有明显突兀感此时,我们可以设置窗体全局背景色也为红色实现视觉沉浸...里不管是哪个页面都是此颜色,假如你App里多个页面的主题颜色不一样,会导致非常突兀,如下图使用setWindowLayoutFullScreen实现沉浸式这是Window提供的一个方法,可以设置让App整屏(即覆盖状态栏与导航栏...也即让我们布局的组件,通过padding的方式挪动他们位置,避让原本的状态栏和导航栏。...毕竟不同设备的状态栏可能不一样。所以如果我们使用这种方案还需要获取屏幕的状态栏与导航栏的高度。

    13210

    Android项目实战(四十一):游戏和视频类型应用 状态栏沉浸式效果

    需求:    手机app ,当打游戏或者全屏看视频的时候会发现这时候手机顶部的状态栏是不显示的,当我们从手机顶端向下进行滑动或手机底端向上滑动的时候,状态栏会显示出来,如果短暂的几秒时间没有操作的话,...状态栏会再次隐藏。...  1、 onWindowFocusChanged(boolean hasFocus) 方法     Activity生命周期,可以理解为走到这个方法的时候,activity才是真正意义上的显示/消失在交互层...当activity显示在栈顶,和用户交互的时候,是有焦点的,hasFocus 为 true     当activity退出栈顶,不和用户交互的时候,是没有焦点的,hasFocus 为 false  ...注:     和Activity全屏显示的区别在于,如果手机有虚拟导航栏(即虚拟后退、home键),则全屏会一直显示,而上述方法,导航栏和状态栏同步显示,上述需求则用全屏实现效果不对。

    80360

    iPhone X 适配指南 (官方翻译版)

    大多数使用标准系统提供的UI元素(如导航栏,表格和集合)的应用程序会自动适应设备的新外形。背景材料延伸到显示器的边缘,并且UI元件被适当地插入和定位。...安全区域还可以防止内容覆盖状态栏,导航栏,工具栏和标签栏。 注意状态栏的高度。状态栏在iPhone X上比在其他iPhone上更高。...如果您的应用假定固定状态栏的高度用于将内容定位在状态栏的下方,则必须更新您的应用,才能根据用户的设备动态定位内容。...请注意,当背景任务(如录音和位置跟踪)处于活动状态时,iPhone X上的状态栏不会改变高度。 如果您的应用程序目前隐藏状态栏,请重新考虑iPhone X上的决定。...请勿尝试隐藏设备的圆角,传感器外壳或通过在屏幕顶部和底部放置黑色条来访问主屏幕的指示器。不要使用像括号,边框,形状或教学文字等视觉装饰,也要特别注意这些区域。 允许自动隐藏指示灯,以便轻松访问主屏幕。

    2.5K50

    View编程指南(二)

    在启动时启用全屏选项可确保window适合当前屏幕。...您不应该减小window的大小来容纳状态栏或任何其他项目。状态栏总是浮在window的顶部,所以你应该缩小以容纳状态栏的唯一的东西就是你放入window的view。...对于不包含状态栏或显示半透明状态栏的应用程序,请将view大小设置为与window大小相匹配。对于显示不透明状态栏的应用程序,请将您的view放置在状态栏下方并相应地缩小其大小。...从view的高度减去状态栏的高度可以防止view的顶部被遮挡。...注意:如果window的rootview由容器view控制器(如选项卡栏控制器,导航控制器或分割view控制器)提供,则不需要自行设置view的初始大小。

    81510

    UI篇-关于单个页面屏幕旋转要注意的问题

    animateWithDuration:duration animations:^{ // 修改状态栏的方向及view的方向进而强制旋转屏幕 [[UIApplication...mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height); } }]; } 注意状态栏无法强制旋转...,在手机方向不变的情况下,所以,最好把状态栏隐藏掉,回复的时候再显示出来。...按照上面的方法我确实达到了,单页面旋转,其他页面不旋转的效果,但是有个问题: 在页面不旋转的情况下,状态栏确会随着手机的旋转而旋转,着实蛋疼。目前不清楚为什么一样的设置,在两个项目中效果不一样。...NSNotificationCenterdefaultCenter] removeObserver:self name:UIDeviceOrientationDidChangeNotification object:nil]; 屏幕旋转时,状态栏会默认隐藏的

    3.6K20

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

    一、导航栏(Navigation Bars) 导航栏出现在页面的顶部,位于状态栏下方,可以给一系列层级页面进行导航。当点击进入新页面时,其导航栏的左侧会出现一个返回按钮,并带有前一页面的标题。...大标题绝对不能与内容竞争,但是在某些应用中,大标题的粗体会帮助人们浏览和搜索时进行快速定位。例如:在选项卡式布局中,大标题有助于说明活动选项卡,并指示用户何时已滚动到顶部。...在iPhone上侧边栏又分为半屏和全屏,手机QQ、滴滴打车都从原来都半屏改为了全屏,曹操专车采用的是半屏。 ? 您可以通过使用边栏样式列表并将其放置在拆分视图的主列中来创建边栏。...显示全屏媒体时,请考虑暂时隐藏状态栏。...当用户尝试关注媒体时,状态栏可能会分散注意力。暂时隐藏这些元素以提供更沉浸的体验。例如,当用户浏览全屏照片时,“照片”应用程序将隐藏状态栏和其他界面元素。 ? 避免永久隐藏状态栏。

    9.9K10

    Android状态栏微技巧,带你真正理解沉浸式模式

    隐藏状态栏和ActionBar的方式在4.1系统之上和4.1系统之下还是不一样的,这里我就不准备考虑4.1系统之下的兼容性了,因为过于老的系统根本就没有提供沉浸式体验的支持。...,这样就可以将状态栏和导航栏同时隐藏了。... 这样我们就实现类似于海岛奇兵和爱奇艺的沉浸式模式效果了,如下图所示。 ? 可以看到,界面默认情况下是全屏的,状态栏和导航栏都不会显示。...而当我们需要用到状态栏或导航栏时,只需要在屏幕顶部向下拉,或者在屏幕右侧向左拉,状态栏和导航栏就会显示出来,此时界面上任何元素的显示或大小都不会受影响。...过一段时间后如果没有任何操作,状态栏和导航栏又会自动隐藏起来,重新回到全屏状态。 这就是最标准的沉浸式模式。

    2.2K100
    领券