（AS笔记）Android全透明沉浸式主题样式——顶部状态栏+底部导航栏

本章介绍实现Android沉浸式主题样式，从状态栏设置单一颜色，半透明、全透明、底部导航栏半透明等方面实践截图完成沉浸效果。

电竞丶小松哥

7571人浏览 · 2021-08-13 00:48:39

电竞丶小松哥 · 2021-08-13 00:48:39 发布

1.前言

本章介绍实现Android沉浸式主题样式，从状态栏设置单一颜色，半透明、全透明、底部导航栏半透明等方面实践截图完成沉浸效果。

下一章介绍隐藏底部导航栏，传送门链接：

（AS笔记）Android全透明沉浸式主题样式——全屏沉浸隐藏底部导航栏

CSDN链接：https://blog.csdn.net/qq_39038178/article/details/119661162

2.自定义主题theme

<style name="主题名称" parent="主题样式风格">
<style name="Theme1" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<style name="Theme2" parent="Theme.AppCompat.Light.Dialog">
<style name="Theme3" parent="Theme.AppCompat.Light.NoActionBar">
<style name="Theme4" parent="Theme.AppCompat.DayNight.NoActionBar">
<style name="主题名称..." parent="主题样式风格...">

说明：在AndroidManifest.xml配置清单中<application>标签调用自定义主题名称x，表示当前App应用默认全局使用都该自定义主题名称x。如：<application android:theme="@style/主题名称x"......</application>

AndroidManifest.xml调用自定义主题“TranslucentTheme”，作用于全局使用该主题

3.全透明沉浸式主题theme，

主题样式使用：“Theme.AppCompat.Light.NoActionBar”

<!-- 全透明 沉浸式 parent 主题样式 -->
<!-- <style name="主题名称" parent="Theme.AppCompat.Light.NoActionBar"> -->
<!--    ... -->
<!--    ... -->
<!-- </style> -->

<!-- 全透明 沉浸式主题样式 -->
<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>

使用“Theme.AppCompat.Light.NoActionBar”，效果如下：

说明：以上效果图是没有“设置状态栏颜色”属性时，状态栏默认浅灰色。

4.设置状态栏颜色(Android 5.0+)

颜色定义：系统预设颜色/自定义颜色

属性“android:statusBarColor”设置状态栏，刚才也说过，不设置状态栏属性默认浅灰色

<!-- tools:targetApi="l"表示：Android 5.0——Lollipop（棒棒糖）-->
<!-- Android 5.0 以上支持 setStatusBarColor() 设置状态栏颜色 -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- 状态栏设置自定义颜色 -->
<item name="android:statusBarColor" tools:targetApi="l">自定义颜色</item>
<!-- 状态栏设置系统预设颜色 -->
<item name="android:statusBarColor" tools:targetApi="l">系统预设颜色</item>

设置状态栏为绿色：其它颜色此处不展示——绿绿更健康

<!-- 全透明 沉浸式 parent 主题样式 -->
<!-- <style name="主题名称" parent="Theme.AppCompat.Light.NoActionBar"> -->
<!--    ... -->
<!--    ... -->
<!-- </style> -->

<!-- 全透明 沉浸式主题样式 -->
<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 设置状态栏为绿色 -->
    <item name="android:statusBarColor" tools:targetApi="l">#4CAF50</item>
</style>

说明：显然设置单一颜色不适合沉浸式主题样式。期待解决不？咱们继续搞~!~!~！此处设置绿色，主要是了解有这样的用法。

5.设置状态栏半透明

<!-- 全透明 沉浸式 parent 主题样式 -->
<!-- <style name="主题名称" parent="Theme.AppCompat.Light.NoActionBar"> -->
<!--    ... -->
<!--    ... -->
<!-- </style> -->

<!-- 全透明 沉浸式主题样式 -->
<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 设置状态栏为绿色——已注释 -->
    <!-- <item name="android:statusBarColor" tools:targetApi="l">#4CAF50</item> -->

    <!-- 设置状态栏半透明 -->
    <item name="android:windowTranslucentStatus">true</item>
</style>

说明：设置状态栏半透明之后，可以隐约看见状态栏后面全屏填充的背景图片，但是，通常情况下，实现沉浸式主题风格，是不希望状态有颜色出现。显然，半透明也同样不适合，此处设置主要是了解有这样的用法，咱们继续搞~！~！~！

6.设置底部导航栏半透明

