如何为状态栏和工具栏的颜色变化设置动画(就像新的“日历"应用一样) [英] How can I Animate the color change of the statusbar and toolbar (like the new Calendar app does)

问题描述

新的Google日历应用具有我想在应用中制作的动画.创建新事件时，可以选择事件的颜色.当您这样做时，状态栏和工具栏将变为具有覆盖两者的圆形效果的颜色.

The new Google Calendar app has an animation I would like to do in my app. When you create a new event you can choose a color for the event. When you do, the statusbar and toolbar change to that color with a circular effect that covers both of them.

我可以更改状态栏和工具栏的颜色，但是当颜色更改时，如何将圆形动画效果(或类似效果)应用于它们呢?

I can change the color of the statusbar and toolbar, but how can I apply the circular animation effect (or similar) to both of them as the color is changed?

推荐答案

我不知道这是否是日历"应用程序的确切方法，但对我来说足够接近了.

I don't know if this is the exact way the Calendar app does it, but it's close enough for me.

• 该方法使用Lollipop中引入的ViewAnimationUtils.createCircularReveal方法.
• 这需要知道状态栏和工具栏操作栏的高度.您仍然可以对操作栏使用?attr/actionBarSize并动态获取它们，但是为了简单起见，在这里，我假设56dp表示操作栏高度，而24dp表示状态栏高度.

• The method uses the ViewAnimationUtils.createCircularReveal method introduced in Lollipop.
• It requires knowing the height of the status bar and your toolbar actionbar. You can still use ?attr/actionBarSize for your actionbar and get both dynamically, but for simplicity here I've assumed 56dp for the actionbar height and 24dp for the status bar height.

通常的想法是将操作栏和状态栏设置为透明.这会将操作栏在状态栏下向上移动，因此您必须调整操作栏的大小和填充以进行补偿.然后，您可以使用其后的视图和ViewAnimationUtils.createCircularReveal来显示新的背景色.您需要在其后再增加一个视图以显示旧的背景颜色，而中间视图则在显示新的背景颜色.

The general idea is to set your actionbar and status bar to transparent. This will shift your actionbar up under the statusbar so you have to adjust the size and padding of the actionbar to compensate. You then use a view behind it and ViewAnimationUtils.createCircularReveal to reveal the new background color. You need one more view behind that to show the old background color as the middle view is revealing the new one.

动画需要:

• 透明的工具栏动作栏，其中覆盖了常规动作栏和状态栏的空间.在这种情况下，硬编码的高度为56dp(操作栏)+ 24dp(状态栏)= 80dp.您还需要将顶部填充设置为24dp，以将操作栏内容保留在状态栏下方.
• 一个中间视图(我称它为显示视图)，该视图的大小相同(高度为80dp)，但位于操作栏的后面.这是ViewAnimationUtils.createCircularReveal所作用的视图.
• 底视图(我称其为显示背景视图)，其大小与显示视图相同，但位于其后.此视图在那里显示旧的背景颜色，而揭示视图则在其上面显示新的颜色.

• The transparent toolbar actionbar that covers the space of the regular actionbar and the statusbar. The hard-coded height, in this case, is 56dp (actionbar) + 24dp (statusbar) = 80dp. You also need to set the top padding to 24dp to keep the actionbar content our from under the statusbar.
• A middle view (I'll call it the reveal view) that's the same size (80dp height) but just behind the actionbar. This will be the view the ViewAnimationUtils.createCircularReveal acts on.
• A bottom view (I'll call it the reveal background view) that's the same size as the reveal view but behind it. This view is there to show the old background color while the reveal view is revealing the new color on top of it.

这是我使用的关键代码段.请参阅 https://github.com/shaun-blake-experiments/example-toolbar-animation上的示例项目. .

Here are the key pieces of code I used. See the example project at https://github.com/shaun-blake-experiments/example-toolbar-animation.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <View
        android:id="@+id/revealBackground"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:paddingTop="24dp"
        android:background="@color/primary"
        android:elevation="4dp">
    </View>

    <View
        android:id="@+id/reveal"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:paddingTop="24dp"
        android:background="@color/primary"
        android:elevation="4dp">
    </View>

    <Toolbar
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:paddingTop="24dp"
        android:background="@android:color/transparent"
        android:elevation="4dp"
        android:theme="@style/TranslucentActionBar">
        </Toolbar>

    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Invert Toolbar Colors"
        android:textOn="Invert Toolbar Colors On"
        android:textOff="Invert Toolbar Colors Off"
        android:id="@+id/toggleButton"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

styles.xml

<resources>
    <style name="AppTheme" parent="@android:style/Theme.Material.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="TranslucentActionBar" parent="@android:style/Widget.Material.ActionBar">
        <item name="android:textColorPrimary">@color/primary_text_dark_background</item>
    </style>
</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#2196F3</color>
    <color name="primary_dark">#1976D2</color>
    <color name="primary_light">#BBDEFB</color>
    <color name="accent">#009688</color>
    <color name="primary_text">#DD000000</color>
    <color name="primary_text_dark_background">#FFFFFF</color>
    <color name="secondary_text">#89000000</color>
    <color name="icons">#FFFFFF</color>
    <color name="divider">#30000000</color>
</resources>

MainActivity.java

package com.example.android.toolbaranimation;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.widget.ToggleButton;
import android.widget.Toolbar;


public class MainActivity extends Activity {

    private View mRevealView;
    private View mRevealBackgroundView;
    private Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolbar = (Toolbar) findViewById(R.id.appbar);
        mToolbar.setTitle(getString(R.string.app_name));

        mRevealView = findViewById(R.id.reveal);
        mRevealBackgroundView = findViewById(R.id.revealBackground);

        ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggleButton);
        toggleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                boolean on = ((ToggleButton) v).isChecked();

                if (on) {
                    animateAppAndStatusBar(R.color.primary, R.color.accent);
                } else {
                    animateAppAndStatusBar(R.color.accent, R.color.primary);
                }
            }
        });

        setActionBar(mToolbar);
    }

    private void animateAppAndStatusBar(int fromColor, final int toColor) {
        Animator animator = ViewAnimationUtils.createCircularReveal(
                mRevealView,
                mToolbar.getWidth() / 2,
                mToolbar.getHeight() / 2, 0,
                mToolbar.getWidth() / 2);

        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                mRevealView.setBackgroundColor(getResources().getColor(toColor));
            }
        });

        mRevealBackgroundView.setBackgroundColor(getResources().getColor(fromColor));
        animator.setStartDelay(200);
        animator.setDuration(125);
        animator.start();
        mRevealView.setVisibility(View.VISIBLE);
    }
}

注释

• 请注意工具栏上的android:elevation属性，显示并显示背景视图.如果工具栏上的标高较低，其他的将覆盖按钮和文本.

Notes

• Be careful of the android:elevation property on the toolbar, reveal, and reveal background views. If the elevation is lower on the toolbar, the others will cover the buttons and text.

这篇关于如何为状态栏和工具栏的颜色变化设置动画(就像新的“日历"应用一样)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！