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

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

\Promotion::

现在，您可以在布局中使用此新定义的<?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

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

Answer 3

来自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;
}

Answer 4

最好在工具栏中使用 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可绘制：

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 5

使用ColorFilter通过以下方法滚动时，可以获得很好的颜色过渡。希望你喜欢科特林

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展开时，这将为您提供深色的导航图标，而在折叠状态下为白色图标。

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

5 个答案: