logo标签列表

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

androidandroid-collapsingtoolbarlayout
20
我已经根据Chris Banes的示例代码实现了新的CollapsingToolbarLayout。
然而，背景图像视图的所有图像都有白色背景。工具栏主题是ThemeOverlay.AppCompat.Dark.ActionBar，所以图标也是白色的，因此在CollapsingToolbarLayout完全展开时我看不到主页按钮。
通过app:expandedTitleTextAppearance，我可以设置标题字段的颜色。是否还有可能设置主页按钮和菜单图标的颜色？
太棒了，真不敢相信没有一个app:expandedHomeButtonAppearence属性。人们可能会认为，如果我们想要改变标题颜色，我们也可能想要改变主页按钮的颜色。谢谢Google！ - lostintranslation
5个回答
6

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

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);
                    }
        }
});
1

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

  1. 尝试设置2种不同的工具栏主题永远不会起作用，因为主题只在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可绘制对象作为工具栏的背景：

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));
});
1
使用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展开时，它会给你一个黑色的导航图标，而在折叠状态下则是白色的图标。
仅适用于API > 26 :( - OhhhThatVarun
1
@VarunRaj 只需使用Color.rgb的int版本。 - Jon Andersen
0
在我看来，只有更改主页按钮、菜单图标和溢出按钮的可绘制对象才能实现这一点。幸运的是，Google 给我们提供了一个名为“着色可绘制对象”的新 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+上可用，而且不包括在支持库中。如果您必须支持低于棒棒糖版本的设备，我认为最好的方法是使用Android Assets Studio，在那里您可以自己对图标进行着色并将其下载为png文件。

0

主页按钮、溢出按钮以及一些来自 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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接