viewpager/tabslider 的 FAB 动画

Question

我正在寻找实现这种效果的方法https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsVlhxNGJCNTEzNFU/components-buttons-fab-behavior_04_xhdpi_009.webm

我正在使用 android.support.v4.view.ViewPager

感谢任何提示和帮助

Answer 1

首先，您需要将浮动操作按钮固定到 ViewPager 的布局：

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/action_bar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            app:tabGravity="center"
            app:tabIndicatorColor="?attr/colorAccent"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="?attr/colorAccent"
            app:tabTextColor="@android:color/black" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

     <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            app:layout_anchor="@id/viewpager"
            app:layout_anchorGravity="bottom|right|end"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:src="@drawable/ic_add_white"
            app:borderWidth="@dimen/fab_border_width"
            app:fabSize="normal" />

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

现在您已将 FAB 锚定到 ViewPager（注意：我已经在 viewpager 中的选项卡片段上尝试过此操作；它似乎没有正常运行），向您的 ViewPager 添加一个 OnPageChangeListener，例如所以：

 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {

            switch (position) {
                case INDEX_OF_TAB_WITH_FAB:
                    fab.show();
                    break;

                default:
                    fab.hide();
                    break;
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

"pop" 和 "shrink" 切换选项卡时的动画是使用新版本的支持库自动为您处理的。

Answer 2

我最近找到了我满意的更好的解决方案。 FAB 隐藏方法也可以有一个参数 - 监听器，当按钮隐藏时触发（显示方法也有这个）。唯一的缺点是您必须手动实现 viewpager 和 tablayout 更改。

@Override
public void onPageSelected(int position) {
    onToolbarTitleChanged(adapter.getPageTitle(position).toString());
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}

@Override
public void onPageScrollStateChanged(int state) {
}

@Override
public void onTabSelected(TabLayout.Tab tab) {
    viewPager.setCurrentItem(tab.getPosition());
}

@Override
public void onTabUnselected(final TabLayout.Tab tab) {
    fab.hide(new FloatingActionButton.OnVisibilityChangedListener() { // Hide FAB
        @Override
        public void onHidden(FloatingActionButton fab) {
            fab.show(); // After FAB is hidden show it again
        }
    });
}

@Override
public void onTabReselected(TabLayout.Tab tab) {
}

如果你只想在特定的选项卡上显示 FAB，你可以将 onTabSelected 方法更改为：

@Override
public void onTabSelected(TabLayout.Tab tab) {
    if (tab.getPosition() == 2) {
        createButton.hide();
    }
    viewPager.setCurrentItem(tab.getPosition());
}

Answer 3

我发现的解决方案是：

我的 ViewPager 中显示的片段实现了一个接口（在我的例子中 FloatingActionButtonFragment）。此接口要求片段具有方法 handleFABClick(View).

我的 ViewPager 更改监听器如下所示：

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {


    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {


    }

    @Override
    public void onPageScrollStateChanged(int state) {

        switch (state) {
            case ViewPager.SCROLL_STATE_SETTLING:
                displayFloatingActionButtonIfNeeded(viewPager.getCurrentItem());
                break;

            case ViewPager.SCROLL_STATE_IDLE:
                displayFloatingActionButtonIfNeeded(viewPager.getCurrentItem());
                break;

            default:
                mFloatingActionButton.hide();
        }

    }
});

private void displayFloatingActionButtonIfNeeded(int position) {
    if (mFragmentStatePagerAdapter.getItem(position) instanceof FloatingActionButtonFragment) {

        final FloatingActionButtonFragment floatingActionButtonFragment = (FloatingActionButtonFragment) mFragmentStatePagerAdapter.getItem(position);

        mFloatingActionButton.show();
        mFloatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                floatingActionButtonFragment.handleFABClick(v);
            }
        });
    }
}

这使得 FAB 'hide' 当用户正在改变视图时，然后在视图状态空闲（它已经稳定）或正在稳定（我需要同时执行这两个操作）时触发 show 方法只使用空闲感觉不对。

Answer 4

这是另一种解决方案。我和其他人的问题是，将 FAB 的控制权交给包含 ViewPager 的 activity 会使编码变得困难。

我需要 Fragments 对 FAB 进行大量控制，以便轻松更改 FAB 图标并在其上设置特定的侦听器。

