CollapsingToolbarLayout：展开时更改主页按钮颜色

Question

我已经从 Chris Banes 示例代码中实现了新的 CollapsingToolbarLayout。

但是，背景图像视图的图像都是白色背景。工具栏主题是ThemeOverlay.AppCompat.Dark.ActionBar，所以图标也是白色的，所以当 CollapsingToolbarLayout 完全展开时我看不到主页按钮。

使用app:expandedTitleTextAppearance 我可以设置标题字段的颜色。是否也可以设置主页按钮和菜单图标的颜色？

Answer 1

这是我如何在布局展开和折叠时更改抽屉和选项图标颜色的示例：

protected void onCreate(Bundle savedInstanceState) {
            AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout);
            appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
                @Override
                public void onOffsetChanged(AppBarLayout appBarLayout, int offset)
                {
                    Drawable upArrow = ResourcesCompat.getDrawable(getResources(), R.drawable.drawer_icon, null);
                    if (offset < -200)
                    {
                        upArrow.setColorFilter(Color.parseColor("#000000"), PorterDuff.Mode.SRC_ATOP);
                        getSupportActionBar().setHomeAsUpIndicator(upArrow);

                        Drawable drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.option_menu_icon);
                        drawable.setColorFilter(Color.parseColor("#000000"), PorterDuff.Mode.SRC_ATOP);
                        toolbar.setOverflowIcon(drawable);
                    }
                    else
                    {

                        upArrow.setColorFilter(Color.parseColor("#ffffff"), PorterDuff.Mode.SRC_ATOP);
                        getSupportActionBar().setHomeAsUpIndicator(upArrow);
                        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

                        Drawable drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.option_menu_icon);
                        drawable.setColorFilter(Color.parseColor("#ffffff"), PorterDuff.Mode.SRC_ATOP);
                        toolbar.setOverflowIcon(drawable);
                    }
        }
});

Answer 2

最好在工具栏中使用 2 张不同的图片。其他可能会导致一些不必要的问题：

1. 尝试设置 2 个不同的 Toolbar 主题将永远无法工作，因为主题仅在创建 Activity 时设置，设置另一个主题无效，您需要重新创建 Activity。
2. 使用颜色过滤器可能无法得到您想要的结果。您可以使用带阴影的箭头，并且颜色过滤器也会绘制阴影，变得更像外部发光。

所以您的工具栏将如下所示：

<android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:contentInsetStart="0dp"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways|snap">

            <ImageView
                android:id="@+id/imageViewBack"
                android:layout_width="?attr/actionBarSize"
                android:layout_height="?attr/actionBarSize"
                android:scaleType="center"
                android:src="@drawable/button_back_white" />

</android.support.v7.widget.Toolbar>

您将在工具栏折叠时设置imageViewBack drawable：

appBarLayout.addOnOffsetChangedListener((appBarLayout, offset) -> {
        final boolean isCollapsed = (offset == (-1 * appBarLayout.getTotalScrollRange()));

        imageViewBack.setImageDrawable(ContextCompat.getDrawable(context,
        isCollapsed ? 
        R.drawable.button_back_red : 
        R.drawable.button_back_white));
});

Answer 3

您可以通过以下使用 ColorFilter 的方法在滚动时获得漂亮的颜色过渡。希望你喜欢 Kotlin

app_bar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout: AppBarLayout, offset: Int ->
    val colorComponent = Math.max(0.3f,offset.toFloat() / -appBarLayout.totalScrollRange)
    toolbar.navigationIcon?.colorFilter = 
    PorterDuffColorFilter(Color.rgb(colorComponent, colorComponent, colorComponent), PorterDuff.Mode.SRC_ATOP)
})

这将在 CollapsingToolbarLayout 展开时为您提供一个深色导航图标，并在折叠状态下为您提供一个白色图标。

Answer 4

在我看来，这只有在您更改主页按钮、菜单图标和溢出按钮的可绘制对象时才有可能。幸运的是，Google 为我们提供了一个名为 Tinted Drawables 的新 API，它允许我们设置可绘制或九个补丁图像的颜色。以下是它的工作原理：

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@android:drawable/ic_menu_camera"
    android:tint="@color/menu_icon_color"/>

现在您可以像在布局中使用其他任何东西一样使用这个新定义的Drawable。对于主页按钮和溢出按钮，您还必须像这样覆盖样式定义：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:homeAsUpIndicator">@drawable/tinted_home_button</item>
    <item name="android:actionOverflowButtonStyle">@style/OverFlowButton</item>
</style>

<style name="OverFlowButton" parent="AppTheme">
    <item name="android:src">@drawable/tinted_overflow_button</item>
</style>

不幸的是，所有这些东西（样式定义除外）仅在 API 级别 21+ 上可用，并且不包含在支持库中。如果您必须支持低于 Lollipop 的设备，我认为最好的方法是使用Android Assets Studio，您可以在其中自行着色图标并将它们下载为 png 文件。

Answer 5

主页按钮、溢出按钮和一些来自 sdk 的精选股票图标受colorControlNormal 影响：

<style name="ActionBar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlNormal">@color/accent</item>
</style>

如果您有其他图标，则需要循环并手动过滤它们：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.sample_actions, menu);

    for(int i = 0; i < menu.size(); i++){
        Drawable drawable = menu.getItem(i).getIcon();
        if(drawable != null) {
            drawable.mutate();
            drawable.setColorFilter(getResources().getColor(R.color.accent), PorterDuff.Mode.SRC_ATOP);
        }
    }

    return true;
}