Android UI体验之全屏沉浸式透明状态栏样式

发布时间 - 2026-01-10 22:20:30    点击率:

前言:

   Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏、 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体验。而Android 5.0之后谷歌又提出了 ColorPalette 的概念,让开发者可以自己设定系统区域的颜色,使整个 App 的颜色风格和系统的颜色风格保持统一。今天学习总结一下如何实现Android 4.4以上全屏沉浸式透明状态栏效果。先看下预期效果:

 首先现分清楚哪部分是状态栏,哪部分是导航栏

状态栏StatusBar如下

导航栏NavigationBar如下

如何实现?

 1.)首先实现全屏

 第一种:继承主题特定主题

 在Android API 19以上可以使用****.TranslucentDecor***有关的主题,自带相应半透明效果,Theme.Holo.NoActionBar.TranslucentDecor和Theme.Holo.Light.NoActionBar.TranslucentDecor两种主题为新增加的,所以要新建values-v19文件夹并创建styles文件添加如下代码

 <style name="AppBaseTheme" parent="android:Theme.Holo.Light.NoActionBar.TranslucentDecor">
  <!-- Customize your theme here. -->
 </style>

第二种:在activity中采用代码的方式

Android 4.4以上可以添加如下代码

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//透明状态栏
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明导航栏
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}

Android 5.0 以上也可以使用下面的代码实现全屏

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
 | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
 | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
 | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
}

全屏效果

不难发现此时状态栏占有的位置消失,和app的布局叠在一起了,接下来解决这个问题

2.)解决状态栏占位问题

第一种:主题添加如下设置

<item name="android:fitsSystemWindows">true</item>

第二种:activity layout根目录添加下面代码

android:fitsSystemWindows="true"

第三种:通过Java代码设置

rootview.setFitsSystemWindows(true);

fitsSystemWindows只作用在sdk>=19的系统上就是高于4.4的系统,这个属性可以给任何view设置,只要设置了这个属性此view的所有padding属性失效.只有在设置了透明状态栏(StatusBar)或者导航栏(NavigationBar)此属性才会生效,

如果上述设置了状态栏和导航栏为透明的话,相当于对该View自动添加一个值等于状态栏高度的paddingTop,和等于导航栏高度的paddingBottom,效果如下

 3.)状态栏导航栏设置背景色

4.4以上的可以采用修改contentView的背景色,或者动态添加一个view到contentView上

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
   //透明状态栏
   window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
   //透明导航栏
   window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
   //设置contentview为fitsSystemWindows
   ViewGroup contentView = (ViewGroup) findViewById(android.R.id.content);
   View childAt = contentView.getChildAt(0);
   if (childAt != null) {
    childAt.setFitsSystemWindows(true);
   }
   //给statusbar着色
   View view = new View(this);
   view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(this)));
   view.setBackgroundColor(color);
   contentView.addView(view);
  }

动态获取StatusBarHeight函数如下

 /**
  * 获取状态栏高度
  *
  * @param context context
  * @return 状态栏高度
  */
 private static int getStatusBarHeight(Context context) {
  // 获得状态栏高度
  int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
  return context.getResources().getDimensionPixelSize(resourceId);
 }

动态获取NavigationBarHeight函数如下

 /**
  * 获取导航栏高度
  *
  * @param context context
  * @return 导航栏高度
  */
 public static int getNavigationBarHeight(Context context) {
  int resourceId = context.getResources().getIdentifier("navigation_bar_height", "dimen", "android");
  return context.getResources().getDimensionPixelSize(resourceId);
 }

然后Android5.0以上谷歌提供了新的api可以更新状态栏和导航栏的背景色

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
   window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
     | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
   window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
     | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
     | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
   window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
   //设置状态栏颜色
   window.setStatusBarColor(color);
   //设置导航栏颜色
   window.setNavigationBarColor(color);
   ViewGroup contentView = ((ViewGroup) findViewById(android.R.id.content));
   View childAt = contentView.getChildAt(0);
   if (childAt != null) {
    childAt.setFitsSystemWindows(true);
   }
//   contentView.setPadding(0, getStatusBarHeight(this), 0, 0);
  }

这样总体效果就实现了

