CollapsingToolbarLayout箭头颜色

Question

我在Activity中使用了CollapsingToolbarLayout，但是当它展开时，我需要更改返回箭头的颜色，有没有办法做到这一点？

我的现状：

我想要做的事情：

这是我的布局，其中我放置了“...”，那里包含有一个使用NestedScrollView的嵌套布局。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.primebitstudio.swiper.AboutCouponActivity"
    android:layout_marginTop="-1px">

    <android.support.design.widget.AppBarLayout android:id="@+id/app_bar"
        android:fitsSystemWindows="true"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutExpandedTextStyle"
            app:theme="@style/ThemeOverlay.AppCompat.Light"
            app:popupTheme="@style/ToolBarStyle">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="-24dp">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:scaleType="fitCenter"
                    android:src="@drawable/test_image"
                    android:id="@+id/image"/>
            </RelativeLayout>

            <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ToolBarStyle" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
...
...
</android.support.design.widget.CoordinatorLayout>

- tarasmorskyi

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

- kashlo

Answer 2

来自 ActionBarDrawerToggle文档:

您可以通过在ActionBar主题中定义drawerArrowStyle来自定义动画切换。

drawerArrowStyle属性列出了可以配置的以下属性：

• android.support.v7.appcompat:arrowHeadLength
  表示箭头形成时箭头的长度
• android.support.v7.appcompat:arrowShaftLength
  表示箭头形成时杆的长度
• android.support.v7.appcompat:barLength
  表示并排时条的长度
• android.support.v7.appcompat:color
  用于绘制条的颜色
• android.support.v7.appcompat:drawableSize
  Drawable对象的总大小
• android.support.v7.appcompat:gapBetweenBars
  并排时条之间的最大间距
• android.support.v7.appcompat:spinBars
  是否在过渡期间旋转条
• android.support.v7.appcompat:thickness
  用于绘制条的粗细（笔画大小）

我认为你需要的是 android.support.v7.appcompat:color。

---

为了在运行时更改颜色，您有多种选择。

选项1 从您的工具栏获取导航图标并对其应用颜色过滤器。例如，要将图标变为红色，可以这样做：

Drawable navIcon = mToolbar.getNavigationIcon();
navIcon.setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);

这种方法的优点在于，您可以尝试使用各种PorterDuff.Mode常量来实现不同的效果。如果您决定提供自己的导航图标（而不是默认的汉堡包-箭头互相转换的可绘制对象），此方法也将起作用（并继续起作用）。 选项2
如果您只想给默认的导航图标上色，您可以利用导航图标可绘制对象是一个DrawerArrowDrawable的事实，该对象具有setColor()方法：

DrawerArrowDrawable navIcon = (DrawerArrowDrawable) mToolbar.getNavigationIcon();
navIcon.setColor(Color.RED);

如果你打算使用 ObjectAnimator.ofArgb(...) 或者 ValueAnimator.ofArgb(...) 来逐渐地动画化颜色（而不只是设置它），那么这种第二种方法可能更容易使用。

- MH.

---

我需要如何使用它？通过您的回答，我找到了这个答案[链接]（https://dev59.com/8F8d5IYBdhLWcg3wxkpq），但它使我的工具栏变暗，箭头变白，当它折叠时。 - tarasmorskyi

@tarasmorskyi：抱歉，我最初误解了你的问题。风格并不是为了在运行时（即动态地）进行交换而设计的，因此不太适合解决你的问题。我已经更新了我的答案，提供了两种在运行时对导航图标进行着色的方法。 - MH.

Answer 3

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        int scrollRange = -1;

        @Override
        public void onOffsetChanged(final AppBarLayout appBarLayout, int verticalOffset) {
            //Initialize the size of the scroll
            if (scrollRange == -1) {
                scrollRange = appBarLayout.getTotalScrollRange();
            }
            //Check if the view is collapsed
            if (scrollRange + verticalOffset == 0) {
                @SuppressLint("UseCompatLoadingForDrawables") final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_material);
                upArrow.setColorFilter(getResources().getColor(R.color.black), PorterDuff.Mode.SRC_ATOP);
                Objects.requireNonNull(getSupportActionBar()).setHomeAsUpIndicator(upArrow);
            } else {
                @SuppressLint("UseCompatLoadingForDrawables") final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_material);
                upArrow.setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.SRC_ATOP);
                Objects.requireNonNull(getSupportActionBar()).setHomeAsUpIndicator(upArrow);
            }
        }
    });

如果你想在使用CollapsingToolbarLayout的Android应用中改变工具栏返回按钮的颜色，那么这就是当AppBarLayout折叠或展开时显示不同颜色的返回按钮的条件。

- Rudra Rokaya