热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Android高级UI设计笔记24:Android夜间模式之WebView实现白天/夜间阅读模式(使用JavaScript)

1.问题引入:前面我们是使用方法降低屏幕亮度(不常用)和替换theme,两者都是针对Activity的背景进行白天、夜间模式的交换,但是如果我们显示的是Html的内容,这个时候改怎么办?

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文件夹下

 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";>
 2 <html>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <script language=Javascript>
 5 function load_night()  6 {  7     
 8  document.bgColor="#000000"
 9     var fontColor = document.getElementById("font"); 10     if (!fontColor) { 11     return; 12  } 13  fontColor.style.color="white"
14 } 15 script>
16 
17 <script language="Javascript">
18     function load_day(){ 19  document.bgColor="#ffffff"
20         var fontColor = document.getElementById("font"); 21     if (!fontColor) { 22         return; 23  } 24  fontColor.style.color="black"
25  } 26 script>
27 <head>
28 <title>webView测试夜间模式title>
29 head>
30 
31 <body LEFTMARGIN="10" VLINK="#8000FF" BGCOLOR="#FFFFFF" ALINK="#FF0000" LINK="#0000FF"
32 TOPMARGIN="10" TEXT="#666666">
33     <div id="font">问世间情为何物,直教人生死相许div>
34     br>
35     <button type="button" onClick="load_night()">夜间模式button>
36     <button type="button" onClick="load_day()">白天模式button>
37 body>
38 html>

这个Html布局为:

 

 

(3)来到主Activity,如下:

 1 package com.himi.webview;  2 
 3 import android.app.Activity;  4 import android.content.Intent;  5 import android.net.Uri;  6 import android.os.Bundle;  7 import android.view.KeyEvent;  8 import android.view.View;  9 import android.view.View.OnClickListener; 10 import android.webkit.WebSettings; 11 import android.webkit.WebView; 12 import android.webkit.WebViewClient; 13 import android.widget.Button; 14 
15 public class MainActivity extends Activity implements OnClickListener { 16 
17     private WebView webView; 18     private Button nightModeBtn; 19     private Button lightModeBtn; 20 
21  @Override 22     protected void onCreate(Bundle savedInstanceState) { 23         super.onCreate(savedInstanceState); 24  setContentView(R.layout.activity_main); 25 
26         webView = (WebView) this.findViewById(R.id.webview); 27         nightModeBtn = (Button) this.findViewById(R.id.btn_nightmode); 28         lightModeBtn = (Button) this.findViewById(R.id.btn_lightmode); 29 
30         nightModeBtn.setOnClickListener(this); 31         lightModeBtn.setOnClickListener(this); 32 
33         // webView.loadUrl("http://www.baidu.com");
34 
35         WebSettings settings = webView.getSettings(); 36         // 设置Javascript可用
37         settings.setJavascriptEnabled(true); 38         
39         // 绑定Javascript接口,可以实现在Javascript中调用我们的Android代码 40         // webView.addJavascriptInterface(new WebAppInterface(this), "Android"); 41         // webView.setWebViewClient(new MyWebViewClient()); 42 
43         // 加载assets目录下的html页面
44         webView.loadUrl("file:///android_asset/source.html"); 45 
46  } 47 
48     /**
49  * 用于控制页面导航 50  * 51  * @author hebao 52  * 53      */
54 // private class MyWebViewClient extends WebViewClient { 55 // /** 56 // * 当用于点击链接,系统调用这个方法 57 // */ 58 // @Override 59 // public boolean shouldOverrideUrlLoading(WebView view, String url) { 60 // if (Uri.parse(url).getHost().equals("www.baidu.com")) { 61 //                // 这个是我的网页,所以不要覆盖,让我的WebView来加载页面 62 // return false; 63 // } 64 //            // 否则,这个链接不是我的网站页面,因此启用浏览器来处理urls 65 // Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); 66 // startActivity(intent); 67 // return true; 68 // } 69 // }
70 
71  @Override 72     public boolean onKeyDown(int keyCode, KeyEvent event) { 73         // 检查是否为返回事件,如果有网页历史记录
74         if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) { 75  webView.goBack(); 76             return true; 77  } 78         // 如果不是返回键或没有网页浏览历史,保持默认 79         // 系统行为(可能会退出该活动)
80         return super.onKeyDown(keyCode, event); 81  } 82 
83  @Override 84     public void onClick(View v) { 85         //Android调用Javascript代码
86         switch (v.getId()) { 87         case R.id.btn_nightmode: 88             webView.loadUrl("Javascript:load_night()"); 89             break; 90         case R.id.btn_lightmode: 91             webView.loadUrl("Javascript:load_day()"); 92             break; 93 
94         default: 95             break; 96  } 97  } 98 }

