CollapsingToolbarLayout 箭头颜色答案

【问题标题】：CollapsingToolbarLayout arrow colorCollapsingToolbarLayout 箭头颜色
【发布时间】：2016-02-19 08:42:11
【问题描述】：

我在我的 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>

【问题讨论】：

标签： android colors android-collapsingtoolbarlayout

【解决方案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);
                    }
        }
});

【讨论】：

【解决方案2】：

来自documentation on 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
可绘制对象的总大小
android.support.v7.appcompat:gapBetweenBars
条相互平行时的最大间距
android.support.v7.appcompat:spinBars
过渡期间条形是否应旋转
android.support.v7.appcompat:thickness
条形涂料的厚度（笔划大小）

我认为android.support.v7.appcompat:color 是你所追求的。

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

选项 1
从您的Toolbar 获取导航图标并对其应用颜色过滤器。例如，要将图标着色为红色，可以执行以下操作：

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

这种方法的优点是您可以使用各种PorterDuff.Mode 常量来实现不同的效果。如果您决定提供自己的导航图标（而不是默认的 hamburger-turns-arrow-and-vice-versa drawable），这种方法也将有效（并继续有效）。

选项 2
如果您只对为默认导航图标着色感兴趣，您可以利用可绘制的导航图标是 DrawerArrowDrawable 的事实，它具有 setColor() 方法：

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

如果您打算借助 ObjectAnimator.ofArgb(...) 或 ValueAnimator.ofArgb(...)（而不是仅仅设置它）来逐渐为颜色设置动画，则第二种方法可能更容易使用。

【讨论】：

我需要如何使用它？有了你的回答，我创建了这个答案link，但它使我的工具栏变暗，箭头显示白色它是折叠的
@tarasmorskyi：我的错。我最初误解了你的问题。样式并不是真的要即时（在运行时）换出，因此不太适合解决您的问题。我已经用两种在运行时为导航图标着色的方法更新了我的答案。

【解决方案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);
            }
        }
    });

如果您想在 android 中使用 collapsingtoolbarlayout 时更改工具栏后退按钮的颜色。这是当你想在 appbarlayout 折叠或展开时显示不同颜色的后退按钮的条件。

【讨论】：