logo标签列表

安卓设计支持库中的菜单和自动隐藏浮动操作按钮

androidmaterial-designandroid-design-libraryfloating-action-button
10

我正在使用Android Design支持库，并且希望有一个可以通过滚动自动隐藏的FloatingActionButton，

我的布局如下：

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

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/LargeText" />
    </ScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchorGravity="bottom|right|end"
        app:layout_anchor="@id/scrollView"
        android:src="@drawable/abc_btn_rating_star_off_mtrl_alpha" />

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

当滚动文本时，FloatingActionButton总是显示，我希望在滚动文本时自动隐藏它。

此外，我想要通过单击FloatingActionButton来获得FloatingActionButton菜单，就像这样:

输入图像描述

2
请查看此链接，它可能会对您有所帮助：https://guides.codepath.com/android/Floating-Action-Buttons - darwin
您可以在此处查看：https://dev59.com/Rl0a5IYBdhLWcg3wPWlN#30701458 - Anuj Sharma
你是如何将文本显示在FloatingActionButton旁边的？ - Mikheil Zhghenti
3个回答
31

带有滚动自动隐藏功能的FloatingActionButton，

您必须使用android.support.v4.widget.NestedScrollView来替代ScrollView。不能使用ScrollView，您必须使用NestedScrollView或实现了NestedScrollingChild接口的视图，例如RecyclerView。

要实现这种模式，您必须实现自定义的Behavior。一位Google工程师发布了一个很好的代码，当用户向下滚动时隐藏FAB，并在向上滚动时显示它。重复使用FloatingActionButton.Behavior用于在AppBarLayout退出/进入时隐藏/显示FAB的相同动画。

2025年3月4日更新

从22.2.1开始，您可以简单地添加下面发布的代码，使用预构建的动画即可。只需使用类似于以下内容的类：（原始来源这里）

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                                       final View directTargetChild, final View target, final int nestedScrollAxes) {
        // Ensure we react to vertical scrolling
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                               final View target, final int dxConsumed, final int dyConsumed,
                               final int dxUnconsumed, final int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            // User scrolled down and the FAB is currently visible -> hide the FAB
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            // User scrolled up and the FAB is currently not visible -> show the FAB
            child.show();
        }
    }
}

然后，您可以使用以下方式将此行为应用于您的 FAB：

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
     app:layout_behavior="com.support.android.designlibdemo.ScrollAwareFABBehavior" />

使用Design 22.2.0时，您需要使用这样的类：

(原始来源在这里)
public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
    private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();
    private boolean mIsAnimatingOut = false;

    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                                       final View directTargetChild, final View target, final int nestedScrollAxes) {
        // Ensure we react to vertical scrolling
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                               final View target, final int dxConsumed, final int dyConsumed,
                               final int dxUnconsumed, final int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) {
            // User scrolled down and the FAB is currently visible -> hide the FAB
            animateOut(child);
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            // User scrolled up and the FAB is currently not visible -> show the FAB
            animateIn(child);
        }
    }

    // Same animation that FloatingActionButton.Behavior uses to hide the FAB when the AppBarLayout exits
    private void animateOut(final FloatingActionButton button) {
        if (Build.VERSION.SDK_INT >= 14) {
            ViewCompat.animate(button).scaleX(0.0F).scaleY(0.0F).alpha(0.0F).setInterpolator(INTERPOLATOR).withLayer()
                    .setListener(new ViewPropertyAnimatorListener() {
                        public void onAnimationStart(View view) {
                            ScrollAwareFABBehavior.this.mIsAnimatingOut = true;
                        }

                        public void onAnimationCancel(View view) {
                            ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
                        }

                        public void onAnimationEnd(View view) {
                            ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
                            view.setVisibility(View.GONE);
                        }
                    }).start();
        } else {
            Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_out);
            anim.setInterpolator(INTERPOLATOR);
            anim.setDuration(200L);
            anim.setAnimationListener(new Animation.AnimationListener() {
                public void onAnimationStart(Animation animation) {
                    ScrollAwareFABBehavior.this.mIsAnimatingOut = true;
                }

                public void onAnimationEnd(Animation animation) {
                    ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
                    button.setVisibility(View.GONE);
                }

                @Override
                public void onAnimationRepeat(final Animation animation) {
                }
            });
            button.startAnimation(anim);
        }
    }

    // Same animation that FloatingActionButton.Behavior uses to show the FAB when the AppBarLayout enters
    private void animateIn(FloatingActionButton button) {
        button.setVisibility(View.VISIBLE);
        if (Build.VERSION.SDK_INT >= 14) {
            ViewCompat.animate(button).scaleX(1.0F).scaleY(1.0F).alpha(1.0F)
                    .setInterpolator(INTERPOLATOR).withLayer().setListener(null)
                    .start();
        } else {
            Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_in);
            anim.setDuration(200L);
            anim.setInterpolator(INTERPOLATOR);
            button.startAnimation(anim);
        }
    }
}

