使用Google Design Library如何在向下滚动时隐藏FAB按钮？

Question

谷歌已经发布了我正在使用的设计库

 compile 'com.android.support:design:22.2.1'

但是,我无法看到任何代码示例,说明如何使用此库以及如何FAB在滚动条上设置动画.我想我可以在上面监听滚动事件ListView,然后自己动画按钮,但是这不是API(这不是这个支持库的重点).

有这样的例子吗？

Answer 1

如果您正在使用RecyclerView并且您正在寻找简单的东西,您可以尝试这样做:

    recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener(){
        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy){
            if (dy > 0)
                fabAddNew.hide();
            else if (dy < 0)
                fabAddNew.show();
        }
    });

通过替换0常数,您可以调整触发的灵敏度,提供更流畅的体验

Answer 2

使用自定义CoordinatorLayout.Behavior可以轻松地使组件对滚动事件做出反应,因为它们会在您重写onStartNestedScroll()时自动接收滚动事件.

在cheesesquare之上构建的FABAwareScrollingViewBehavior中隐藏并显示滚动FAB 的示例:

public class FABAwareScrollingViewBehavior
    extends AppBarLayout.ScrollingViewBehavior {
  public FABAwareScrollingViewBehavior(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  @Override
  public boolean layoutDependsOn(CoordinatorLayout parent,
      View child, View dependency) {
    return super.layoutDependsOn(parent, child, dependency) ||
            dependency instanceof FloatingActionButton;
  }

  @Override
  public boolean onStartNestedScroll(
      final CoordinatorLayout coordinatorLayout, final View 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 View 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) {
      // User scrolled down -> hide the FAB
      List<View> dependencies = coordinatorLayout.getDependencies(child);
      for (View view : dependencies) {
        if (view instanceof FloatingActionButton) {
          ((FloatingActionButton) view).hide();
        }
      }
    } else if (dyConsumed < 0) {
      // User scrolled up -> show the FAB
      List<View> dependencies = coordinatorLayout.getDependencies(child);
      for (View view : dependencies) {
        if (view instanceof FloatingActionButton) {
          ((FloatingActionButton) view).show();
        }
      }
    }
  }
}

滚动视图的位置app:layout_behavior="com.support.android.designlibdemo.FABAwareScrollingViewBehavior"而不是app:layout_behavior="@string/appbar_scrolling_view_behavior"

但是,如果需要,您可以替换hide()并show()执行任何操作.这个是怎么做的详细信息中可以找到这个职位和跟进职位v22.2.1和跟进职位v25.1.0.

请注意,这与设计库的所有滚动行为一样,要求您的视图支持嵌套滚动,目前这种滚动限制为NestedScrollView,RecyclerView - ListView并且ScrollView仅适用于API21 +设备.

Answer 3

如果你没有使用RecycleView(也就是普通的ScrollView),那么这就可以了:

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

别忘了申报:

private int oldScrollYPostion = 0;

在你的课堂里.

Answer 4

app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
app:layout_anchor="@id/recyclerList"
app:layout_anchorGravity="bottom"

这对我来说很有效，FAB 和 RecyclerView 都是协调器上的直接子级。