<!-- 全透明 沉浸式 parent 主题样式 -->
<!-- <style name="主题名称" parent="Theme.AppCompat.Light.NoActionBar"> -->
<!--    ... -->
<!--    ... -->
<!-- </style> -->

<!-- 全透明 沉浸式主题样式 -->
<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 设置状态栏为绿色——已注释-->
    <!-- <item name="android:statusBarColor" tools:targetApi="l">#4CAF50</item> -->

    <!-- 设置状态栏半透明——已注释 -->
    <!-- <item name="android:windowTranslucentStatus">true</item> -->

    <!-- 设置底部导航栏半透明，默认false黑色，设置true半透明 -->
    <item name="android:windowTranslucentNavigation">true</item>
</style>

7.设置状态栏全透明

设置绿色，显然不符合沉浸式主题，颜色属性：@android:color/transparent

<!-- 全透明 沉浸式 parent 主题样式 -->
<!-- <style name="主题名称" parent="Theme.AppCompat.Light.NoActionBar"> -->
<!--    ... -->
<!--    ... -->
<!-- </style> -->

<!-- 全透明 沉浸式主题样式 -->
<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 设置状态栏为绿色——已注释-->
    <!-- <item name="android:statusBarColor" tools:targetApi="l">#4CAF50</item> -->

    <!-- 设置状态栏半透明——已注释 -->
    <!-- <item name="android:windowTranslucentStatus">true</item> -->

    <!-- 设置底部导航栏半透明，默认false黑色，设置true半透明 -->
    <item name="android:windowTranslucentNavigation">true</item>

    <!-- Android 5.0+，设置状态栏全透明透明 -->
    <item name="android:statusBarColor" tools:targetApi="l">@android:color/transparent</item>

</style>

说明：状态栏全透明——状态栏作用区域，实现透明覆盖。由图可见，半透明状态可见的背景图，此时同样已被进行透明化，有部分图片看不见了。继续解决~！~！~！

8.全透明沉浸式主题样式

重点来了：实现沉浸式主题分析点——结合4节、5节、6节的步骤

(1)状态栏半透明设置为false，不设置此项也可以，默认就是false，但是规范原因，这项建议添加到自定义主题中。
(2)状态栏全透明是必须参数，不然状态半透明无论是false还是true，顶部状态栏始终是有颜色遮挡住的
(3)底部导航栏半透明设置true，默认fasle是黑色。

总结：设置以后3点，这样让人体验使用App应用时，有种很宽敞的感觉，觉得自己手机屏幕尺寸很大，很牛逼~！~！~！

<!-- 全透明 沉浸式 parent 主题样式 -->
<!-- <style name="主题名称" parent="Theme.AppCompat.Light.NoActionBar"> -->
<!--    ... -->
<!--    ... -->
<!-- </style> -->

<!-- 全透明 沉浸式主题样式 -->
<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 设置状态栏为绿色——已注释-->
    <!-- <item name="android:statusBarColor" tools:targetApi="l">#4CAF50</item> -->

    <!-- 设置状态栏半透明——解除注释 -->
    <item name="android:windowTranslucentStatus">false</item>

    <!-- 设置底部导航栏半透明，默认false黑色，设置true半透明 -->
    <item name="android:windowTranslucentNavigation">true</item>

    <!-- Android 5.0+，设置状态栏全透明透明 -->
    <item name="android:statusBarColor" tools:targetApi="l">@android:color/transparent</item>

</style>

个人理解：状态栏沉浸=状态栏半透明false+开启状态栏全透明+底部导航栏true

9.半透明沉浸式主题样式

<!-- 半透明 沉浸式主题样式 -->
<style name="TranslucentTheme1" parent="Theme.AppCompat.Light.NoActionBar">
    <!--半透明状态栏-->
    <item name="android:windowTranslucentStatus">true</item>
    <!--半透明导航栏-->
    <item name="android:windowTranslucentNavigation">true</item>
</style>

说明：至此，顶部状态栏实现了全透明沉浸式，但仔细发现，底部导航栏还存在呢。难不成false黑色？true半透明？当然要把底部导航栏隐藏了，才是真正的沉浸式主题风格，全屏沉浸隐藏底部导航栏教程，传送门链接：

（AS笔记）Android全透明沉浸式主题样式——全屏沉浸隐藏底部导航栏

CSDN链接：https://blog.csdn.net/qq_39038178/article/details/119661162