然后您可以使用以下方式将此行为应用于您的FAB：

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
     app:layout_behavior="com.support.android.designlibdemo.ScrollAwareFABBehavior" />

当然，您可以更改此代码以获取您喜欢的模式。

而且，我想通过单击 FloatingActionButton 来拥有一个 FloatingActionButton 菜单，就像这样：

目前原始的 FloatingActionButton 不支持此模式。您必须实现自定义代码才能实现它。

这段代码对scrollView不起作用。我尝试了这个代码，但它只适用于ViewPager。 - AliSh
1
由于某种原因，在onNestedScroll中，dyConsumed对我总是返回0，所以动画从未运行。我将其替换为dyUnconsumed，现在它按预期运行。 - PPartisan
1
@AliSh，你在哪里找到了R.anim.fab_in和R.anim.fab_out动画？ - Shajeel Afzal
2
design_fab_out和design_fab_in位于<sdk>/extras/android/support/design/res/anim/。 - Thomas Vos
如何将此库添加到Android Studio - Akshay kumar
显示剩余2条评论
1

你可以实现它

这是我的代码。

步骤1：

首先，创建FloatingActionMenu的Getter方法，以便您可以从其他活动或使用recycleview的片段中调用它。

public FloatingActionMenu getFloatingActionMenu() {
        return fabMenu;
    }

步骤2：
从另一个活动或片段调用以下行：
   FloatingActionMenu fabMenu=((MainActivity)getActivity()).getFloatingActionMenu();

第三步：

现在根据“dy”位置检查recycleview是否滚动，这里我使用了fabMenu动画。

Animation FabMenu_fadOut = AnimationUtils.loadAnimation(getActivity(),
            R.anim.fade_out);
Animation  FabMenu_fadIn = AnimationUtils.loadAnimation(getActivity(),
            R.anim.abc_grow_fade_in);

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                if (dy > 0 && floatingActionButton.isShown()) {
                    //fabMenu.startAnimation(FabMenu_fadIn);
                    fabMenu.setVisibility(View.GONE);
                }
                if (dy < 0 && !floatingActionButton.isShown()) {
                   // fabMenu.startAnimation(FabMenu_fadOut);
                    fabMenu.setVisibility(View.VISIBLE);
                }
            }
        });

注意：如果您想在滚动时隐藏FloatingActionButton，则使用与FloatingActionMenu中相同的代码。
谢谢。
0

您可以使用this来实现浮动操作菜单。

关于浮动操作菜单的动画，您可以创建一个名为ScrollAwareFloatingActionMenuBehaviour的类：

public class ScrollAwareFloatingActionMenuBehaviour extends CoordinatorLayout.Behavior<FloatingActionsMenu> {
    private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();
    private boolean mIsAnimatingOut = false;
    private boolean mIsAnimatingIn = false;

