如何监听webview的滚动事件

使用场景

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

device-2015-07-16-105825.mp4_1437016073.gif

当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. 如果我们想在底部再加一个普通布局的菜单栏,也想在滚动的时候退出,貌似是没法实现的。