Android 高級UI設計筆記24：Android 夜間模式之 WebView 實現白天 / 夜間閱讀模式（使用JavaScript）

時間 2019-12-12

標籤 android 高級設計筆記夜間模式 webview 實現白天閱讀使用 javascript 欄目 Android 简体版

原文原文鏈接

1. 問題引入：javascript

前面咱們是使用方法下降屏幕亮度（不經常使用）和替換theme，二者都是針對Activity的背景進行白天、夜間模式的交換，可是若是咱們顯示的是Html的內容，這個時候改怎麼辦？html

分析：首先加載Html頁面確定是要用到WebView的，經過loadUrl的方法能夠把html頁面顯示到webView，咱們知道Android能夠與JavaScript進行交互，就是說能夠在JavaScript中調用Android的代碼，也能夠在Android中調用JavaScript代碼。java

因此就有了一個思路就是，經過Android調用Html頁面中的JavaScript代碼來控制頁面背景和字體樣式來達到切換白天/黑夜模式。android

2. 案例演示：web

（1）首先建立一個Android工程以下：瀏覽器

（2）首先咱們提供一個Html文件用來測試，爲source.html，存放在assets文件夾下：app

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";>
 2 <html>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <script language=javascript>
 5 function load_night()  6 {  7     
 8  document.bgColor="#000000"
 9     var fontColor = document.getElementById("font"); 10     if (!fontColor) { 11     return; 12  } 13  fontColor.style.color="white"
14 } 15 </script>
16 
17 <script language="javascript">
18     function load_day(){ 19  document.bgColor="#ffffff"
20         var fontColor = document.getElementById("font"); 21     if (!fontColor) { 22         return; 23  } 24  fontColor.style.color="black"
25  } 26 </script>
27 <head>
28 <title>webView測試夜間模式</title>
29 </head>
30 
31 <body LEFTMARGIN="10" VLINK="#8000FF" BGCOLOR="#FFFFFF" ALINK="#FF0000" LINK="#0000FF"
32 TOPMARGIN="10" TEXT="#666666">
33     <div id="font">問世間情爲什麼物，直教人生死相許</div>
34     </br>
35     <button type="button" onClick="load_night()">夜間模式</button>
36     <button type="button" onClick="load_day()">白天模式</button>
37 </body>
38 </html>

這個Html佈局爲：ide

（3）來到主Activity，以下：佈局

 1 package com.himi.webview;  2 
 3 import android.app.Activity;  4 import android.content.Intent;  5 import android.net.Uri;  6 import android.os.Bundle;  7 import android.view.KeyEvent;  8 import android.view.View;  9 import android.view.View.OnClickListener; 10 import android.webkit.WebSettings; 11 import android.webkit.WebView; 12 import android.webkit.WebViewClient; 13 import android.widget.Button; 14 
15 public class MainActivity extends Activity implements OnClickListener { 16 
17     private WebView webView; 18     private Button nightModeBtn; 19     private Button lightModeBtn; 20 
21  @Override 22     protected void onCreate(Bundle savedInstanceState) { 23         super.onCreate(savedInstanceState); 24  setContentView(R.layout.activity_main); 25 
26         webView = (WebView) this.findViewById(R.id.webview); 27         nightModeBtn = (Button) this.findViewById(R.id.btn_nightmode); 28         lightModeBtn = (Button) this.findViewById(R.id.btn_lightmode); 29 
30         nightModeBtn.setOnClickListener(this); 31         lightModeBtn.setOnClickListener(this); 32 
33         // webView.loadUrl("http://www.baidu.com");
34 
35         WebSettings settings = webView.getSettings(); 36         // 設置javaScript可用
37         settings.setJavaScriptEnabled(true); 38         
39         // 綁定javaScript接口，能夠實如今javaScript中調用咱們的Android代碼 40         // webView.addJavascriptInterface(new WebAppInterface(this), "Android"); 41         // webView.setWebViewClient(new MyWebViewClient()); 42 
43         // 加載assets目錄下的html頁面
44         webView.loadUrl("file:///android_asset/source.html"); 45 
46  } 47 
48     /**
49  * 用於控制頁面導航 50  * 51  * @author hebao 52  * 53      */
54 // private class MyWebViewClient extends WebViewClient { 55 // /** 56 // * 當用於點擊連接，系統調用這個方法 57 // */ 58 // @Override 59 // public boolean shouldOverrideUrlLoading(WebView view, String url) { 60 // if (Uri.parse(url).getHost().equals("www.baidu.com")) { 61 //                // 這個是個人網頁，因此不要覆蓋，讓個人WebView來加載頁面 62 // return false; 63 // } 64 //            // 不然，這個連接不是個人網站頁面，所以啓用瀏覽器來處理urls 65 // Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); 66 // startActivity(intent); 67 // return true; 68 // } 69 // }
70 
71  @Override 72     public boolean onKeyDown(int keyCode, KeyEvent event) { 73         // 檢查是否爲返回事件，若是有網頁歷史記錄
74         if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) { 75  webView.goBack(); 76             return true; 77  } 78         // 若是不是返回鍵或沒有網頁瀏覽歷史，保持默認 79         // 系統行爲（可能會退出該活動）
80         return super.onKeyDown(keyCode, event); 81  } 82 
83  @Override 84     public void onClick(View v) { 85         //Android調用javascript代碼
86         switch (v.getId()) { 87         case R.id.btn_nightmode: 88             webView.loadUrl("javascript:load_night()"); 89             break; 90         case R.id.btn_lightmode: 91             webView.loadUrl("javascript:load_day()"); 92             break; 93 
94         default: 95             break; 96  } 97  } 98 }

上面有必要說明一點：測試

（1）Android讀取assets文件目錄下的文件：

資源文件 sample.txt 位於 $PROJECT_HOME/assets/ 目錄下，能夠在 Activity 中經過 Context.getAssets().open("sample.txt") 方法獲取輸入流。
資源文件 sample.html 位於 $PROJECT_HOME/assets/ 目錄下，能夠經過如下代碼
WebView.loadUrl("file:///android_asset/sample.html");
加載html文件。

部署程序到手機上，以下：