您的位置：首页 > 移动开发

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

2016-07-31 16:28 881 查看

1. 问题引入：

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

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

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

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/ 目录下，可以通过以下代码
[b]WebView.loadUrl("file:///android_asset/sample.html");
加载html文件。[/b]

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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