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

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

范例

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

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

   <uses-permission android:name="android.permission.INTERNET" />
   

3. 自定义一个 WebView 类 MsWebView.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