Question

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

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

谢谢！

PS 我引用 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>

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

1 个答案: