Android记录24-WebView实现白天/夜间阅读模式

不念不忘少年蓝@ 2022-08-07 10:55 247阅读 0赞

### 前言 ###

本篇博客给大家分享一个WebView的使用案例，实现Android调用JavaScript代码来控制白天/夜间模式。关于WebView如何使用，官网有很好的说明，[Building Web Apps in WebView][]，小巫这里就不多赘述。

### 实现思路 ###

跟Native应用不一样，我们可以很简单得实现调用系统API来达到，就是通过样式设置主题。如果我们的内容是html里面的内容，如何来达到？首先加载html页面肯定是要用到WebView的，通过loadUrl的方法可以把html页面显示到webView，我们知道Android可以与JavaScript进行交互，就是说可以在JavaScript中调用Android的代码，也可以在Android中调用JavaScript代码，所以就有了一个思路就是，**通过Android调用Html页面中的JavaScript代码来控制页面背景和字体样式来达到切换白天/黑夜模式**。

### 如何实现 ###

#### 提供一个供测试的html代码 ####

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";>
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language=javascript> function load_night() { document.bgColor="#000000" var fontColor = document.getElementById("font"); if (!fontColor) { return; } fontColor.style.color="white" } </script>
    
    <script language="javascript"> function load_day(){ document.bgColor="#ffffff" var fontColor = document.getElementById("font"); if (!fontColor) { return; } fontColor.style.color="black" } </script>
    <head>
    <title>webView测试夜间模式</title>
    </head>
    
    <body LEFTMARGIN="10" VLINK="#8000FF" BGCOLOR="#FFFFFF" ALINK="#FF0000" LINK="#0000FF" TOPMARGIN="10" TEXT="#666666">
        <div id="font">小巫见大巫，小巫见大巫</div>
        </br>
        <button type="button" onClick="load_night()">夜间模式</button>
        <button type="button" onClick="load_day()">白天模式</button>
    </body>
    </html>

#### 加载html页面 ####

WebSettings settings = webView.getSettings();
    // 设置javaScript可用
    settings.setJavaScriptEnabled(true);
    webView.loadUrl("file:///android_asset/01.html");

#### Android调用javascript代码 ####

@Override
        public void onClick(View v) {
            switch (v.getId()) {
            case R.id.btn_nightmode:
                webView.loadUrl("javascript:load_night()");
                break;
            case R.id.btn_lightmode:
                webView.loadUrl("javascript:load_day()");
                break;
    
            default:
                break;
            }
        }

#### 最终效果 ####

![图片名称][20150401174607168]

![图片名称][20150401175048483]

### 完整代码 ###

package com.infzm.webview;
    
    import android.app.Activity;
    import android.content.Intent;
    import android.net.Uri;
    import android.os.Bundle;
    import android.view.KeyEvent;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.webkit.WebSettings;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;
    import android.widget.Button;
    
    public class MainActivity extends Activity implements OnClickListener{ 
    
        private WebView webView;
        private Button nightModeBtn;
        private Button lightModeBtn;
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            webView = (WebView) this.findViewById(R.id.webview);
            nightModeBtn = (Button) this.findViewById(R.id.btn_nightmode);
            lightModeBtn = (Button) this.findViewById(R.id.btn_lightmode);
    
            nightModeBtn.setOnClickListener(this);
            lightModeBtn.setOnClickListener(this);
    
    
    // webView.loadUrl("http://www.baidu.com");
    
    
            WebSettings settings = webView.getSettings();
            // 设置javaScript可用
            settings.setJavaScriptEnabled(true);
            // 绑定javaScript接口，可以实现在javaScript中调用我们的Android代码
    // webView.addJavascriptInterface(new WebAppInterface(this), "Android");
    // webView.setWebViewClient(new MyWebViewClient());
    
    
            // 加载assets目录下的html页面
            webView.loadUrl("file:///android_asset/01.html");
    
        }
    
        /** * 用于控制页面导航 * @author wwj_748 * */
        private class MyWebViewClient extends WebViewClient { 
            /** * 当用于点击链接，系统调用这个方法 */
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (Uri.parse(url).getHost().equals("www.baidu.com")) {
                    // 这个是我的网页，所以不要覆盖，让我的WebView来加载页面
                    return false;
                }
                // 否则，这个链接不是我的网站页面，因此启用浏览器来处理urls
                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                startActivity(intent);
                return true;
            }
        }
    
    
    
        @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
            // 检查是否为返回事件，如果有网页历史记录
            if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
                webView.goBack();
                return true;
            }
            // 如果不是返回键或没有网页浏览历史，保持默认
            // 系统行为（可能会退出该活动）
            return super.onKeyDown(keyCode, event);
        }
    
    
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
            case R.id.btn_nightmode:
                webView.loadUrl("javascript:load_night()");
                break;
            case R.id.btn_lightmode:
                webView.loadUrl("javascript:load_day()");
                break;
    
            default:
                break;
            }
        }
    }

#### 下载地址 ####

[http://download.csdn.net/detail/wwj\_748/8554833][http_download.csdn.net_detail_wwj_748_8554833]

> 转载请注明：IT\_xiao小巫  
> 博客地址：[http://blog.csdn.net/wwj\_748][http_blog.csdn.net_wwj_748]  
> 移动开发狂热者群：299402133

[Building Web Apps in WebView]: http://developer.android.com/guide/webapps/webview.html#HandlingNavigation
[20150401174607168]: /images/20220805/b1a2ad109a714fe2b442b4ebcf2eb11e.png
[20150401175048483]: /images/20220805/ec0b93f3fba04d958b3c8b3597cc1120.png
[http_download.csdn.net_detail_wwj_748_8554833]: http://download.csdn.net/detail/wwj_748/8554833
[http_blog.csdn.net_wwj_748]: http://blog.csdn.net/wwj_748