Android 最新实现沉浸式状态栏的效果

article/2025/8/24 8:26:00

博主前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住也分享一下给大家,
👉点击跳转到网站

什么是状态栏:

是指手机屏幕最顶上,显示中国移动、安全卫士、电量、网速等等,在手机的顶部。下拉就会出现通知栏。

下面我放一张图带大家认识一下
在这里插入图片描述
沉浸式状态栏::

简单来说就是状态栏会根据手机内容适应性变色,使软件和系统本身更加融为一体,大大提升了用户体验。

下面我来介绍一下

一、标题栏延伸到状态栏

适用于Android6.0+

因为我的标题栏是白色,而Android 系统状态栏的字色和图标颜色也为白色,所以这样就会导致状态栏上的内容比如时间,电量等等就看不清楚了。

这个问题在Android 6.0的时候得到了解决。Android 6.0 新添加了一个属性SYSTEM_UI_FLAG_LIGHT_STATUS_BAR

代码如下:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {getWindow().setStatusBarColor(getResources().getColor(R.color.white));//设置状态栏颜色getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);//实现状态栏图标和文字颜色为暗色}

分析View一系列UI的作用:

  1. View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN: 状态栏不会被隐藏覆盖,状态栏依然可见,Activity顶端布局部分会被状态栏遮住,为避免状态栏遮挡View上的部分信息,需要为View设置fitsSystemWindows=true
  2. View.SYSTEM_UI_FLAG_FULLSCREEN: Activity全屏显示时,状态栏被隐藏覆盖掉
  3. View.SYSTEM_UI_FLAG_HIDE_NAVIGATION: 导航栏不显示,布局延伸到导航栏
  4. View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION: 导航栏显示,布局延伸到导航栏
  5. View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR: Android的状态栏的字体颜色默认为白色,只有Android6.0以后才提供了官方的API选择黑色字体

这样一步就可以实现沉浸式状态栏的效果了。

当然我们也可以在资源文件中实现这个效果:
在res文件下新建一个目录(Directory)名为:values-v21 在该目录下 创建styles.xml文件
里面代码如下:

<!--标题栏延伸到状态栏-->
<style name="MDTheme" parent="Theme.AppCompat.DayNight.NoActionBar"><item name="android:windowTranslucentStatus">false</item><item name="android:windowDrawsSystemBarBackgrounds">true</item><item name="android:statusBarColor">@android:color/white</item></style>

之后在java文件中添加如下代码,这样才能使状态栏的字体变成暗色。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);}

效果如下:

在这里插入图片描述
以上两种方法均需要在根布局添加一个属性

android:fitsSystemWindows="true"

该属性就是适应系统窗口,调整此视图的填充为系统窗口留出空间,意思就是说状态栏和标题栏不重合,如果不加此属性,标题栏会到手机的顶部,导致状态栏覆盖标题栏。

二、图片栏延伸到状态栏

同样也是在values-v21目录下的styles.xml文件中实现:

<!--    图片延伸到状态栏-->
<style name="MDTheme_IMAGE" parent="Theme.AppCompat.DayNight.NoActionBar"><item name="android:windowTranslucentNavigation">true</item><item name="android:windowTranslucentStatus">true</item><!--设置statusBarColor为透明--><item name="android:statusBarColor">@android:color/transparent</item></style>

效果图如下:
在这里插入图片描述
我们看到这并不是完全的沉浸式,而是半灰的一种效果。

接下来我们实现完全的沉浸式效果。
代码如下:

//这个特性是安卓5.0以后才支持的所以需要对系统版本号做判断if (Build.VERSION.SDK_INT>Build.VERSION_CODES.LOLLIPOP){getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE);getWindow().setStatusBarColor(Color.TRANSPARENT);}

效果图如图:
在这里插入图片描述
当然也可以用第三方开源库实现沉浸式状态栏 StatusBarUtil

以上就是沉浸式实现的方法,如有不当之处,欢迎大家指出,一起努力,共同进步~


http://chatgpt.dhexx.cn/article/LKEnJvb8.shtml

相关文章

Android 沉浸式状态栏完美解决方案

国内很多类似的文章, 我只想说一个字, 真tm乱! 我看不懂… 评论里面 全在说无效什么的 (我试了也无效, 好厉害的样子) 不废话,回到正题, 首先贴上一个众所周知的库 SystemBarTint 我只要这个类 https://github.com/jgilfelt/SystemBarTint/blob/master/library/src/com/readys…

Android---沉浸式状态栏

Android—沉浸式状态栏 我们的征程是星辰大海&#xff0c;而非人间烟尘 文章目录 Android---沉浸式状态栏去掉标题栏效果 引入依赖沉浸状态栏颜色沉浸状态栏图片 去掉标题栏 首先去掉对应主题下面的Android自带的ActionBar&#xff0c;只需要在对应主题下面加NoActionBar 效果 …

史上最完美的Android沉浸式状态导航栏攻略

前言 最近我在小破站开发一款新App&#xff0c;叫高能链。我是一个完美主义者&#xff0c;所以不管对架构还是UI&#xff0c;我都是比较抠细节的&#xff0c;在状态栏和导航栏沉浸式这一块&#xff0c;我还是踩了挺多坑&#xff0c;费了挺多精力的。这次我将我踩坑&#xff0c…

Android设置“沉浸式状态栏”的方法

Android系统界面构成 Android系统界面由状态栏、ActionBar和导航栏组成&#xff0c;如下图所示&#xff1a; “沉浸式状态栏”的界面显示效果 沉浸式状态栏&#xff0c;或叫“透明状态栏”&#xff0c;显示效果如下图所示&#xff1a; 实现沉浸式状态栏的步骤 一、添加StatusB…

Android沉浸式状态栏(透明系统状态栏)

