Question

如何从外部布局将FAB绑定到底部导航栏？我想将FAB绑定到底部导航栏，以便当用户向上滚动而隐藏（底部导航栏）底部导航栏时，我希望我的FAB与底部导航栏一起向下滚动。而且我有一个BottomNavigationView（activity_main.xml）布局（父布局）：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

    <!-- Content Container -->
    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/bottom_navigation_bar_height"
        android:layout_gravity="bottom|start|end"
        android:background="@color/colorPrimary"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@color/white"
        app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
        app:layout_insetEdge="bottom"
        app:elevation="@dimen/bottom_navigation_bar_elevation"
        app:menu="@menu/navigation_items" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

我有以下带有FAB的fragment_day.xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

    <LinearLayout
        android:id="@+id/ll_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/border_background"
        android:orientation="vertical"
        android:padding="@dimen/header_padding">

        ...  

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_marginBottom="@dimen/fab_bottom_margin"
        android:layout_marginEnd="@dimen/md_keylines"
        android:layout_marginRight="@dimen/md_keylines"
        android:src="@drawable/ic_add_circle"
        app:layout_behavior="@string/fabs_on_scroll_behavior"
        app:fabCustomSize="@dimen/fab_large_diameter" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

看起来像这样，当用户滚动时，只有BottomNavigationView在移动，而FAB保持静止。

我也尝试将以下行添加到<FloatingActionButton>标签中：

app:layout_behavior="@string/fabs_on_scroll_behavior"

以及strings.xml的以下行： com.example.view.utils.FABScrollingViewBehavior

此com.example.view.utils.FABScrollingViewBehavior类实际上是FloatingActionButton.Behavior + HideBottomViewOnScrollBehavior的地方：

public class FABScrollingViewBehavior extends FloatingActionButton.Behavior {
    protected static final int ENTER_ANIMATION_DURATION = 225;
    protected static final int EXIT_ANIMATION_DURATION = 175;
    private static final int STATE_SCROLLED_DOWN = 1;
    private static final int STATE_SCROLLED_UP = 2;
    private int height = 0;
    private int currentState = 2;
    private ViewPropertyAnimator currentAnimator;

    public FABScrollingViewBehavior() {
    }

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

    public boolean onLayoutChild(CoordinatorLayout parent,
                                 FloatingActionButton child,
                                 int layoutDirection) {
        this.height = child.getMeasuredHeight();
        return super.onLayoutChild(parent, child, layoutDirection);
    }

    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,
                                       FloatingActionButton child,
                                       View directTargetChild,
                                       View target,
                                       int nestedScrollAxes) {
        return nestedScrollAxes == 2;
    }

    public void onNestedScroll(CoordinatorLayout coordinatorLayout,
                               FloatingActionButton child, View target,
                               int dxConsumed, int dyConsumed,
                               int dxUnconsumed, int dyUnconsumed) {
        if(this.currentState != 1 && dyConsumed > 0) {
            this.slideDown(child);
        } else if(this.currentState != 2 && dyConsumed < 0) {
            this.slideUp(child);
        }

    }

    protected void slideUp(FloatingActionButton child) {
        if(this.currentAnimator != null) {
            this.currentAnimator.cancel();
            child.clearAnimation();
        }

        this.currentState = 2;
        this.animateChildTo(child, 0, 225L, AnimationUtils.LINEAR_OUT_SLOW_IN_INTERPOLATOR);
    }

    protected void slideDown(FloatingActionButton child) {
        if(this.currentAnimator != null) {
            this.currentAnimator.cancel();
            child.clearAnimation();
        }

        this.currentState = 1;
        this.animateChildTo(child, this.height, 175L, AnimationUtils.FAST_OUT_LINEAR_IN_INTERPOLATOR);
    }

    private void animateChildTo(FloatingActionButton child, int targetY, long duration, TimeInterpolator interpolator) {
        this.currentAnimator = child.animate().translationY((float)targetY).setInterpolator(interpolator).setDuration(duration).setListener(new AnimatorListenerAdapter() {
            public void onAnimationEnd(Animator animation) {
                FABScrollingViewBehavior.this.currentAnimator = null;
            }
        });
    }
}

但是在这种情况下，只有FAB通过滚动向下移动，并且BottomNavigationView保持静止。如何将此FAB绑定到BottomNavigationBar，以便它们一起移动？

Answer 1

尝试一下，这将对我有用

int oldPostion = 0

myScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
        @Override
        public void onScrollChanged() {
            if (myScrollView.getScrollY() > oldPostion) {
                myfab.hide();
            } else if (myScrollView.getScrollY() < oldPostion || myScrollView.getScrollY() <= 0) {
                myfab.show();
            }
            oldPostion = myScrollView.getScrollY();
        }
    });

如何从外部布局将FAB绑定到底部导航栏？

1 个答案: