状态栏和导航栏的属性样式

1、能够造成SystemUI Flag被系统自动清除的交互分类
触摸屏幕的任何位置;
顶部下拉状态栏;
底部上拉导航栏;
Window的变化(如:跳转到其他页面、软键盘的弹出)
2、SystemUI Flag 相关特性详解
1、View.SYSTEM_UI_FLAG_HIDE_NAVIGATION:(>=api16)
作用:隐藏系统的NavigationBar。
但是用户的任何操作都会清除这个Flag,进而导航栏自动重新显示起来。同时View.SYSTEM_UI_FLAG_FULLSCREEN也会被自动清除,因此StatusBar也会同时显示出来。
2、View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION:(>=api16)
作用:不会隐藏导航栏,但是页面布局会延伸到NavigationBar下面,被NavigationBar遮挡。
设置此Flag时,设置View的fitSystemWindows=true,会给该View添加和NavigationBar高度相同的paddingBottom。
3、View.SYSTEM_UI_FLAG_FULLSCREEN:(>=api16)
作用:隐藏状态栏。
和WindowManager.LayoutParams.FLAG_FULLSCREEN有相同的展示效果。不同的在于,此flag一般用于暂时全屏的情形(如:阅读应用、全屏视频),如果需要一直停留在全屏状态,(如:游戏应用),使用WindowManager.LayoutParams.FLAG_FULLSCREEN则是更好的选择。
此Flag会因为各种的交互(如:跳转到其他应用,下拉StatusBar,弹出键盘)的发送而被系统清除。
4、View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN:(>=api16)
作用:不会隐藏状态栏,但是页面布局会延伸到状态栏下面,被statusBar遮挡。
设置此flag时,设置View的fitSystemWindows=true,会给该View添加和statusBar相同高度的paddingTop.
5、 View.SYSTEM_UI_FLAG_LAYOUT_STABLE:(>=api16)
作用:稳定布局。
- 当使用SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN或SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION时,此时如果给View添加fitSystemWindows=true,系统会自动为View添加状态栏高度的paddingTop和NavigationBar高度的paddingBottom,如果状态栏或Navigationbar隐藏,则View的padding会变成0,视觉上会看到闪烁。如果配合View.SYSTEM_UI_FLAG_LAYOUT_STABLE使用,即使状态栏或NavigationBar隐藏,View的padding依然不变,这就是稳定布局的意思。
当使用SYSTEM_UI_FLAG_FULLSCREEN |SYSTEM_UI_FLAG_LAYOUT_STABLE时,会隐藏状态栏,但状态栏所占的控件不会隐藏,只会变成白色。同时Activity页面不会延伸到状态栏下。若是加上SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN,View所在window的显示范围则会伸展到StatusBar所在的空间。
6、View.SYSTEM_UI_FLAG_IMMERSIVE:(>=api19)
作用:避免某些用户交互造成系统自动清除全屏状态。
View.SYSTEM_UI_FLAG_IMMERSIVE和View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY的使用主要是为了当设置全屏模式时,避免某些用户交互造成系统自动清除全屏状态。
当使用View.SYSTEM_UI_FLAG_HIDE_NAVIGATION隐藏导航栏时,配合此特性,只有第三、四种操作会导致导航栏的隐藏状态被系统自动清除;否则,任何交互都不会导致导航栏的隐藏状态被系统自动清除。
此标识只有配合View.SYSTEM_UI_FLAG_HIDE_NAVIGATION才有作用。
7、View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY:(>=api19)
作用:避免某些用户交互造成系统自动清除全屏状态。同时Activity的部分内容也因此被StatusBar覆盖遮挡。
用View.SYSTEM_UI_FLAG_HIDE_NAVIGATION隐藏导航栏,配合使用此Flag,只有用户的第四种操作会导致状态栏或(和)导航栏的隐藏状态被系统自动清除。否则任何交互都不会导致相应状态的清除。
此Flag只有配合SYSTEM_UI_FLAG_FULLSCREEN和SYSTEM_UI_FLAG_HIDE_NAVIGATION使用时才会起作用。
3、WindowManager 相关特性详解
1、WindowMananger.FLAG_TRANSLUCENT_STATUS: (>=api16)
作用:
设置半透明的状态栏。不会因为用户操作而清除
设置此属性,系统会自动同时设置View.SYSTEM_UI_FLAG_LAYOUT_STABLE和View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN这两个属性。
2、WindowMananger.FLAG_FULLSCREEN:
作用:
隐藏状态栏。
使用此属性为导致软键盘的SOFT_INPUT_ADJUST_RESIZE的特性失效。 暂时没遇到此问题。
3、WindowMananger.FLAG_TRANSLUCENT_NAVIGATION:
半透明NavigationBar,并且不会因用户交互而被清除。
设置了此flag,系统会自动设置View.SYSTEM_UI_FLAG_LAYOUT_STABLE和View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
最低版本支持:Android4.4 (api 19)
4、WindowMananger.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS:
用于为StatusBar和NavigationBar设置背景颜色。
原理:将StatusBar和NavigationBar设置为透明背景,并且将StatusBar和NavigationBar所在空间设置为Window.getStatusBarColor() 和Window.getNavigationBarColor()方法获得的颜色。
最低版本支持:Android5.0 (api 21)。
我们给状态栏和导航栏着色的方法如下:
getWindow().setStatusBarColor(Color.RED);
getWindow().setNavigationBarColor(Color.RED);
如果在styles中配置这个属性android:windowDrawsSystemBarBackgrounds=false:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowDrawsSystemBarBackgrounds">false</item>
</style>

