欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 运维知识 > Android >内容正文

Android

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

发布时间：2025/4/5 Android 42 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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代码

@Overridepublic 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;@Overrideprotected 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 {/*** 当用于点击链接，系统调用这种方法*/@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {if (Uri.parse(url).getHost().equals("www.baidu.com")) {// 这个是我的网页。所以不要覆盖。让我的WebView来载入页面return false;}// 否则，这个链接不是我的站点页面。因此启用浏览器来处理urlsIntent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));startActivity(intent);return true;}}@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {// 检查是否为返回事件，假设有网页历史记录if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {webView.goBack();return true;}// 假设不是返回键或没有网页浏览历史，保持默认// 系统行为（可能会退出该活动）return super.onKeyDown(keyCode, event);}@Overridepublic 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

转载于:https://www.cnblogs.com/clnchanpin/p/7221196.html

总结

以上是生活随笔为你收集整理的Android记录24-WebView实现白天/夜间阅读模式的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。