Android WebView 简单的浏览器

经过上一章节在 WebView 实现了回到顶部的效果,这次我们就来实现一个当前很流行的内嵌浏览器的效果

左上角一个点击关闭当前 Activity 的按钮,中间是新闻的 title,右面是一个刷新按钮, 而在右下角可能有这样一个悬浮的按钮,当我们滑动了一段距离时它就会显示出来, 当用户点击后又会回滚到网页的顶部

范例


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

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

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

    package cn.twle.android.webviewbrowser;
    
    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 添加一个 MsWebView

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <RelativeLayout
            android:id="@+id/topbar"
            android:gravity="center_vertical"
            android:layout_width="match_parent"
            android:layout_height="44dp"
            android:orientation="horizontal" >
    
            <Button android:id="@+id/btn_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="返回" />
    
            <TextView android:id="@+id/tv_title"
                android:layout_centerVertical="true"
                android:layout_centerHorizontal="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="" />
    
            <Button android:id="@+id/btn_refresh"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@id/btn_share"
                android:text="刷新" />
    
            <Button android:id="@+id/btn_share"
                android:layout_alignParentRight="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="分享" />
    
        </RelativeLayout>
    
        <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:visibility="gone"
            android:text="回到\n顶部" />
    
        <cn.twle.android.webviewbrowser.MsWebView
            android:id="@+id/ms_webview"
            android:layout_marginTop="44dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </RelativeLayout>
    
  5. 修改 MainActivity.java

    package cn.twle.android.webviewbrowser;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.webkit.WebChromeClient;
    import android.webkit.WebSettings;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;
    import android.widget.Button;
    import android.widget.TextView;
    import android.widget.Toast;
    
    public class MainActivity extends Activity implements  View.OnClickListener {
    
        private MsWebView ms_webview;
        private Button btn_gototop;
        private long exitTime = 0;
        private Button btn_back;
        private Button btn_share;
        private TextView tv_title;
        private Button btn_refresh;
        private String ms_title = "";
    
        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_share   = (Button) findViewById(R.id.btn_share);
            btn_gototop = (Button) findViewById(R.id.btn_gototop);
            btn_back    = (Button) findViewById(R.id.btn_back);
            btn_refresh = (Button) findViewById(R.id.btn_refresh);
            tv_title    = (TextView) findViewById(R.id.tv_title);
            ms_webview = (MsWebView) findViewById(R.id.ms_webview);
    
            btn_refresh.setOnClickListener(this);
            btn_back.setOnClickListener(this);
            btn_gototop.setOnClickListener(this);
            btn_share.setOnClickListener(this);
    
            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) {
                        tv_title.setText(ms_title);
                        btn_gototop.setVisibility(View.VISIBLE);
                    } else {
                        btn_gototop.setVisibility(View.GONE);
                        tv_title.setText("");
                    }
                }
            });
    
            ms_webview.setWebChromeClient(new WebChromeClient() {
                //这里设置获取到的网站title
                @Override
                public void onReceivedTitle(WebView view, String title) {
                    super.onReceivedTitle(view, title);
                    ms_title = title;
                }
            });
    
            ms_webview.loadUrl(SITE_URL);
    
        }
    
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.btn_share:
                    Toast.makeText(MainActivity.this,"你点击了分享按钮",Toast.LENGTH_SHORT).show();
                    break;
                case R.id.btn_back:
                    ms_webview.goBack();
                    break;
                case R.id.btn_refresh:
                    ms_webview.reload();    //刷新当前页面
                    break;
                case R.id.btn_gototop:
    
                    //滚动到顶部
                    ms_webview.setScrollY(0);
                    btn_gototop.setVisibility(View.GONE);
                    break;
            }
        }
    
        @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.