上面有必要说明一点:

(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

 


推荐阅读
  • 开发软件:Dreamweaver语言:JavaScript在开始学习JavaScript代码编写的时候,会发现我们程序编写的正确ÿ ... [详细]
  • 移动端常用单位——rem的使用方法和注意事项
    本文介绍了移动端常用的单位rem的使用方法和注意事项,包括px、%、em、vw、vh等其他常用单位的比较。同时还介绍了如何通过JS获取视口宽度并动态调整rem的值,以适应不同设备的屏幕大小。此外,还提到了rem目前在移动端的主流地位。 ... [详细]
  • SpringMVC接收请求参数的方式总结
    本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
  • 如何在HTML中获取鼠标的当前位置
    本文介绍了在HTML中获取鼠标当前位置的三种方法,分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]
  • JS实现一键分享功能
    本文介绍了如何使用JS实现一键分享功能,并提供了2019独角兽企业招聘Python工程师的标准。同时,给出了分享到QQ空间、新浪微博和人人网的链接。 ... [详细]
  • 前言对于从事技术的人员来说ajax是这好东西,都会使用,而且乐于使用。但对于新手,开发一个ajax实例,还有是难度的,必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ... [详细]
  • 表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ... [详细]
  • Iwouldliketobeabletohaveasidebarthatcanbetoggledinandoutonabuttonpress.However ... [详细]
  • 在JavaScript中,函数没有重载的概念,如果声明了多个重名的函数,不管函数的形参个数是否一样,只有最后一个有效。如果调用函数时传入的参数个数与函数定义时的参数个数不符,会出现不同的情况。函数调用时,传入的参数个数少于函数定义时的参数个数,未传入的参数会被当做undefined处理,可能会导致错误。而传入的参数个数多于函数定义时的参数个数,多余的参数不会被使用,但不会报错。 ... [详细]
  • 从Oracle安全移植到国产达梦数据库的DBA实践与攻略
    随着我国对信息安全和自主可控技术的重视,国产数据库在党政机关、军队和大型央企等行业中得到了快速应用。本文介绍了如何降低从Oracle到国产达梦数据库的技术门槛,保障用户现有业务系统投资。具体包括分析待移植系统、确定移植对象、数据迁移、PL/SQL移植、校验移植结果以及应用系统的测试和优化等步骤。同时提供了移植攻略,包括待移植系统分析和准备移植环境的方法。通过本文的实践与攻略,DBA可以更好地完成Oracle安全移植到国产达梦数据库的工作。 ... [详细]
  • JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ... [详细]
  • 本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ... [详细]
  • 安卓端开源移动浏览器开源项目
    进入android开发以来,webview用的比较多,后来又看了一些基于webview的浏览器代码,慢慢的将积累的东西做成了一个安卓移动浏 ... [详细]
  • 资源:吊炸天!74款APP完整源码!android界面中点击输入框时弹出输入法如果输入框在底部会出现输入法遮挡输入内容的问题解决办法设置activity的windowsoftinpu ... [详细]
  • 篇首语:本文由编程笔记#小编为大家整理,主要介绍了预加载多个本地WebView相关的知识,希望对你有一定的参考价值。 ... [详细]
author-avatar
2012hellen_887
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有