4.)贴出整体java代码实现方式

 private void initWindows() {
  Window window = getWindow();
  int color = getResources().getColor(android.R.color.holo_blue_light);
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
   window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
     | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
   window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
     | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
     | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
   window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
   //设置状态栏颜色
   window.setStatusBarColor(color);
   //设置导航栏颜色
   window.setNavigationBarColor(color);
   ViewGroup contentView = ((ViewGroup) findViewById(android.R.id.content));
   View childAt = contentView.getChildAt(0);
   if (childAt != null) {
    childAt.setFitsSystemWindows(true);
   }
  } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
   //透明状态栏
   window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
   //透明导航栏
   window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
   //设置contentview为fitsSystemWindows
   ViewGroup contentView = (ViewGroup) findViewById(android.R.id.content);
   View childAt = contentView.getChildAt(0);
   if (childAt != null) {
    childAt.setFitsSystemWindows(true);
   }
   //给statusbar着色
   View view = new View(this);
   view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(this)));
   view.setBackgroundColor(color);
   contentView.addView(view);
  }
 }

总结:

 我这里为了更加明显的显示效果所以状态栏背景色和标题栏颜色不一致,在实际的开发中一般情况下我们都会设置成统一的颜色,在视觉上感觉整个页面更加统一,让用户真正沉浸在app中。

以上所述是小编给大家介绍的Android UI体验之全屏沉浸式透明状态栏效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


# android  # 沉浸式状态栏  # Android之沉浸式状态栏的实现方法、状态栏透明  # Android沉浸式状态栏实现示例  # Android设置透明状态栏和透明导航栏  # Android 快速实现状态栏透明样式的示例代码  # 状态栏  # 全屏  # 背景色  # 可以使用  # 第二种  # 小编  # 第一种  # 如何实现  # 在此  # 才会  # 两种  # 提出了  # 给大家  # 身临其境  # 自带  # 用在  # 所述  # 贴出  # 先看  # 给我留言 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件  Android中AutoCompleteTextView自动提示  详解jQuery中基本的动画方法  微信小程序 闭包写法详细介绍  Laravel如何创建自定义Artisan命令?(代码示例)  Laravel怎么防止CSRF攻击_Laravel CSRF保护中间件原理与实践  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  Laravel如何创建自定义Facades?(详细步骤)  千库网官网入口推荐 千库网设计创意平台入口  Laravel如何生成和使用数据填充?(Seeder和Factory示例)  iOS中将个别页面强制横屏其他页面竖屏  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤  企业在线网站设计制作流程,想建设一个属于自己的企业网站,该如何去做?  JavaScript Ajax实现异步通信  Laravel如何实现多对多模型关联?(Eloquent教程)  Java垃圾回收器的方法和原理总结  如何确保西部建站助手FTP传输的安全性?  Laravel如何实现数据库事务?(DB Facade示例)  JavaScript常见的五种数组去重的方式  微信小程序 配置文件详细介绍  网站制作企业,网站的banner和导航栏是指什么?  Laravel如何使用Sanctum进行API认证?(SPA实战)  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  Laravel如何实现登录错误次数限制_Laravel自带LoginThrottles限流配置【方法】  Laravel如何使用Blade模板引擎?(完整语法和示例)  如何在云主机上快速搭建网站?  C语言设计一个闪闪的圣诞树  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  如何实现javascript表单验证_正则表达式有哪些实用技巧  如何在云主机快速搭建网站站点?  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  Laravel与Inertia.js怎么结合_使用Laravel和Inertia构建现代单页应用  Laravel如何实现模型的全局作用域?(Global Scope示例)  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  图册素材网站设计制作软件,图册的导出方式有几种?  googleplay官方入口在哪里_Google Play官方商店快速入口指南  zabbix利用python脚本发送报警邮件的方法  Laravel中间件如何使用_Laravel自定义中间件实现权限控制  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  Laravel软删除怎么实现_Laravel Eloquent SoftDeletes功能使用教程  详解CentOS6.5 安装 MySQL5.1.71的方法  详解Android——蓝牙技术 带你实现终端间数据传输  如何快速搭建虚拟主机网站?新手必看指南  如何用y主机助手快速搭建网站?  专业型网站制作公司有哪些,我设计专业的,谁给推荐几个设计师兼职类的网站?  Laravel Telescope怎么调试_使用Laravel Telescope进行应用监控与调试  高防网站服务器:DDoS防御与BGP线路的AI智能防护方案  免费网站制作appp,免费制作app哪个平台好?