【问题标题】:Translucent StatusBar with dynamic ActionBar color in AndroidAndroid中具有动态ActionBar颜色的半透明状态栏
【发布时间】:2015-12-18 08:28:18
【问题描述】:

我正在尝试实现一个半透明的状态栏(这样我的导航视图是 BEHIND 状态栏),但仍然喜欢动态更改我的操作栏的颜色。因此,状态栏颜色需要更改为我的操作栏颜色的较暗版本。

如果我将状态栏设置为透明,正如许多消息来源所建议的那样,我的 primary_dark 颜色将用作状态栏的背景。但是,由于我会在运行时更改操作栏颜色,所以 primary_dark 不一定是我的操作栏的深色。

如果我将状态栏设置为操作栏颜色,透明度就消失了。如果我将状态栏设置为操作栏颜色并添加透明度,则状态栏看起来既不正确也不正确,并且我的重叠导航视图仍然不是很“透明”/“多彩”。

Google 收件箱有三种不同的颜色:收件箱(蓝色)、已暂停(黄色)和完成(绿色)。

我可以做些什么来实现这种行为?

【问题讨论】:

    标签: android colors material-design android-design-library navigationview


    【解决方案1】:

    实际上,实现起来相当容易。

    第一步——改变Toolbar的高度:

    • height 更改为wrap_content

    所以对我来说它看起来像这样:

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    

    然后你覆盖v19的资源:

        <?xml version="1.0" encoding="utf-8"?>
        <resources>
                <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
                        <!-- Style properties -->
                        ....
                        <!-- These properties are important:-->
                        <item name="android:windowTranslucentStatus">true</item>
                        <item name="windowActionBarOverlay">false</item>
                        <item name="android:windowActionBarOverlay">false</item>
                        <item name="android:fitsSystemWindows">false</item>
                </style>
        </resources>
    

    然后,在Activity 中,将padding 设置为Toolbar

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
        ......
        ......
        public int getStatusBarHeight() {
            int result = 0;
    
            if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
                int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
                if (resourceId > 0) {
                    result = getResources().getDimensionPixelSize(resourceId);
                }
            }
            return result;
        }
    

    实际上,差不多就是这样。现在,一旦我想更改工具栏的颜色,我将调用它:

        if (getSupportActionBar() != null) {
            getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.GREEN));
        }
    

    活动的布局:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:openDrawer="start">
    
        <include
            layout="@layout/app_bar_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
    
        <android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="false"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/activity_main_drawer" />
    
    </android.support.v4.widget.DrawerLayout>
    

    注意!在 Kitkat 操作系统之前的版本中,状态栏保持不变,不透明。

    我已将测试应用程序的源代码上传到我的保管箱 - feel free to check it out

    希望对你有帮助

    【讨论】:

    • 谢谢康斯坦丁,我会照顾好工作的!但是:您没有提到任何与 NavigationView 相关的代码。 NavigationView 是否在您的示例中的状态栏后面?
    • @Frame91 很高兴!我的 NavigationView 位于状态栏下方:i.stack.imgur.com/B3d9G.png 你需要这样吗?
    • 用测试应用程序的链接更新了答案(它有导航抽屉和切换颜色的按钮)
    • 谢谢康斯坦丁,我需要它,就像你拥有它一样;)我会将您的答案标记为已接受,并在我可以复制它时立即分配赏金;)
    • 请教一个问题:为什么 KITKAT 的 StatusBar 下有一个额外的 View 的伎俩?
    猜你喜欢
    • 2016-11-07
    • 1970-01-01
    • 2017-07-07
    • 1970-01-01
    • 2015-04-07
    • 2023-01-13
    • 1970-01-01
    • 1970-01-01
    • 2015-08-06
    相关资源
    最近更新 更多