Android沉浸式状态栏&#xff08;透明系统状态栏&#xff09;的目的&#xff1a;顶部系统状态栏和App的导航栏一体化&#xff0c;不给用户突兀的感觉&#xff0c;使用户把更多的视角留在我们的App上。 沉浸式状态栏的兼容情况 Android版本透明状态栏<4.44.4-5.0✓>5.0✓…

沉浸式状态栏

沉浸式状态栏 简单介绍 沉浸式状态栏其实是对沉浸模式(Immersive Mode)在状态栏上的体现,即让状态栏变透明,或者是在打游戏和看视频时彻底隐藏起状态栏,让用户拥有良好的体验。 比如说我们看视频,状态栏隐藏后视频的观看会更加完整,下图就是看视频时的截图,可以看到当…

Android沉浸式状态栏,看完这篇就够了!

背景 之前做过Android沉浸式状态栏的相关需求&#xff0c;但是一直忙于工作&#xff0c;没时间系统的整理下沉浸式相关的知识&#xff0c;所以今天抽出时间&#xff0c;写一篇 Android沉浸式状态栏的文章。 何为沉浸式 沉浸式就是要给用户提供完全沉浸的体验&#xff0c;使用…

图片预览与下载

后端返回base64进行图片的预览和下载下载 有一个图片预览的接口。后端返回的值长这个样子 1、预览 如果要在线预览的话&#xff0c;代码需要这样写放入img的src this.imgPreviewBaseUrl data:image/png;base64, res.data标签中就是这样的 2、下载 图片预览的这样的返…

vue 实现图片预览

vue实现图片预览 现在很多的项目里面图片展示缩略图,然后点击实现图片预览,放大的功能 最近我的项目里面就遇见了这么个场景,我选用了插件进行处理 下面说下实现步骤 1、首先安装插件 npm install vue-photo-preview --save插件地址 2、在main.js里面引入,全局使用 impor…

图片预览器

此预览器&#xff0c;一次只能翻页十张图片&#xff0c;开发人员可根据自己需要&#xff0c;修改前台代码。 页面代码 <% Page Language"C#" AutoEventWireup"true" CodeBehind"UpFilesAndPreview.aspx.cs" Inherits"WebFramework.Comm…

v-viewer图片预览

安装 npm install v-viewer引入 import Viewer from v-viewer import viewerjs/dist/viewer.css Vue.use (Viewer, {defaultOptions: {navbar: true,toolbar: false,movable: false,title: false,zoomable: true,scalable: true,transition: true} })使用 方法一&#xff1a…

vue2图片预览插件

文章目录 学习链接准备工作准备图片与基础的样式PrevImg.vueApp.vue静态效果 封装插件修改PrevImg.vue定义插件逻辑main.js中应用此插件App.vue中使用此插件 图片预览列表修改App.vue修改插件逻辑修改PrevImg.vue 学习链接 vue插件开发实例-图片预览插件 vue2-pre-img-plugin的…

vue 图片预览插件

vue 图片预览插件 步骤 1、先安装依赖 npm install v-viewer --save2、main.js内引用并注册调用 //main.js import Viewer from v-viewer import viewerjs/dist/viewer.cssVue.use(Viewer); Viewer.setDefaults({Options: { "inline": true, "button": …

Vue3图片预览(Image)

本图片预览组件主要包括以下功能&#xff1a; 展示图片时&#xff0c;可设置鼠标悬浮时的预览文本&#xff1b;图像无法加载时要显示的描述&#xff1b;自定义图像高度和宽度&#xff1b;设置图像如何适应容器高度和宽度&#xff08; fill(填充) | contain(等比缩放包含) | cov…

Vue实现图片预览和缩放功能

使用v-viewer插件即可实现图片预览和缩放功能。&#xff08;v-viewer是一款支持vue项目中的图片浏览组件&#xff0c;它支持图片旋转、缩放、翻转等操作&#xff0c;支持配置化.非常强大&#xff09; 安装依赖 执行命令&#xff1a; npm install v-viewer --save 引入并使用…

图片上传预览功能

大多时候我们上传图片&#xff0c;都是直接上传到服务器上&#xff0c;然后返回图片资源所在服务器的路径&#xff0c;然后页面根据这个路径&#xff0c;给图片一个src 属性就能看到图片了。 但是&#xff0c;这样会有一个弊端&#xff1a;如果客户对自己上传的图片不满意&am…

uniapp 图片预览实现

uniapp 图片预览实现 提示&#xff1a;下面案例可供参考 一、app端 使用 uni.previewImage 进行图片预览 可去 uniapp官网 查看具体使用:(https://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject) 二、具体使用如下&#xff08;示例&#xff09;&#xf…

Android中点击图片进行图片预览功能的实现(ImagePreview图片预览工具库)

因为需求&#xff0c;对于轮播图进行一个点击预览的功能&#xff0c;看了好多的文章&#xff0c;都没有弄出来&#xff0c;还是多亏了昊昊猿博主 点击查看原文 终于把它搞定啦。 这里的话是使用ImagePreview&#xff0c;一个非常好用的图片预览工具库&#xff08;还可以实现双…

Vue实现图片预览(Viewer.js)

Viewer.js viewer.js是一款开源的图片预览插件&#xff0c;功能十分强大: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转&#xff08;类似微博的图片旋转&#xff09; 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式&#xff08;可做屏保&#xff0…

前端图片预览怎么做?Vue

选择的图片文件&#xff0c;要给到img标签上纯前端的预览 让用户更近一步看到自己选择的头像 因为img的标签的src的值只能是以下两个 1、只能是图片的“链接地址”&#xff08;外链http://开头&#xff0c;图片文件相对路径&#xff09;(不能发给后台)因为第一种转成http是存…