如何监听webview的滚动事件

使用场景

有些时候我们需要监听webview的滚动事件，比如我们想实现如下场景：

当webviw内容滚动一定距离之后（这个具体不宜太大），toolbar和浮动操作按钮动画消失。

要实现这样的效果，首先得监听webview的滚动事件，至少需要获得两个方面的信息：

1. 滚动的偏移量

2. 滚动的方向

但是WebView并没有对外提供一个类似于setOnScrollChangedListener之类的监听者，只有一个如下的protected方法：

protected void onScrollChanged(final int l, final int t, final int oldl,
                               final int oldt) {

因此，我们需要自己写一个继承webview的类，重写这个方法，并对外提供一个接口。

自定义WebView

package com.jcodecraeer.mobile.view;
import android.content.Context;
import android.util.AttributeSet;
import android.webkit.WebView;
/**
 * Created by jianghejie on 15/7/16.
 */
public class ObservableWebView extends WebView {
    private OnScrollChangedCallback mOnScrollChangedCallback;
    public ObservableWebView(final Context context) {
        super(context);
    }
    public ObservableWebView(final Context context, final AttributeSet attrs) {
        super(context, attrs);
    }
    public ObservableWebView(final Context context, final AttributeSet attrs,
                             final int defStyle) {
        super(context, attrs, defStyle);
    }
    @Override
    protected void onScrollChanged(final int l, final int t, final int oldl,
                                   final int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mOnScrollChangedCallback != null) {
            mOnScrollChangedCallback.onScroll(l - oldl, t - oldt);
        }
    }
    public OnScrollChangedCallback getOnScrollChangedCallback() {
        return mOnScrollChangedCallback;
    }
    public void setOnScrollChangedCallback(
            final OnScrollChangedCallback onScrollChangedCallback) {
        mOnScrollChangedCallback = onScrollChangedCallback;
    }
    /**
     * Impliment in the activity/fragment/view that you want to listen to the webview
     */
    public static interface OnScrollChangedCallback {
        public void onScroll(int dx, int dy);
    }
}

这里我们定义了一个OnScrollChangedCallback接口，其中dx和dy分别是滚动的时候，x和y方向上的偏移量。

这个偏移量是根据onScrollChanged方法的四个参数计算出来的：

mOnScrollChangedCallback.onScroll(l - oldl, t - oldt);

现在一个对外提供了滚动参数的自定义webview就写好了，让我们看看如何在外部使用：

wv = (ObservableWebView) findViewById(R.id.scorllableWebview);
wv.setOnScrollChangedCallback(new OnScrollChangedCallback(){
    public void onScroll(int dx, int dy){
      //这里我们根据dx和dy参数做自己想做的事情
    }
 });

当然，你可能会说，为什么不直接把onScrollChanged的四个参数直接暴露出来呢，其实那样也是可以的，只是在我们项目中，dx和dy会更好用，所以我就这样做了。暴露什么数据出来完全取决于你自己。

思考

你可能会问，以上场景的实现完全可以用最新的CoordinatorLayout＋NestedScrollView包裹WebView来实现嘛，为什么还要自己手动实现。

错了！

1. CoordinatorLayout的方式中，顶部toolbar退出是没有动画效果的，NestedScrollView只有一开始滚动立马就随着移动。

2. 如果我们想在底部再加一个普通布局的菜单栏，也想在滚动的时候退出，貌似是没法实现的。