Android记录24-WebView实现白天/夜间阅读模式

卧疾丰暇豫,翰墨时间作。这篇文章主要讲述Android记录24-WebView实现白天/夜间阅读模式相关的知识,希望能为你提供帮助。
前言
本篇博客给大家分享一个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; } }

终于效果
Android记录24-WebView实现白天/夜间阅读模式

文章图片

Android记录24-WebView实现白天/夜间阅读模式

文章图片

完整代码
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
【Android记录24-WebView实现白天/夜间阅读模式】转载请注明:IT_xiao小巫
博客地址:http://blog.csdn.net/wwj_748
移动开发狂热者群:299402133



    推荐阅读