【问题标题】:How to implement an ActionBar scroll animation like in Google Search?如何在 Google 搜索中实现 ActionBar 滚动动画?
【发布时间】:2016-01-29 17:02:22
【问题描述】:

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

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

谢谢!


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

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

【问题讨论】:

  • @JorelLokiAmthor 请仔细查看提供的屏幕截图。应该平滑移动到 ActionBar 中的文本,最初位于屏幕的特定部分。并且只有当用户滚动屏幕到指定部分时才会移动到ActionBar。
  • 您所说的细微差别并不能证明一个全新的问题是合理的,因为您可以在询问之前简单地搜索 SO。例如thisthis(我不会列出我找到的每个 SO 链接)
  • 这是两个完全不同的问题。如果您使用任何一个应用程序,它们会做两件完全不同的事情。搜索应用程序完全没有褪色。标题也会向上滚动并取代工具栏标题。出于这个原因,这应该是一个完全不同的问题。
  • @JorelAmthor 您没有尝试过这两个应用程序,不是吗?这很明显,而且差别不大。我在这里遇到了同样的问题。

标签: android android-actionbar android-animation material-design android-xml


【解决方案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>

【讨论】:

  • 完美解决方案!有一个问题:titleContainer 不会消失,而是变得透明。结果,它仍然是一个空白空间。
猜你喜欢
  • 2014-05-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-01-24
  • 2019-11-16
  • 2021-05-19
  • 2020-09-02
相关资源
最近更新 更多