安卓导航抽屉 Navigation Drawer 实现沉浸通知栏
在使用 Navigation Drawer Activity 模版的时候,遇到了通知栏无法完全沉浸的问题,尝试搜索一些现有的解决方法,但是或多或少都会存在一些问题,通过反复尝试找到找到了一种比较靠谱的思路
环境
测试模拟器:Pixel 3A
compileSdk:32
minSdk:28
targetSdk:32
创建工程
默认效果展示:
修改步骤
- 设置状态栏变为透明:修改主题配置
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
修改为:
<item name="android:statusBarColor">@android:color/transparent</item>
修改后完整文件:
<resources>
<!-- Base application theme. -->
<style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
+ <item name="android:statusBarColor">@android:color/transparent</item>
<!-- Customize your theme here. -->
</style>
<style name="Theme.MyApplication.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.MyApplication.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="Theme.MyApplication.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
修改后的效果:
打开抽屉发现已经透明,但是会覆盖一层浅色阴影
- 在布局中增加
fitsSystemWindows
属性
在 app_bar_main.xml
的 androidx.coordinatorlayout.widget.CoordinatorLayout
和 com.google.android.material.appbar.AppBarLayout
中增加:android:fitsSystemWindows="true"
,这样它会自动的给View增加一个值等于状态栏高度的 PaddingTop,让它的背景颜色占据状态栏
完整代码:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
+ android:fitsSystemWindows="true"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
+ android:fitsSystemWindows="true"
android:theme="@style/Theme.MyApplication.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/Theme.MyApplication.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="@layout/content_main" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="@dimen/fab_margin"
android:layout_marginBottom="16dp"
app:srcCompat="@android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
效果:
- 修改
activity_main.xml
,给com.google.android.material.navigation.NavigationView
增加上app:insetForeground="@android:color/transparent"
,去除抽屉状态栏浅色阴影,
效果:
- 兼容深色模式
切换到深色模式的效果:
修改:night/themes.xml
将 android:statusBarColor
设置为:@android:color/transparent
<item name="android:statusBarColor">@android:color/transparent</item>
打开抽屉发现,这个时候状态栏已经透明了,但是状态栏背景还是会有一个黑色的背景色
修改 app_bar_main.xml
,在 <com.google.android.material.appbar.AppBarLayout
中增加背景色,就可以了
android:background="?attr/colorPrimary"
最终效果:
fitsSystemWindows 属性
android:fitsSystemWindows="true"
的官方文档描述:
Boolean internal attribute to adjust view layout based on system windows such as the status bar.
If true, adjusts the padding of this view to leave space for the system windows.
Will only take effect if this view is in a non-embedded activity.
对某个 View 设置 fitsSystemWindows
为 true,本质就是给这个 View 设置了 padding,所以在 app_bar_main.xml 的 AppBarLayout 设置 fitsSystemWindows
,这样可以使得 AppBarLayout 的背景可以通过 padding 延展到状态栏,通过对 AppBarLayout 设置背景,就可以到达沉浸状态栏的效果
其他常用配置
设置状态栏为浅色模式(文字为黑字)
代码:
val controller = ViewCompat.getWindowInsetsController(binding.root)
controller?.isAppearanceLightStatusBars = true
或者使用主题 xml 来定义:
<item name="android:windowLightStatusBar">true</item>
参考资料
深色主题背景
What exactly does fitsSystemWindows do?
No Action Bar & Transparent Status Bar
Android沉浸式状态栏(透明状态栏)最佳实现
透明状态栏、全屏应用、沉浸模式
NavigationView阴影
定制你的Toolbar
Android 的style和theme
安卓导航抽屉 Navigation Drawer 实现沉浸通知栏的更多相关文章
- Android导航抽屉-Navigation Drawer
Google今年七月份的时候更新了他们的Google+应用,采用了新的导航方式并抛弃了navigationdrawer.一时之间,又引发了一系列关于NavigationDrawer利弊的讨论,不过对于 ...
- 【原创+译文】官方文档中声明的如何创建抽屉导航栏(Navigation Drawer)
如需转载请注明出处:http://www.cnblogs.com/ghylzwsb/p/5831759.html 创建一个抽屉导航栏 抽屉式导航栏是显示在屏幕的左边缘,它是应用程序的主导航选项面板.它 ...
- Navigation Drawer(导航抽屉)
目录(?)[-] 创建一个导航抽屉 创建抽屉布局 初始化抽屉列表 处理导航项选点击事件 监听导航抽屉打开和关闭事件 点击应用图标来打开和关闭导航抽屉 创建一个导航抽屉 导航抽屉是一个位于屏幕左侧边缘用 ...
- 【转】Navigation Drawer(导航抽屉)
创建一个导航抽屉 创建抽屉布局 初始化抽屉列表 处理导航项选点击事件 监听导航抽屉打开和关闭事件 点击应用图标来打开和关闭导航抽屉 创建一个导航抽屉 导航抽屉是一个位于屏幕左侧边缘用来显示应用程序 ...
- Android官方终于支持 Navigation Drawer(导航抽屉)模式
在2013 google IO当天,Android团的更新了Support库,新版本(V13)的Support库中新加入了几个比较重要的功能. 添加 DrawerLayout 控件,支持创建 Nav ...
- Android Navigation Drawer(导航抽屉)
Google I/O 2013 Android 更新了Support库,新版本的Support库中新加入了几个比较重要的功能. 添加 DrawerLayout 控件,支持创建 Navigation ...
- Creating a Navigation Drawer 创建一个导航侧边栏
The navigation drawer is a panel that displays the app’s main navigation options on the left edge of ...
- Android UI开发第三十二篇——Creating a Navigation Drawer
Navigation Drawer是从屏幕的左侧滑出,显示应用导航的视图.官方是这样定义的: The navigation drawer is a panel that displays the ap ...
- Android开发之Navigationdrawer导航抽屉功能的实现(源码分享)
导航抽屉(navigationdrawer)是一个从屏幕左边滑入的面板,用于显示应用的主要导航项目.用户能够通过在屏幕左边缘滑入或者触摸操作栏的应用图标打开导航抽屉. 导航抽屉覆盖在内容之上,但不覆盖 ...
随机推荐
- 有哪些类型的通知Advice?
Before - 这些类型的 Advice 在 joinpoint 方法之前执行,并使用 @Before 注解标记进行配置. After Returning - 这些类型的 Advice 在连接点方法 ...
- C语言之基本语句分类(知识点5)
一.C语言基本语句分类 ①数据定义语句 ②赋值语句 ③函数调用语句 ④表达式语句 ⑤流程控制语句 ⑥复合语句(多个大括号的层次) ⑦空语句 二.注意 ①scanf("%d,%d", ...
- (SSM框架)实现小程序图片上传(配小程序源码)
阅读本文约"2分钟" 又是一个开源小组件啦! 因为刚好做到这个小功能,所以就整理了一下,针对微信小程序的图片(文件)上传! 原业务是针对用户反馈的图片上传.(没错,本次还提供小程序 ...
- 利用Charles做代理测试电脑上写的H5页面
做H5页面的同学可能经常会遇到一个场景,就是电脑上调试好的页面怎么在手机上访问测试呢? 下面就介绍一种自己经常使用的方式,利用Charles代理软件来实现! 安装Charles 直接去官网下载对应的系 ...
- Fab 悬浮按钮
声明,参考:https://ext.dcloud.net.cn/plugin?id=144 在 template 中使用 <template> <view> <uni ...
- php 实验一 网页设计
实验目的: 1. 能够对整个页面进行html结构设计. 2. 掌握CSS+DIV的应用. 实验内容及要求: ***个人博客网页 参考Internet网上的博客网站,设计自己的个人网页,主要包括:图 ...
- PAT1018 锤子剪刀布
大家应该都会玩"锤子剪刀布"的游戏:两人同时给出手势,胜负规则如图所示: 现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出什么手势的胜算最大. 输入格式: 输入 ...
- 小程序申请测试appid
话不多说,直接上图: 1. 登录微信官方文档: https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html 2. ...
- Android 接入腾讯IM即时通信(详细图文)
原文地址:Android 接入腾讯IM即时通信(详细图文) | Stars-One的杂货小窝 腾讯云IM官网文档上提供了带UI模块和不带UI模块的,本文是基于带UI模块进行了Module封装,可以方便 ...
- 在非k8s 环境下 的应用 使用 Dapr Sidekick for .NET
在k8s 环境下,通过Operator 可以管理Dapr sidecar, 在虚拟机环境下,我们也是非常需要这样的一个管理组件,类似下图:在这张图片中,在上图左面,我们看到了"dapr.ex ...