1. 问题引入：

前面我们是使用方法 降低屏幕亮度（不常用） 和 替换theme，两者都是针对Activity的背景进行白天、夜间模式的交换，但是如果我们显示的是Html的内容，这个时候改怎么办？

分析：首先加载Html页面肯定是要用到WebView的，通过loadUrl的方法可以把html页面显示到webView，我们知道Android可以与JavaScript进行交互，就是说可以在JavaScript中调用Android的代码，也可以在Android中调用JavaScript代码。

所以就有了一个思路就是，通过Android调用Html页面中的JavaScript代码来控制页面背景和字体样式来达到切换白天/黑夜模式。

2. 案例演示：

（1）首先创建一个Android工程如下：

（2）首先我们提供一个Html文件用来测试，为source.html，存放在assets文件夹下：

 <!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布局为：

（3）来到主Activity，如下：

 package com.himi.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/source.html");

     }

     /**

      * 用于控制页面导航

      *

      * @author hebao

      *

      */

 //    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) {

         //Android调用javascript代码

         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;

         }

     }

 }

上面有必要说明一点：

（1）Android读取assets文件目录下的文件：

  • 资源文件 sample.txt 位于 $PROJECT_HOME/assets/ 目录下，可以在 Activity 中通过 Context.getAssets().open("sample.txt") 方法获取输入流。
  • 资源文件 sample.html 位于 $PROJECT_HOME/assets/ 目录下，可以通过以下代码
    WebView.loadUrl("file:///android_asset/sample.html"); 
    加载html文件。

部署程序到手机上，如下：

本文示例代码下载地址：http://download.csdn.net/detail/hebao5201314/9591112

Android 高级UI设计笔记24：Android 夜间模式之 WebView 实现白天 / 夜间阅读模式 （使用JavaScript）的更多相关文章

  1. Android 高级UI设计笔记07：RecyclerView 的详解

    1. 使用RecyclerView       在 Android 应用程序中列表是一个非常重要的控件,适用场合非常多,如新闻列表.应用列表.消息列表等等,但是从Android 一出生到现在并没有非常 ...

  2. Android 高级UI设计笔记23：Android 夜间模式之 两种常用方法（降低屏幕亮度+替换theme）

    1. 夜间模式 所谓的夜间模式,就是能够根据不同的设定,呈现不同风格的界面给用户,而且晚上看着不伤眼睛.特别是一些新闻类App实现夜间模式是非常人性化的,增强用户体验. 2. 我根据网上的资料 以及自 ...

  3. Android 高级UI设计笔记19：PopupWindow使用详解

    1. PopupWindow使用 PopupWindow这个类用来实现一个弹出框,可以使用任意布局的View作为其内容,这个弹出框是悬浮在当前activity之上的. 2. PopupWindow使用 ...

  4. Android 高级UI设计笔记22：Android 指示引导页（带圆点）

    1. 引导页: 我们在安装某个软件首次运行时,大部分都会有一个引导页的提示,介绍软件新功能的加入或者使用说明等,支持滑动且下面会有几个圆点,显示共有多少页和当前图片的位置,类似如下效果: 2. 引导页 ...

  5. Android 高级UI设计笔记20：RecyclerView 的详解之RecyclerView添加Item点击事件

    1. 引言: RecyclerView侧重的是布局的灵活性,虽说可以替代ListView但是连基本的点击事件都没有,这篇文章就来详细讲解如何为RecyclerView的item添加点击事件,顺便复习一 ...

  6. Android 高级UI设计笔记15：HorizontalScrollView之 实现画廊式图片浏览器

    1. HorizontalScrollView 本来,画廊式的图片浏览器,使用Android中的Gallery就能轻松完成,但是Google说Gallery每次切换图片时都要新建视图,造成太多的资源浪 ...

  7. Android 高级UI设计笔记11：Gallery（画廊控件）之Gallery基本使用

    1. 这里要向大家介绍Android控件Gallery(画廊控件) Gallery控件主要用于横向显示图像列表,不过按常规做法.Gallery组件只能有限地显示指定的图像.也就是说,如果为Galler ...

  8. Android 高级UI设计笔记03：使用ListView实现左右滑动删除Item

    1. 这里就是实现一个很简单的功能,使用ListView实现左右滑动删除Item: (1)当我们在ListView的某个Item,向左滑动显示一个删除按钮,用户点击按钮,即可以删除该项item,并且有 ...

  9. Android 高级UI设计笔记06：仿微信图片选择器（转载）

    仿微信图片选择器: 一.项目整体分析: 1. Android加载图片的3个目标: (1)尽可能的去避免内存溢出. a. 根据图片的显示大小去压缩图片 b. 使用缓存对我们图片进行管理(LruCache ...

随机推荐

  1. Python__函数和代码复用

    主要内容 函数的定义和使用 实例:七段数码管的绘制 代码复用与函数递归 PyInstall库的使用 实例:科赫雪花小包裹 函数的定义与使用 函数的理解与定义 函数的使用及调用过程 函数的参数传递 函数 ...

  2. 通向全栈之路——（3）node环境搭建

    1:更新系统 sudo apt-get update2:安装相关软件 sudo apt-get install vim openssl build-essential libssl-dev wget ...

  3. EnyimMemcached（64位）使用实例

    1.安装:http://www.cnblogs.com/dudu/archive/2009/07/19/1526669.html 2.使用 using Enyim.Caching.Configurat ...

  4. GC详解及Minor GC和Full GC触发条件总结

    GC,即就是Java垃圾回收机制.目前主流的JVM(HotSpot)采用的是分代收集算法.与C++不同的是,Java采用的是类似于树形结构的可达性分析法来判断对象是否还存在引用.即:从gcroot开始 ...

  5. tcpcopy架构

    tcpCopy 1.0 的最新架构分为三个角色: Online Server(OS):上面要部署 TCPCopy,从数据链路层(pcap 接口)抓请求数据包,发包是从IP层发出去: Test Serv ...

  6. 使用dom4j处理xml操作xml数据

    使用dom4j处理xml操作xml数据 示例代码: public class TestDom4j { public static void main(String[] args) { String x ...

  7. BZOJ4675: 点对游戏

    传送门 考虑每一对幸运点对的贡献,假设有 \(v\) 对 一共可以选择 \(x\) 个点,总共 \(n\) 个点 那么答案就是 \[v\times\frac{A_{n-2}^{x-2}x(x-1)}{ ...

  8. DNS必知必会

    什么是DNS? DNS服务器(Domain Name Server,域名服务器)是进行域名和与之相对应的IP地址进行转换的服务器. 基本概念 DNS服务器中保存了一张域名和与之相对应的IP地址 的表, ...

  9. 区别String、StringBuilder、Stringbuffer的总结

    1.三者在执行速度上: StringBuilder > StringBuffer > String 2. String:不可变长字符串 StringBuilder : 为可变长字符串 St ...

  10. 自己编写jQuery插件 之 无缝滚动

    一. 效果图 二. Html骨架结构 <div class="box"> <ul> <li>1</li> <li>2&l ...