大致的步骤是：

在包含 ViewPager 的主 activity 中声明一个 FAB，而不是在片段中声明（这是我想避免的强制性步骤，但魔术随后出现；否则会使事情变得困难一个很好的动画）
在要在 ViewPager 中显示的每个片段中，我创建了一个可以传递 FAB 的方法，例如 public void shareFab(FloatingActionButton sharedFab)；在此方法中，每个片段将设置 FAB 图标并添加所需的侦听器
我在 ViewPager 上设置了一个 ViewPager.OnPageChangeListener 侦听器，它将触发动画并调用我的 shareFab 方法。

因此每次显示一个片段时，包含的activity将给显示的片段一个FAB的引用。该片段然后 reset/recycle FAB 以满足其需要。

这是一个例子：

要显示的片段

public void Fragment1 extends Fragment {

    private FloatingActionButton mSharedFab;

    @Override
    public void onDestroy() {
        super.onDestroy();
        mSharedFab = null; // To avoid keeping/leaking the reference of the FAB
    }

    public void shareFab(FloatingActionButton fab) {
        if (fab == null) { // When the FAB is shared to another Fragment
            if (mSharedFab != null) {
                mSharedFab.setOnClickListener(null);
            }
            mSharedFab = null;
        }
        else {
            mSharedFab = fab;
            mSharedFab.setImageResource(R.drawable.ic_search);
            mSharedFab.setOnClickListener((fabView) -> {
                // Your code
            });
        }
    }
}

容器activity

public class ActivityMain extends AppCompatActivity {

    FloatingActionButton mSharedFab;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mSharedFab = (FloatingActionButton) findViewById(R.id.shared_fab);

        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        Fragment1 fragment1 = new Fragment1();
        Fragment2 fragment2 = new Fragment2();
        adapter.addFragment(fragment1, "Fragment1");
        adapter.addFragment(fragment2, "Fragment2");
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(adapter);

        fragment1.shareFab(mSharedFab); // To init the FAB
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { }
            @Override
            public void onPageSelected(int position) {  }
            @Override
            public void onPageScrollStateChanged(int state) {
                switch (state) {
                    case ViewPager.SCROLL_STATE_DRAGGING:
                        mSharedFab.hide(); // Hide animation
                        break;
                    case ViewPager.SCROLL_STATE_IDLE:
                        switch (viewPager.getCurrentItem()) {
                            case 0:
                                fragment2.shareFab(null); // Remove FAB from fragment
                                fragment1.shareFab(mSharedFab); // Share FAB to new displayed fragment
                                break;
                            case 1:
                            default:
                                fragment1.shareFab(null); // Remove FAB from fragment
                                fragment2.shareFab(mSharedFab); // Share FAB to new displayed fragment
                                break;
                        }
                        mSharedFab.show(); // Show animation
                        break;
                }
            }
        });
    }
}

...和主要的经典布局activity

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"  />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/shared_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin" />

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

优点是：

像 Material 设计指南中描述的那样的动画！
每个片段对 FAB 的完全控制

缺点是：

由于 FAB 可以共享给其他片段，每次都应该检查 FAB 的引用以确保它不为空
在ViewPager层声明FAB，有点繁琐

Answer 5

要获得良好的隐藏和显示动画，请使用此：

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                switch (state){
                    case ViewPager.SCROLL_STATE_IDLE:
                        fab.show();
                        break;
                    case ViewPager.SCROLL_STATE_DRAGGING:
                    case ViewPager.SCROLL_STATE_SETTLING:
                        fab.hide();
                        break;
                }

            }
        });

Answer 6

对于我的问题，我不想在第一个选项卡上显示浮动操作按钮；为了实现这一点，我添加了

android:visibility="invisible"

在浮动操作栏中。

<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="@dimen/fab_margin"
        android:visibility="invisible"
        app:srcCompat="@android:drawable/ic_input_add" />

并且我按照@chantell

的建议在我的 activity 中添加了 ViewpagerListner

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

                switch (position) {
                    case 0:
                        addFloatingActionBt.hide();
                        break;
                    default:
                        addFloatingActionBt.show();
                        break;

                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

viewpager/tabslider 的 FAB 动画

FAB animation with viewpager/tabslider

android

android-viewpager

material-design

floating-action-button