Android记录24-WebView实现白天/夜间阅读模式
2015-04-01 17:53
489 查看
前言
本篇博客给大家分享一个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; } }
最终效果
完整代码
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实现白天/夜间阅读模式
- Android 高级UI设计笔记24:Android 夜间模式之 WebView 实现白天 / 夜间阅读模式 (使用JavaScript)
- Android Webview 通过反射实现夜间模式
- 通过css注入实现的android webview的夜间模式
- Android记录25-WebView实现离线缓存阅读
- android webView使用js/css实现夜间模式 长按识别图片以及二维码,网页可以上传图片
- Android记录25-WebView实现离线缓存阅读
- Android白天/夜间模式Day/Night Mode标准原生SDK实现
- Android webview设置字体大小,适配屏幕,夜间模式
- Android APP以及webview夜间模式的浅析
- Android夜间模式实现,通过在window上加一层半透明的View
- Android之 用MVP模式 来实现webview 历史记录保存与显示
- android webview夜间模式javascript代码
- Android白天/夜间模式Day/Night Mode标准原生SDK实现
- Android之 -WebView实现离线缓存阅读
- 通过WebView向html页面注入js代码,实现WebView切换白昼模式/夜间模式
- Android白天/夜间模式Day/Night Mode标准原生SDK实现
- 三行Android代码实现白天夜间模式流畅切换
- Android WindowManager的使用 & 添加 遮罩层 实现夜间模式
- android webview 实现放大缩小 隐藏控件问题