如何实现像 Google 搜索中那样的 ActionBar 滚动动画？

Question

我想像 Google 搜索应用程序一样实现 ActionBar 滚动动画。示例如下：

如果有任何提示或实现类似效果的现有库，我将不胜感激。

谢谢！

P.S. 我引用 Eugene H 的评论来明确表示这个问题不是现有的（How to make a ActionBar like Google Play that fades in when scrolling ）：

They are two completely different different questions. If you used either app they do two completely different things. There is no fading at all in the search app. The title also scrolls up and takes the place of the toolbar title. It should be a completely different question for that reason.

Answer 1

我创建了一个简单的示例来说明如何完成。我没有优化任何东西，只是把一些东西放在一起看它是否有效。您可能需要尝试一些东西才能按照您想要的方式获得它。虽然这没有优化，但它似乎比当前的搜索应用程序表现更好。

Here is a GIF of what it looks like

代码如下：

public class ScrollingActivity extends AppCompatActivity implements AppBarLayout.OnOffsetChangedListener {

    LinearLayout titleContainer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scrolling);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.drawable.ic_arrow_back_24dp);
        final AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
        titleContainer = (LinearLayout) findViewById(R.id.titleContainer);
        appBarLayout.addOnOffsetChangedListener(this);
    }

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        int maxScroll = appBarLayout.getTotalScrollRange();
        float percentage = (float) Math.abs(verticalOffset) / (float) maxScroll;
        float holderAlpha = 1f - percentage;
        titleContainer.setAlpha(holderAlpha);
    }
}

xml

<?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="h.eugene.com.testingtoolbar.ScrollingActivity">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:expandedTitleMarginBottom="16dp"
            app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Headline"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/images"
                app:layout_collapseMode="parallax" />

            <View
                android:layout_width="match_parent"
                android:layout_height="56dp"
                android:layout_gravity="end|bottom"
                android:background="?attr/colorPrimary" />

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

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

    <include layout="@layout/content_scrolling" />

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

xml的下一部分

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
    app:behavior_overlapTop="8dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="h.eugene.com.testingtoolbar.ScrollingActivity"
    tools:showIn="@layout/activity_scrolling">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="?attr/colorPrimary"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/titleContainer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:orientation="vertical"
            android:paddingBottom="16dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="32dp"
                android:text="Testing Pt1"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="32dp"
                android:text="Testing Pt2"
                android:textColor="@android:color/white" />
        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#eee"
            android:padding="@dimen/text_margin"
            android:text="@string/large_text" />

    </LinearLayout>


</android.support.v4.widget.NestedScrollView>

如何实现像 Google 搜索中那样的 ActionBar 滚动动画？

How to implement an ActionBar scroll animation like in Google Search?

android

android-animation

android-xml

android-actionbar

material-design