FloatingActionButtonをスクロール中に消す

NestedScrollViewを下にスクロールしている間は, FloatingActionButtonを表示させないようにする. 少し変えれば, RecyclerView等の他のScrollViewにも使えそう(未確認). 下に実際の挙動を示した.

目次

方法

縦スクロールする場合に対してのみ有効にする.

現在のFloatingActionButtonのアニメーション状態を4つ, スクロールの状態を5つで管理する.

スクロール時のアニメーションを設定する

停止時のアニメーションを設定する

FloatingActionButtonのbehaviorを設定する

コード全文

参考にしたサイト

方法

縦スクロールする場合に対してのみ有効にする.





現在のFloatingActionButtonのアニメーション状態を4つ, スクロールの状態を5つで管理する.


FloatingActionButtonが消えている間は, 押しても反応しないようにする. ここのアニメーションはListenerに, AnimatorListenerAdapterか Animator.AnimatorListenerのインスタンスを代入できればよく, もっと複雑にできるかもしれない. また, アニメーションの時間はそこまで長くしないほうが良い.

現在のスクロール状態(scrollingState)と, (状態が変わる)1つ前のスクロール状態(preScrollingState)を保持しておく. 実際の状態管理については, 最後のコード全文を参照


スクロール時のアニメーションを設定する

下にスクロールまたは, フリック(以降, スクロールに含める)したときに, FloatingActionButtonを消す. また, FloatingActionButtonが消失している場合, 上にスクロールしたとき再表示する. 4行目から7行目, 23行目から26行目では, 一番下までスクロールしたらFloatingActionButtonが消えないようにしている(下のコードでは, 見やすさのためにスクロール状態の管理を省いている).


停止時のアニメーションを設定する

FloatingActionButtonが消失している場合, 放置していると再表示する.
上のコードで, 9行目から13行目までは, 以下のような挙動を抑えるために記述している.




すなわち, スクロール(フリックは含めない)後, フリックすると, イベントとしては, onNestedPreScroll -> onStopNestedScroll -> onNestedPreFlingScroll (コードに関係しないイベントは除く)と, onStopNestedScrollが途中で呼ばれてしまい, 何もしないとここで, 一回FloatingActionButtonが消える.

また, 15行目から22行目では, 200(=duration)ms未満の下スクロールを行うと, onStopNestedScrollが呼ばれたときに, stateがSTATE.VANISHINGのままで, 該当箇所を抜くと, FloatingActionButtonが消えたままとなる(下のgif参照)ので, これを回避するために, そうなったときに, 400(=delayDuration)ms後, FloatingActionButtonを再表示させている.


放置しているときに, FloatingActionButtonを再表示させたくない場合は, onStopNestedScrollをオーバーライドしなければよい.



FloatingActionButtonのbehaviorを設定する

MainActivityのOnCreateで次のようにすればよい.

コード全文

コード全文を掲載する

VanishFloatingActionButtonBehavior.java

MainActivity.java

参考にしたサイト

Rolling FloatingActionButton Behavior – Nikola Despotoski – Medium

FloatingActionButton.Behavior を使って、画面のスクロールに合わせて FloatingActionButton を隠したり出したりするやつ - 質量