ViewPager 滚动上的动画浮动操作按钮

Posted 2023-02-22

【中文标题】ViewPager 滚动上的动画浮动操作按钮

【英文标题】：Animate Floating Action Button on ViewPager scroll

【发布时间】：2015-11-19 00:08:31

【问题描述】：

我在它下面有 AppBarLayout、ViewPager 和一个 Activity 中的浮动操作按钮。我想在滚动 ViewPager 时为 FAB 设置动画。看看下面的屏幕。

当 Tab1 是当前选项卡时，FAB 应该在右下角。当 Tab2 是当前选项卡时，FAB 应该位于底部中心区域。当 Tab3 是当前选项卡时，FAB 应移回右下角。当 Tab4 是当前选项卡时，FAB 应该锚定到 ImageView4 并且应该位于 ImageView4 的右下角。

我怎样才能做到这一点？请帮帮我。

我需要在 ViewPager 上实现 onPageChangeListener 并在 onPageScrolled() 中处理。

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() 
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) 
            final int width = mViewPager.getWidth();
            if(position == 0) 
                // Transition from page 0 to page 1 (horizontal shift)
                int translationX = (int) ((-(width - mFab.getWidth()) / 2f) * positionOffset);
                mFab.setTranslationX(translationX);
                mFab.setTranslationY(0);
             else if(position == 1) 
                // Transition from page 1 to page 2 (horizontal shift)
                int translationX = (int) (((width - mFab.getWidth())) * positionOffset);
                mFab.setTranslationX(translationX);
                mFab.setTranslationY(0);
             else if(position == 2) 
                // Transition from page 2 to page 3

            
        

        @Override
        public void onPageSelected(int position) 

        

        @Override
        public void onPageScrollStateChanged(int state) 

        
    );

当我从 tab1 转到 tab2 时，FAB 翻译正确，但最终它又回到了原来的位置。

我应该如何在 onPageScrolled() 中为 FAB 设置动画？

【问题讨论】：

你真的需要它是同一个FAB吗？如果你每个片段都有一个（这样你可以将它们固定到正确的位置），你可以像这里的示例 #4 那样为它们设置动画：google.com/design/spec/components/…

【参考方案1】：

您可以使用坐标布局轻松做到这一点。 首先，在 gradle 中添加 Support Design Library： compile 'com.android.support:design:22.2.0'

现在让我们为我们的活动创建一个简单的布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_>
     <LinearLayout
        android:id="@+id/your fist layout"
        android:layout_
        android:layout_
        android:orientation="vertical">
    </LinearLayout>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_
        android:layout_
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/ic_done" />

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

<LinearLayout
        android:id="@+id/your second layout"
        android:layout_
        android:layout_
        android:orientation="vertical">
</LinearLayout>

这应该可行，否则，您可以通过将两个布局放在并列布局中并显示隐藏第二个布局来玩弄。

更多详情见链接：http://android-developers.blogspot.in/2015/05/android-design-support-library.html