会导致给状态栏和导航栏着色失效。
再看另外一种场景:我们在解决App启动时的黑屏的问题的解决方案如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash</item>
        <item name="android:windowFullscreen">true</item>
        <!--不让windowBackground延伸到navigation bar区域-->
        <!--<item name="android:windowDrawsSystemBarBackgrounds">false</item>-->
        <!--适配Android P刘海屏-->
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
</resources>


很简单就是给window设置一个背景,但是在含有导航栏的手机来说,背景会被其遮挡
图中蓝色框中的logo就是设置的背景,绿色框中logo是页面中的内容。具体实现可以去看
Android Splash Screen最佳实践,包含全面屏,刘海屏适配。很明显的看出设置的背景被导航栏,遮挡了,怎么解决呢?
可以设置属性android:windowDrawsSystemBarBackgrounds=false。


————————————————
版权声明:本文为CSDN博主「Simon席玉」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42145792/article/details/128846497

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现自定义导航栏不被状态栏遮盖,可以在uni-app中使用全局导航守卫(global navigation guard)来设置状态栏高度和导航栏高度的差值。 具体步骤如下: 1. 在 App.vue 中设置一个全局变量 statusBarHeight,用来保存状态栏的高度。 ```js export default { onLaunch() { uni.getSystemInfo({ success: (res) => { this.statusBarHeight = res.statusBarHeight } }) } } ``` 2. 在导航栏组件中,通过计算属性计算出导航栏高度,并设置样式。 ```js export default { computed: { navBarHeight() { return this.statusBarHeight + 44 // 44为导航栏默认高度 } }, methods: { back() { uni.navigateBack() } } } ``` ```html <template> <view class="nav-bar" :style="{height: navBarHeight + 'px'}"> <view class="nav-bar__content"> <view class="nav-bar__left" @click="back"> <text class="nav-bar__left-icon">返回</text> </view> <view class="nav-bar__title">{{title}}</view> <view class="nav-bar__right"></view> </view> </view> </template> <style> .nav-bar { position: fixed; top: 0; left: 0; right: 0; background-color: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .1); z-index: 999; } .nav-bar__content { display: flex; align-items: center; height: 44px; padding: 0 15px; } .nav-bar__left { display: flex; align-items: center; justify-content: center; width: 50px; height: 100%; font-size: 16px; color: #333; } .nav-bar__left-icon { font-size: 18px; font-weight: bold; } .nav-bar__title { flex: 1; font-size: 18px; font-weight: bold; text-align: center; color: #333; } .nav-bar__right { width: 50px; height: 100%; } </style> ``` 这样就可以实现自定义导航栏不被状态栏遮盖的效果了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值