动画上ViewPager滚动浮动操作按钮 [英] Animate Floating Action Button on ViewPager scroll

问题描述

我有AppBarLayout，ViewPager下方，并在一个活动一个浮动操作按钮。我希望在ViewPager滚动到动画FAB。看看下面的屏幕。

I have AppBarLayout, ViewPager below it and a Floating Action Button in one Activity. I want to animate the FAB when the ViewPager is scrolled. Have a look at the below screens.

在TAB1是当前选项卡，然后在FAB应该在右下角。当TAB2是当前选项卡，然后在FAB应该是在底部的中心区域。当TAB3是当前选项卡，然后在FAB应该搬回右下角。当TAB4是当前选项卡，然后在FAB应该得到挂靠ImageView4并应在ImageView4的右下角。

When Tab1 is the current tab then the FAB should be in the bottom-right corner. When Tab2 is the current tab then the FAB should be in the bottom-center area. When Tab3 is the current tab then the FAB should move back to bottom-right corner. When Tab4 is the current tab then the FAB should get anchored to ImageView4 and should be in the bottom-right corner of ImageView4.

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

How can I achieve this? Please help me out.

我需要实现onPageChangeListener上ViewPager和处理同样在onPageScrolled（）。

I need to implement onPageChangeListener on ViewPager and handle the same in 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正确地翻译，但是，最终它还是回到原来​​的位置。

When I go from tab1 to tab2 the FAB in translating correctly, however, in the end it comes back to original position.

我应该如何动画晶圆厂onPageScrolled（）？

How should I animate the FAB in onPageScrolled()?

推荐答案

您可以轻松地协调布局做到这一点。
首先，添加支持设计库的gradle中：
    编译com.android.support:design:22.2.0

You can do this easily with coordinate layout. First, add Support Design Library in gradle: compile 'com.android.support:design:22.2.0'

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

Now lets create a simple layout for our activity

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
     <LinearLayout
        android:id="@+id/your fist layout"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
    </LinearLayout>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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_width="match_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
</LinearLayout>

这应该工作，否则，你可以把两个布局内的合作orindate布局玩耍，并显示隐藏的第二个。

This should work, else, you can play around by putting both layout inside co-orindate layout and show hide the second one.

中的更多详细信息的链接的android // -developers.blogspot.in/2015/05/android-design-support-library.html

More details in link :http://android-developers.blogspot.in/2015/05/android-design-support-library.html

这篇关于动画上ViewPager滚动浮动操作按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！