如何使FAB避免在ViewPager中移动,但仍然是片段的一部分？

Question

背景

根据材料设计指南(此处),如果您使用具有FAB(浮动操作按钮)的ViewPager,FAB不应作为片段的一部分移动,而是消失或被其他片段替换,或动画其他东西.

简而言之,而不是:

https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsNVRkV3FZMktvMWc/components-buttons-fab-behavior_06_xhdpi_009.webm

你应该做这个:

https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsVlhxNGJCNTEzNFU/components-buttons-fab-behavior_04_xhdpi_009.webm

问题

我没有看到任何示例或教程是什么是执行此操作的最佳方式.

我的意思是,在ViewPager中为每个片段(或其中一些片段)设置FAB,而每个片段都由其片段(逻辑及其外观)控制,但FAB在滑动时不会真正作为片段的一部分移动ViewPager中的片段之间.

即使作为示例应用程序,我也不会在任何地方看到此行为.联系人应用程序对两个片段都具有相同的FAB,并且拨号器只有FAB移动.

甚至还有使用不良行为的应用程序(如Solid-Explorer).在YouTube上,有一个FAB(在"帐户"片段上),但它在标题上,所以它可能没问题.

这个问题

你应该如何实现正确的行为？你真的会把FAB作为活动的一部分而不是片段吗？

是否有关于此的教程和/或示例？

也许,当ViewPager开始滚动时,我可以分离FAB,并将它附加到活动,在滚动时动画,当它完成滚动时,我可以隐藏它并显示另一个片段之一？

Answer 1

不久前，我在 viewpager 和 fab 中遇到了同样的问题，我用这种方式解决了：

• 将 fab 附加到 viewpager 上方的 Activity
• 添加OnPageChangeListener并ViewPager保存onPageSelected(int position)的位置在活动的全局变量中
• 启动onPageSelected你的 fab 的动画（它可以是 xml 或以编程方式，我用 xml 完成）并更改他的colorTint
• 在您的OnClickListener中，onClick(View v)当您检索 fab 的 fab id（或视图）以确定应执行哪个操作时，您可以使用之前获得的位置创建一个 switch 语句onPageSelected

编辑

这是我尝试创建的两个 anim.xml，类似于 android 指南：

使旧的fab消失的动画：

<?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromXScale="1.0"
    android:toXScale="0.0"
    android:fromYScale="1.0"
    android:toYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fillAfter="false"
    android:duration="200" />

<rotate
    android:duration="200"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="360"
    android:toDegrees="270" />
</set>

显示新动画：

<?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="0.0"
        android:toXScale="1.0"
        android:fromYScale="0.0"
        android:toYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="200" />

    <rotate
        android:duration="200"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromDegrees="270"
        android:toDegrees="360" />
</set>