完全透明的导航栏，但它不应该影响 Android 上的状态栏 [英] Completely transparent navigation bar but it shouldn't affect the status bar on Android

问题描述

我需要一个具有完全透明导航栏但状态栏应具有 colorAccent 的屏幕.

I need a screen that has a completely transparent navigation bar but the status bar should have colorAccent.

我尝试了不同的解决方案，但都没有奏效.

I tried different solutions but none of them work.

1- 尝试用 XML 改变颜色

1- Tried to change color with XML

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/zingat_blue_text</item>
    <item name="colorPrimaryDark">@color/zingat_blue_text</item>
    <item name="colorAccent">@color/zingat_blue_text</item>
    <item name="android:colorBackground">@android:color/white</item>
</style>

<style name="NoActionBar" parent="AppTheme">
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">false</item>
</style>

当我尝试上面的代码时，导航栏看起来像下图.那不透明

When I tried code above, the navigation bar looks like picture below. That is not transparent

2- 尝试更改 windowTranslucentNavigation

2- Tried to change windowTranslucentNavigation

我尝试像下面那样设置 android:windowTranslucentNavigation = true 和 android:windowTranslucentStatus = false.

I tried to set android:windowTranslucentNavigation = true and android:windowTranslucentStatus = false like below.

<style name="NoActionBar" parent="AppTheme">
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">true</item>// CHANGED THIS LINE
</style>

在这种情况下，状态栏和导航栏都会受到影响，如下图所示.导航栏看起来有点透明，但即使我设置了 windowTranslucentStatus=false 它也有透明背景，工具栏显示状态栏的底部.

In this case, both status bar and navigation bar affecting and it shows like picture below. Navigation bar seem a little bit transparent but even I set windowTranslucentStatus=false it has transparent background the Toolbar show bottom of status bar.

3- 尝试 java 代码

3- Tried to java code

Window window = getWindow();
window.setFlags( WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);

在这个 cas 中，导航栏看起来完全透明，但状态栏也看起来透明，并且工具栏像解决方案 2 一样向上滑动状态栏底部.

In this cas the navigation bar looks fully transparent but the status bar also looks transparent and the toolbar slide-up bottom of the status bar like solution 2.

我尝试了以下解决方案，但都不起作用

I tried solutions below, none of them work

• 如何有一个透明的状态栏但导航栏不透明?
• 如何我如何将状态栏设置为透明但导航栏保持黑色?
• 我可以只为状态设置 FLAG_LAYOUT_NO_LIMITS吧?

感谢任何提前.

推荐答案

我觉得你想在状态栏和导航后面绘制 View，你可以用新的 WindowInsetterAPI 来设置填充与 System Inset 的高度(包括状态栏)和导航栏).

I think you want to draw View behind the status bar and navigation, You can do it with the new WindowInsetterAPI to set padding with System Inset's height (including status bar and navigation bar).

首先组合这些标志:SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN、SYSTEM_UI_FLAG_LAYOUT_STABLE、SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

First combining these flags: SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN, SYSTEM_UI_FLAG_LAYOUT_STABLE, SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

示例:

activity.window.decorView.apply {
            systemUiVisibility =
                systemUiVisibility or
                        View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
                        View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
                        View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
        }

然后你需要你的状态栏透明颜色并设置为深色以便用户可以看到它

Then you need your status bar transparent color and set to dark so the user can see it

<item name="android:statusBarColor">@android:color/transparent</item>    
// Set status bar color to dark 
<item name="android:windowLightStatusBar">true</item>
// Optionally if you also want transparent navigation bar
<item name="android:navigationBarColor">@android:color/transparent</item>

因为您在状态栏后面绘制，所以您的顶视图和底部需要填充状态栏的高度以使其对用户可见(但如果您希望您的图像位于状态后面，请不要对其应用填充).

Because you are drawing behind the status bar so your top view and bottom need padding the status bar height to make it visible to the user (but if you want your image laid behind status don't apply padding to it).

要进行填充，您需要通过以下代码收听 WindowInsets:

To make padding you need to listen to WindowInsets by the following code:

ViewCompat.setOnApplyWindowInsetsListener(view) { v, inset ->
        val systemInsets = inset.systemWindowInsets
        v.setPadding(v.paddingLeft, systemInsets.top,
            v.paddingRight, systemInsets.bottom);
        inset
    }

为了减少样板 WindowInset 侦听器代码，您可以使用 Insetter，只需通过将 padding 直接应用于 XML数据绑定.

To reduce boilerplate WindowInset listener code, you can use Insetter, just apply padding to directly XML through Data Binding.

这篇关于完全透明的导航栏，但它不应该影响 Android 上的状态栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！