沉浸式状态栏实现

article/2025/8/24 3:54:29

文章目录

  • 郭霖的博客这样实现
    • 透明状态栏
    • 隐藏导航栏
    • 真正的沉浸式模式
  • 轮子

郭霖的博客这样实现

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

透明状态栏

新建一个项目,只放一张图片
在这里插入图片描述
可以看到 状态栏、ActionBar、底部导航栏都显示,现在修改 Activity 中代码

public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);View decorView = getWindow().getDecorView();decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN);getSupportActionBar().hide();}
}

重新运行程序,可以看到 状态栏、ActionBar 都隐藏了
在这里插入图片描述
这里先调用getWindow().getDecorView()方法获取到了当前界面的 DecorView,然后调用它的setSystemUiVisibility()方法来设置系统UI元素的可见性。其中,SYSTEM_UI_FLAG_FULLSCREEN表示全屏的意思,也就是会将状态栏隐藏

另外,根据Android的设计建议,ActionBar 是不应该独立于状态栏而单独显示的,因此状态栏如果隐藏了,我们同时也需要调用 ActionBar 的hide()方法将ActionBar也进行隐藏

虽说这才是正统的沉浸式含义,但有些朋友可能想实现的就是饿了么那样的状态栏效果,而不是直接把整个系统状态栏给隐藏掉,那么又该如何实现呢?

在这里插入图片描述
方法一:
修改代码如下:

View decorView = getWindow().getDecorView();int options = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE;decorView.setSystemUiVisibility(options);getWindow().setStatusBarColor(Color.TRANSPARENT);getSupportActionBar().hide();

在这里插入图片描述

我们使用了SYSTEM_UI_FLAG_LAYOUT_FULLSCREENSYSTEM_UI_FLAG_LAYOUT_STABLE,注意两个Flag必须要结合在一起使用,表示会让应用的主体内容占用系统状态栏的空间,最后再调用 Window 的setStatusBarColor()方法将状态栏设置成透明色就可以了

方法二:
可以用以下代码完成相同的效果

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getSupportActionBar().hide();

当 window 的FLAG_TRANSLUCENT_STATUS属性有效的时候,会自动设置 system ui visibility 的标志SYSTEM_UI_FLAG_LAYOUT_STABLESYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

当然也可以在 style 中设置属性 windowTranslucentStatus

android:windowTranslucentStatus

方法三:

如果有 actionbar 的话,可以设置 状态栏和 actionbar 颜色相同来实现

getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getWindow().setStatusBarColor(Color.parseColor("#2F90E5"));

设置了FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS,表明会 Window 负责系统 bar的 background 绘制,绘制透明背景的系统 bar(状态栏和导航栏),然后用getStatusBarColor()getNavigationBarColor()的颜色填充相应的区域。这就是 Android 5.0 以上实现沉浸式导航栏的原理

当然 theme 中也可以设置相应属性来设置样式

    <style name="Theme.TestApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar"><item name="android:statusBarColor">#2F90E5</item><item name="android:windowTranslucentStatus">false</item><item name="android:windowDrawsSystemBarBackgrounds">true</item></style>

隐藏导航栏

隐藏导航栏也就是使用了不同的UI Flag而已,修改MainActivity中的代码,如下所示:

View decorView = getWindow().getDecorView();int options = View.SYSTEM_UI_FLAG_FULLSCREEN|View.SYSTEM_UI_FLAG_HIDE_NAVIGATION;decorView.setSystemUiVisibility(options);getSupportActionBar().hide();

在这里插入图片描述
好像是完全全屏了,但是我们触摸屏幕的任意位置都会退出全屏

除了隐藏导航栏之外,我们同样也可以实现和刚才透明状态栏类似的效果,制作一个透明导航栏:

View decorView = getWindow().getDecorView();int options = View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN| View.SYSTEM_UI_FLAG_LAYOUT_STABLE;decorView.setSystemUiVisibility(options);getWindow().setNavigationBarColor(Color.TRANSPARENT);getWindow().setStatusBarColor(Color.TRANSPARENT);getSupportActionBar().hide();

在这里插入图片描述
这里使用了SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION,表示会让应用的主体内容占用系统导航栏的空间,然后又调用了setNavigationBarColor()方法将导航栏设置成透明色

真正的沉浸式模式

public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}@Overridepublic void onWindowFocusChanged(boolean hasFocus) {super.onWindowFocusChanged(hasFocus);View decorView = getWindow().getDecorView();decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION| View.SYSTEM_UI_FLAG_FULLSCREEN| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);}
}

在这里插入图片描述

可以看到,界面默认情况下是全屏的,状态栏和导航栏都不会显示。而当我们需要用到状态栏或导航栏时,只需要在屏幕顶部向下拉,或者在屏幕底部向上拉,状态栏和导航栏就会显示出来,此时界面上任何元素的显示或大小都不会受影响。过一段时间后如果没有任何操作,状态栏和导航栏又会自动隐藏起来,重新回到全屏状态

这就是最标准的沉浸式模式

轮子

Github:ImmersionBar
ImmersionBar的使用说明


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

相关文章

flutter沉浸式状态栏

方法1&#xff1a;修改MainActivity 在MainActivity.kt或MainActivity.java&#xff0c;判断一下版本号然后将状态栏颜色修改设置成透明&#xff0c;因为他本身是黑色半透明&#xff1a; Kotlin&#xff1a; class MainActivity: FlutterActivity() {override fun configure…