    public ScrollAwareFloatingActionMenuBehaviour(Context context, AttributeSet attrs) {
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionsMenu child, View dependency) {
        return dependency instanceof Snackbar.SnackbarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionsMenu child, View dependency) {
        float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
        child.setTranslationY(translationY);
        return true;
    }

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,
                                       FloatingActionsMenu child, View directTargetChild, View target, int nestedScrollAxes) {
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL ||
                super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target,
                        nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionsMenu child,
                               View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed,
                dyUnconsumed);

        if (dyConsumed > 10 && !this.mIsAnimatingOut && !this.mIsAnimatingIn && child.getVisibility() == View.VISIBLE) {
            // User scrolled down and the FAB is currently visible -> hide the FAB
            animateOut(child);
        } else if (dyConsumed < -10 && !this.mIsAnimatingOut && !this.mIsAnimatingIn && child.getVisibility() != View.VISIBLE) {
            // User scrolled up and the FAB is currently not visible -> show the FAB
            animateIn(child);
        }
    }

    // Same animation that FloatingActionButton.Behavior uses to hide the FAB when the AppBarLayout exits
    private void animateOut(final FloatingActionsMenu button) {
        if (Build.VERSION.SDK_INT >= 14) {
            ViewCompat.animate(button).translationYBy(200F).alpha(0.0F).setInterpolator(INTERPOLATOR).withLayer()
                    .setListener(new ViewPropertyAnimatorListener() {
                        public void onAnimationStart(View view) {
                            ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingOut = true;
                        }

                        public void onAnimationCancel(View view) {
                            ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingOut = false;
                        }

                        public void onAnimationEnd(View view) {
                            ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingOut = false;
                            view.setVisibility(View.GONE);
                        }
                    }).start();
        } else {
            Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.design_fab_out);
            anim.setInterpolator(INTERPOLATOR);
            anim.setDuration(200L);
            anim.setAnimationListener(new Animation.AnimationListener() {
                public void onAnimationStart(Animation animation) {
                    ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingOut = true;
                }

                public void onAnimationEnd(Animation animation) {
                    ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingOut = false;
                    button.setVisibility(View.GONE);
                }

                @Override
                public void onAnimationRepeat(final Animation animation) {
                }
            });
            button.startAnimation(anim);
        }
    }

    // Same animation that FloatingActionButton.Behavior uses to show the FAB when the AppBarLayout enters
    private void animateIn(FloatingActionsMenu button) {
        button.setVisibility(View.VISIBLE);
        if (Build.VERSION.SDK_INT >= 14) {
            ViewCompat.animate(button).translationYBy(-200F).alpha(1.0F)
                    .setInterpolator(INTERPOLATOR).withLayer().setListener(new ViewPropertyAnimatorListener() {
                @Override
                public void onAnimationStart(View view) {
                    ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingIn = true;

                }

                @Override
                public void onAnimationEnd(View view) {
                    ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingIn = false;

                }

                @Override
                public void onAnimationCancel(View view) {
                    ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingIn = false;

                }
            })
                    .start();
        } else {
            Animation anim = AnimationUtils.loadAnimation(button.getContext(), android.support.design.R.anim.design_fab_in);
            anim.setDuration(200L);
            anim.setInterpolator(INTERPOLATOR);
            button.startAnimation(anim);
        }
    }
}

请注意，R.anim.fab_in和R.anim.fab_out分别被R.anim.design_fab_in和R.anim.design_fab_out替换。
在xml中使用它：
<com.getbase.floatingactionbutton.FloatingActionsMenu
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        android:id="@+id/fab_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        fab:fab_addButtonColorNormal="@color/colorAccent"
        fab:fab_addButtonColorPressed="@color/colorAccentLight"
        fab:fab_addButtonPlusIconColor="@android:color/white"
        app:layout_behavior="com.example.widgets.behaviour.ScrollAwareFloatingActionMenuBehaviour"
        fab:fab_labelStyle="@style/menu_labels_style"
        fab:fab_labelsPosition="left">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_share"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/fab_normal_blue"
            fab:fab_colorPressed="@color/fab_normal_blue_pressed"
            fab:fab_icon="@drawable/ic_social_share"
            fab:fab_title="@string/fab_menu_group_chat" />

</com.getbase.floatingactionbutton.FloatingActionsMenu>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接