如何在 Google 搜索中实现 ActionBar 滚动动画？

Question

我想在 Google 搜索应用中实现 ActionBar 滚动动画。示例如下：

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

谢谢！

---

P.S.我引用 Eugene H 的评论来明确指出这个问题不是现有问题的重复 (How to make a ActionBar like Google Play that fades in when scrolling )：

这是两个完全不同的问题。如果你用过 无论是应用程序，它们都会做两件完全不同的事情。没有褪色 在搜索应用程序中。标题也会向上滚动并占据 工具栏标题的位置。应该是完全不同的 出于这个原因的问题。

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>