从顶部为AppBarLayout设置动画

时间:2015-11-22 22:06:28

标签: android android-coordinatorlayout android-appbarlayout

我试图从顶部为AppBarLayout设置动画,例如this视频中的工具栏。

这是我的布局

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/abl"
        android:layout_width="match_parent"
        android:layout_height="152dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?colorPrimary"
            app:titleEnabled="true"
            app:expandedTitleTextAppearance="@style/Title.Expanded"
            app:collapsedTitleTextAppearance="@style/Title.collapsed"
            app:title="Title"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            </android.support.v7.widget.Toolbar>

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

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

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:behavior_overlapTop="48dp"/>

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

我计划将AppBarLayout翻译为其高度的负值,然后将其动画回0

但出于某些原因,abl.setTranslationY(-height)无法正常工作:(

编辑:如果在布局了所有视图后执行它(例如,如果在按钮的点击监听器内执行,它可以工作),它就可以工作了,但不是在onCreateonResumeonCreateOptions工作。

编辑2 :我需要在活动开始时应该没有appBarLayout,然后它应该从顶部进入。请参阅视频。

1 个答案:

答案 0 :(得分:3)

使用此:

private static final float APPBAR_ELEVATION = 14f;

private void AnimateAppBar(final AppBarLayout appBar) {
    appBar.animate()
            .translationY(-appBar.getHeight())
            .setInterpolator(new LinearInterpolator())
            .setDuration(500)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    appBar.setElevation(0);
                    appBar.animate()
                            .translationY(0)
                            .setInterpolator(new LinearInterpolator())
                            .setDuration(500)
                            .setListener(new AnimatorListenerAdapter() {
                                @Override
                                public void onAnimationEnd(Animator animation) {
                                    appBar.setElevation(APPBAR_ELEVATION);
                                }
                            });
                }
            });
}

这是您致电AnimateAppBar(appBar);

时的结果

enter image description here

您可以同时更改Duration以加快动画速度,如果您不希望效果在动画结束时设置为高,则可以将APPBAR_ELEVATION设置为0.

修改

onCreate()

中使用此功能
animationAppBarDown(appBar);

并添加此方法:

private void animationAppBarDown(final AppBarLayout appBar){
    new CountDownTimer(300, 1) {
        public void onTick(long millisUntilFinished) {
            appBar.setTranslationY(-appBar.getHeight());
        }

        public void onFinish() {
            appBar.animate()
                    .translationY(0)
                    .setDuration(500).start();
        }
    }.start();
}

结果如下:

enter image description here