Android WebView 滚动监听(回到顶部)

Android WebView 并没有提供公开的方法或者设置让我们对网页的滚动进行监听,而我们翻看了 WebView 的源码,还是发现了一个函数

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

四个参数分别对应当前水平和垂直滚动的距离和上一次水平和垂直滚动的距离

如果我们要实现滚动监听或者实现返回顶部,那么就要重写这个方法

范例


  1. 创建一个 空的 Android 项目 cn.twle.android.WebViewScrollby

  2. 修改 AndroidManifest.xml 添加网络权限

    <uses-permission android:name="android.permission.INTERNET" />
    
  3. 自定义一个 WebViewMsWebView.java

    package cn.twle.android.webviewscrollby;
    
    import android.content.Context;
    import android.util.AttributeSet;
    import android.webkit.WebView;
    
    public class MsWebView extends WebView {
    
        private OnScrollChangedCallback mOnScrollChangedCallback;
    
        public MsWebView(Context context) {
            super(context);
        }
    
        public MsWebView(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public MsWebView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        @Override
        protected void onScrollChanged(int l, int t, int oldl, 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;
        }
    
        public static interface OnScrollChangedCallback {
            public void onScroll(int dx, int dy);
        }
    
    }
    
  4. 修改 activity_main.xml 添加一个 WebView

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <Button android:id="@+id/btn_gototop"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="回到\n顶部" />
    
        <cn.twle.android.webviewscrollby.MsWebView
            android:id="@+id/ms_webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </RelativeLayout>
    
  5. 修改 MainActivity.java

    package cn.twle.android.webviewscrollby;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    import android.webkit.WebSettings;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;
    import android.widget.Button;
    import android.widget.Toast;
    
    public class MainActivity extends AppCompatActivity {
    
        private MsWebView ms_webview;
        private Button btn_gototop;
        private long exitTime = 0;
    
        private static final String SITE_URL = "https://www.twle.cn";
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            btn_gototop = (Button) findViewById(R.id.btn_gototop);
            ms_webview = (MsWebView) findViewById(R.id.ms_webview);
    
            WebSettings webSettings = ms_webview.getSettings();
            webSettings.setJavaScriptEnabled(true);
            webSettings.setDefaultTextEncodingName("UTF-8");
    
            ms_webview.setWebViewClient(new WebViewClient() {
                //webview里打开新链接
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    ms_webview.loadUrl(url);
                    return true;
                }
            });
    
            //比如这里做一个简单的判断,当页面发生滚动,显示那个 Button
            ms_webview.setOnScrollChangedCallback(new MsWebView.OnScrollChangedCallback() {
                @Override
                public void onScroll(int dx, int dy) {
                    if (ms_webview.getScrollY() > 0) {
                        btn_gototop.setVisibility(View.VISIBLE);
                    } else {
                        btn_gototop.setVisibility(View.GONE);
                    }
                }
            });
    
            btn_gototop.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    ms_webview.setScrollY(0);
                    btn_gototop.setVisibility(View.GONE);
                }
            });
    
            ms_webview.loadUrl(SITE_URL);
        }
    
        @Override
        public void onBackPressed() {
            if (ms_webview.canGoBack()) {
                ms_webview.goBack();
            } else {
                if ((System.currentTimeMillis() - exitTime) > 2000) {
                    Toast.makeText(getApplicationContext(), "再按一次退出程序",
                            Toast.LENGTH_SHORT).show();
                    exitTime = System.currentTimeMillis();
                } else {
                    finish();
                }
    
            }
        }
    }
    

参考文档

  1. 官方文档: WebView

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.