uniapp 沉浸式状态栏

uniapp 沉浸式状态栏 1.page.json 中设置 &#xff1a;“navigationStyle”:"custom" "globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationStyle":…

Android使用沉浸式状态栏

Android使用沉浸式状态栏 为什么使用? 我们App里面目前都没有做沉浸式状态栏&#xff0c;会导致状态栏呈黑色条状&#xff0c;而且下面这个的黑色条状与App红色主界面有很明显的区别。这样在一定程度上牺牲了视觉高度&#xff0c;界面面积变小。 可以对照比较这三张图 代码…

【Android实战】沉浸式状态栏实现(上)

传统的手机状态栏是呈现出黑色条状的&#xff0c;有的和手机主界面有很明显的区别。这样就在一定程度上牺牲了视觉宽度&#xff0c;界面面积变小。 沉浸模式的状态栏和主界面完全融为了一体&#xff0c;在设计上有不同的视觉感受。 我们先上两张图&#xff0c;很容易看出区别&a…

Android 沉浸式状态栏

文章目录 Android 沉浸式状态栏前提情况一&#xff1a;使用FrameLayout情况二&#xff1a;使用CoordinatorLayoutfitsSystemWindows属性原理情况三&#xff1a;在CoordinatorLayout中添加子控件问题&#xff1a;解决&#xff1a; 情况四&#xff1a;使用FrameLayout实现沉浸式效…

Android实现沉浸式状态栏效果

关于沉浸式状态栏&#xff0c;给大家推荐一个非常好的博文android标题栏、状态栏图标文字颜色及背景动态变化 另外说明下&#xff0c;沉浸式状态栏的实现仅适用于 android 4.4及以上版本&#xff0c;4.4以下的就不要想了。 1. 实现秀明状态栏常规方法 //是否使用特殊的标题栏背…

适配“沉浸式”状态栏

传送门&#xff1a; fitSystemWindow属性的作用 http://blog.csdn.net/wangxp423/article/details/79564244 fitSystemWindow属性实战 http://blog.csdn.net/wangxp423/article/details/79566465 上两篇我们讲了fitSystemWindows实现沉浸式状态栏&#xff0c;本篇主要讲解适…

Android 实现沉浸式状态栏(包含顶部栏吸顶Layout CoordinatorLayout实现沉浸式状态栏)

前言 Android状态栏默认是固定的黑底白字&#xff0c;这肯定是不被伟大的设计师所喜爱的&#xff0c;更有甚者&#xff0c;某些时候设计希望内容能够延伸到状态栏上部&#xff08;例如顶部是大图的情况&#xff09;。所幸的是随着Android版本的迭代&#xff0c;开发者对状态栏…

Android实现ImmersionBar沉浸式状态栏

&#xff08;一&#xff09;效果图 &#xff08;二&#xff09;实现步骤&#xff1a; 1、在build.gradle中加上 implementation com.gyf.barlibrary:barlibrary:2.3.0 2、设置页面为全屏 将上图中的 <style name"AppTheme" parent"Theme.AppCompat.Light.…

Android沉浸式状态栏实现

首先创建一个BaseActivity或者BaseFragment&#xff0c; 后面需要沉浸式状态的继承BaseActivity或BaseFragment, 然后在XML文件中添加想设置的状态栏背景颜色&#xff0c;以下两句代码 android:background"#1677FE" android:fitsSystemWindows“true” BaseActivity代…

一个Android沉浸式状态栏上的黑科技

本文同步发表于我的微信公众号&#xff0c;扫一扫文章底部的二维码或在微信搜索 郭霖 即可关注&#xff0c;每个工作日都有文章更新。 说起来&#xff0c;在不知不觉中&#xff0c;我竟然凑成了这沉浸式状态栏三部曲。 其实最开始的时候&#xff0c;我主要是因为工作上的原因想…

Android 实现沉浸式状态栏

上一篇文章将Android 实现变色状态栏我们实现了变色的状态栏&#xff0c;也介绍了沉浸式状态栏和透明状态栏的区别&#xff0c;这篇文章我们实现沉浸式状态栏。 沉浸式状态栏的来源就是很多手机用的是实体按键&#xff0c;没有虚拟键&#xff0c;于是开了沉浸模式就只有状态栏消…

Android 沉浸式状态栏攻略 让你的状态栏变色吧

转载请标明出处&#xff1a; http://blog.csdn.net/lmj623565791/article/details/48649563&#xff1b; 本文出自:【张鸿洋的博客】 一、概述 近期注意到QQ新版使用了沉浸式状态栏&#xff0c;ok&#xff0c;先声明一下&#xff1a;本篇博客效果下图&#xff1a; 关于这个状…

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

博主前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住也分享一下给大家&#xff0c; &#x1f449;点击跳转到网站 什么是状态栏: 是指手机屏幕最顶上&#xff0c;显示中国移动、安全卫士、电量、网速等等&#xff0c;在手…

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)在状态栏上的体现,即让状态栏变透明,或者是在打游戏和看视频时彻底隐藏起状态栏,让用户拥有良好的体验。 比如说我们看视频,状态栏隐藏后视频的观看会更加完整,下图就是看视频时的截图,可以看到当…