web-dev-qa-db-ja.com

Googleデザインライブラリを使用して、下にスクロールしてFABボタンを非表示にする方法

Googleはデザインライブラリをリリースしました、私は使用しています

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

ただし、このライブラリの使用方法とスクロール時にFABバーをアニメーション化する方法のコード例を見ることはできません。 ListViewでスクロールイベントをリッスンしてからボタンを自分でアニメーション化できると思いますが、これはAPIに組み込まれていません（このサポートライブラリのポイントではありません）。

この例はありますか？

androidmaterial-designandroid-design-libraryfloating-action-button
38
drlobo

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定数を使用すると、トリガーの感度を調整して、よりスムーズなエクスペリエンスを提供できます。

93
tochkov

コンポーネントをスクロールイベントに反応させるには、カスタム CoordinatorLayout.Behavior を使用するのが最も簡単です。これらは、 onStartNestedScroll（） 。

この FABAwareScrollingViewBehavior にあるスクロール上のFABを非表示および表示する例の動作は、 cheesesquare の上に構築されています。

_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 +デバイスでのみ機能します。

45
ianhanniballake

もしあなたが〜なら ない 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;

あなたのクラスの中。

8
BelfDev

CoordinatorLayoutを使用するのが最善の方法です。リスナーをListViewまたはRecyclerViewにアタッチしたい場合でも、それを行うことができます。もっとカスタマイズできると思います。 gitハブでの私の例を次に示します。

Githubプロジェクト：リストビューでFAB（マテリアルライブラリ）を非表示

enter image description here

2
febaisi

@ianhanniballakeは正常に機能していますが、メソッドonStartNestedScroll()およびonNestedScroll()は廃止されました。更新されたバージョンは次のとおりです。

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(@NonNull CoordinatorLayout coordinatorLayout,
                                       @NonNull View child, @NonNull View directTargetChild,
                                       @NonNull View target, int axes, int type) {
        // Ensure we react to vertical scrolling
        return axes == ViewCompat.SCROLL_AXIS_VERTICAL ||
                super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, axes, type);
    }

    @Override
    public void onNestedPreScroll(@NonNull CoordinatorLayout coordinatorLayout,
                                  @NonNull View child, @NonNull View target, int dx, int dy,
                                  @NonNull int[] consumed, int type) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type);

        if (dy > 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 (dy < 0) {
            // User scrolled up -> show the FAB
            List<View> dependencies = coordinatorLayout.getDependencies(child);
            for (View view : dependencies) {
                if (view instanceof FloatingActionButton) {
                    ((FloatingActionButton) view).show();
                }
            }
        }
    }
}

また、このトピックに関する@ianhanniballakeによる非常に良い投稿があります： CoordinatorLayout Behaviorsですべてを傍受する

2
vovahost
recyclerView.setOnFlingListener(new RecyclerView.OnFlingListener() {
    @Override
    public boolean onFling(int velocityX, int velocityY) {
        if (velocityY < 0)
            mScrollCallbacks.showUI();
            //Code to hide the UI, I have  a custom one that slides down the nav  bar and the fab
        else if (velocityY > 0)
            mScrollCallbacks.hideUI();
            //Code to show the UI

        return false;
    }
});

これは非常にうまくいきます

2
MicroRJ