如何使 FAB 避免在 ViewPager 中移动，但又是其中的片段的一部分？

Posted 2023-02-22

【中文标题】如何使 FAB 避免在 ViewPager 中移动，但又是其中的片段的一部分？

【英文标题】：How to make the FAB avoid being moved in ViewPager, yet be a part of the fragment within?

【发布时间】：2015-10-25 05:10:59

【问题描述】：

背景

根据材料设计指南 (here)，如果您使用具有 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，并将其附加到活动，在滚动时进行动画处理，当它完成滚动时，我可以隐藏它并显示另一个片段？

【问题讨论】：

FAB 应该是 Fragment 的一部分，而不是 Activity 的一部分。关于动画，我认为 PageTransform 应该这样做

【参考方案1】：

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

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

编辑

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

动画让老工厂消失：

<?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>

【讨论】：

我想知道，你能避免把 FAB 放在活动中吗？

@androiddeveloper 是的，您也可以将它放在包含 viewpager 的片段中（包含其他片段）。但是在 viewpager 的每个片段中放置一个 FAB 意味着您有多个 FAB，我认为这不是实现它的好方法。您仍然可以等待其他关于良好实施的回复。

我的意思是 viewPager 中的片段，但我明白你的意思。你说我的想法，这可能是不可能的，并且 ViewPager 的容器应该以某种方式处理 FAB。

@androiddeveloper 是的，我认为容器必须同时包含 viewpager 和 fab