目录

  • 1.前言
  • 2.自定义主题theme
  • 3.全透明沉浸式主题theme
  • 4.设置状态栏颜色(Android 5.0+)
  • 5.设置状态栏半透明
  • 6.设置状态栏全透明
  • 7.设置底部导航栏半透明
  • 8.全透明沉浸式主题样式
  • 9.半透明沉浸式主题样式
  • 10.总结

1.前言

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

   

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”,作用于全局使用该主题

android 使用系统theme android 主题样式_沉浸式主题


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”,效果如下:

android 使用系统theme android 主题样式_导航栏_02

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


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>

android 使用系统theme android 主题样式_沉浸式主题_03

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


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>

android 使用系统theme android 主题样式_android 使用系统theme_04

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


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>

android 使用系统theme android 主题样式_导航栏_05


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>

android 使用系统theme android 主题样式_沉浸式主题_06

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


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>

android 使用系统theme android 主题样式_状态栏_07



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

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

android 使用系统theme android 主题样式_状态栏_08

说明:至此,顶部状态栏实现了全透明沉浸式,但仔细发现,底部导航栏还存在呢。难不成false黑色?true半透明?