Подтвердить что ты не робот

CollapsingToolbarLayout: изменение цвета кнопки дома при расширении

Я внедрил новый CollapsingToolbarLayout из примера кода Chris Banes.

Однако изображения для изображения в фоновом режиме имеют весь белый фон. Тема панели инструментов ThemeOverlay.AppCompat.Dark.ActionBar, поэтому значки тоже белые, поэтому я не вижу кнопку дома, когда CollapsingToolbarLayout полностью расширяется.

С app:expandedTitleTextAppearance я могу установить цвет для поля заголовка. Есть ли возможность установить цвет кнопок дома и значков меню?

4b9b3361

Ответ 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

В моих глазах это возможно только в том случае, если вы измените чертежи домашней кнопки, значков меню и кнопки переполнения. К счастью, Google предоставил нам новый API под названием Tinted Drawables, который позволяет нам устанавливать цветное изображение с возможностью рисования или девяти патчей. Вот как это работает:

<?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.

Ответ 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;
}

Ответ 4

Лучше использовать 2 разных изображения на панели инструментов. Другие могут вызвать некоторые нежелательные проблемы:

  1. Попытка установить 2 разные темы панели инструментов никогда не будет работать, потому что темы устанавливаются только при создании действия, установка другой темы не имеет никакого эффекта, вам нужно заново создать действие.
  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));
});

Ответ 5

Вы можете получить хороший цветовой переход при прокрутке с помощью следующего подхода с использованием 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 развернут, и белый значок в свернутом состоянии.