前言

本篇博客给大家分享一个WebView的使用案例。实现Android调用JavaScript代码来控制白天/夜间模式。

关于WebView怎样使用,官网有非常好的说明,Building Web Apps in WebView,小巫这里就不多赘述。

实现思路

跟Native应用不一样,我们能够非常easy得实现调用系统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;
}
}

终于效果

完整代码

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

转载请注明:IT_xiao小巫

博客地址:http://blog.csdn.net/wwj_748

移动开发狂热者群:299402133

Android记录24-WebView实现白天/夜间阅读模式的更多相关文章

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

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

  2. Android白天/夜间模式Day/Night Mode标准原生SDK实现

     Android白天/夜间模式Day/Night Mode标准原生SDK实现 章节A:Android实现白天/夜间模式主要控制器在于UiModeManager,UiModeManager是Andr ...

  3. Android中使用WebView, WebChromeClient和WebViewClient加载网页 (能够执行js)

    Android中使用WebView, WebChromeClient和WebViewClient加载网页   在android应用中,有时要加载一个网页,如果能配上一个进度条就更好了,而android ...

  4. Android中使用WebView, WebChromeClient和WebViewClient加载网页

    在android应用中,有时要加载一个网页,如果能配上一个进度条就更好了,而android 中提供了其很好的支持, 其中webView的一系列用法,比如 webView.getSettings().s ...

  5. Android 各个版本WebView

    转载请注明出处   http://blog.csdn.net/typename/ powered by miechal zhao : miechalzhao@gmail.com 前言: 根据Googl ...

  6. Android之针对WebView的全屏播放

    转载请标明转载处:http://bbs.csdn.net/topics/390839259 本人刚学android,菜鸟一个,第一次写帖子,最近因为项目要用webview加载html5的视频,开始不能 ...

  7. Android开发之WebView具体解释

    概述: 一个显示网页的视图.这个类是你能够滚动自己的Web浏览器或在你的Activity中简单地显示一些在线内容的基础.它使用了WebKit渲染引擎来显示网页,包含向前和向后导航的方法(通过历史记录) ...

  8. Android应用开发 WebView与服务器端的Js交互

    最近公司再添加功能的时候,有一部分功能是用的html,在一个浏览器或webview中展示出html即可.当然在这里我们当然用webview控件喽 WebApp的好处: 在应用里嵌套web的好处有这么几 ...

  9. Android 各个版本号WebView

    转载请注明出处   http://blog.csdn.net/typename/ powered by miechal zhao : miechalzhao@gmail.com 前言: 依据Googl ...

随机推荐

  1. Python3下基于bs4和sqlalchemy的爬虫实现

    本文来自网易云社区 作者:王贝 小学生现在都在学python了,作为专业程序员当然不能落下了,所以,快马加鞭,周六周末在家学起了python3,python3的基本语法比较简单,相比于Java开发更加 ...

  2. day01_01.了解php

    1.了解PHP 第一个程序 echo 'hello world'; 和python的区别,python是 print (hello world) 并且python结尾没有;2.X版本不需要加括号,但是 ...

  3. TOJ4203: Domino Piece

    4203: Domino Piece  Time Limit(Common/Java):1000MS/3000MS     Memory Limit:65536KByteTotal Submit: 5 ...

  4. 什么是WSDL

    WSDL定义 WSDL(Web Service Description Language) 指网络服务描述语言:是一种用来描述Web服务和说明Web服务通信的XML.WSDL用于描述WebServic ...

  5. tomcat(不仅仅是tomcat)通过熵池解决在linux启动应用慢

    tomcat启动过程中报错 -Jul- ::] org.apache.catalina.startup.HostConfig.deployDirectory Deploying web applica ...

  6. iOS学习笔记39-ReactiveCocoa入门

    FRP,全称为Functional Reactive Programming,是一种响应变化的编程范式,最近几年比较火,大概的理解就像这样: 当a的值或者b的值发生变化时,c的值会自动响应a的值或b的 ...

  7. 从Java源码到Java字节码

    Java最主流的源码编译器,javac,基本上不对代码做优化,只会做少量由Java语言规范要求或推荐的优化:也不做任何混淆,包括名字混淆或控制流混淆这些都不做.这使得javac生成的代码能很好的维持与 ...

  8. 使用android ndk编译boost动态库

    由于以往我写过不少使用boost库开发的项目,而最近准备移植一些代码到android上(上层界面以及jni层我不管,也没研究过,现在只完成代码的移植编译,具体如何调用,由其它人负责),所以先要解决的就 ...

  9. 升级 GCC 支持C++11 或 configure: error: *** A compiler with support for C++11 language features is required.

    configure: error: *** A compiler with support for C++11 language features is required. 参考链接: (1)升级 G ...

  10. Codeforces Gym101606 A.Alien Sunset (2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017))

    2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017) 寒假第一次组队训练赛,和学长一起训练,题目难度是3颗星,我和猪队友写 ...