什么叫沉浸式状态栏

什么叫沉浸式状态栏,第1张

传统的手机状态栏是呈现出黑色条状的,有的和手机主界面有很明显的区别。这一样就在一定程度上牺牲了视觉宽度,界面面积变小。
沉浸式是APP界面延伸到状态栏, 应用本身沉浸于状态栏,所以如果第三方的软件没有为状态栏分配,那么自然就是黑色。顶端的状态栏和下面的虚拟按键都隐藏,需要的时候从边缘划出。
沉浸模式。当启用该模式,应用程序的界面将占据整个屏幕,系统自动将隐藏系统的状态栏和导航栏,让应用程序内容可以在最大显示范围呈现,增加大屏体验,而当需要查看通知的时候只需要从顶部向下滑动就能呼出通知栏。
沉浸模式实际上有两种:
一种叫“沉浸模式”,状态栏和虚拟按钮会自动隐藏、应用自动全屏,这种模式下,应用占据屏幕的全部空间, 只有当用户从屏幕的上方边沿处向下划动时, 才会退出沉浸模式, 用户触摸屏幕其它部分时, 不会退出该模式, 这种模式比较适用于阅读器、 杂志类应用。
另外一种叫“黏性沉浸模式”,让状态栏和虚拟按钮半透明,应用使用屏幕的全部空间, 当用户从屏幕的上方边沿处向下滑动时,也不会退出该模式, 但是系统界面 (状态栏、 导航栏) 将会以半透明的效果浮现在应用视图之上 , 只有当用户点击系统界面上的控件时, 才会退出黏性沉浸模式。

编程还是日常使用。ios还是安卓。下面只说安卓的
编程的话:
Activity的布局根节点中添加以下参数
android:fitsSystemWindows="true"
android:clipToPadding="true"
java代码onCreate中对当前系统进行判断,符合要求(即系统是44或以上的版本)则设置成透明状态栏
private void initState() {
if (BuildVERSIONSDK_INT >= BuildVERSION_CODESKITKAT) {
//透明状态栏
getWindow()addFlags(WindowManagerLayoutParamsFLAG_TRANSLUCENT_STATUS);
//透明导航栏
getWindow()addFlags(WindowManagerLayoutParamsFLAG_TRANSLUCENT_NAVIGATION);
}
}
日常使用的话,手机root后安装xposed和PerfectColorBar

首先只有大于等于44版本支持这个半透明状态栏的效果,但是44和50的显示效果有一定的差异
因为本例使用了NavigationView,所以布局代码稍多,当然如果你不需要,可以自己进行筛减。
注意引入相关依赖:
compile 'comandroidsupport:appcompat-v7:2221'
compile 'comandroidsupport:support-v4:2221'
compile 'comandroidsupport:design:2220'
(一)colorsxml 和 stylesxml
首先我们定义几个颜色:
res/values/colorxml
<xml version="10" encoding="utf-8">
<resources>
<color name="primary">#FF03A9F4</color>
<color name="primary_dark">#FF0288D1</color>
<color name="status_bar_color">@color/primary_dark</color>
</resources>
下面定义几个stylesxml
注意文件夹的路径:
values/stylesxml
<resources>
<style name="BaseAppTheme" parent="ThemeAppCompatLightNoActionBar">
<!-- Customize your theme here -->
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">#FF4081</item>
</style>
<!-- Base application theme -->
<style name="AppTheme" parent="@style/BaseAppTheme">
</style>
</resources>
values-v19
<resources>
<style name="AppTheme" parent="@style/BaseAppTheme">
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
1234567
ok,这个没撒说的。注意我们的主题是基于NoActionBar的,android:windowTranslucentStatus这个属性是v19开始引入的。
(二)布局文件
activity_mainxml
<androidsupportv4widgetDrawerLayout
xmlns:android=">沉浸式状态栏是一种比较常见的UI风格,接下来就去看看怎么实现它。

在stylesxml里增加TranslucentTheme,我们这里minSdkVersion 是以21为准,低于安卓50以下的手机很少了,就不适配了。

对于这种没有标题栏,沉浸到状态栏的效果,我们已经实现了。如果是有标题栏呢?比如加个Toolbar会变成下面这样:

对于有标题的页面,我们希望状态栏颜色跟标题栏一样就行了,不希望标题栏上移跟状态栏重叠,我们可以在布局文件根视图设置如下属性,这个相当于设置了个padding让状态栏下移,当然,为了让状态栏颜色跟标题栏一样,你还需要给根视图设置一样的背景色(因为状态栏实际是透明的)。

运行看看,已经实现了我们的要求。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://www.outofmemory.cn/yw/13201136.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-06-19
下一篇 2023-06-19

发表评论

登录后才能评论

评论列表(0条)

保存