Android記錄24-WebView實現白天/夜間閱讀模式

Android記錄24-WebView實現白天/夜間閱讀模式
前言

本篇部落格給大家分享一個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代碼

<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> 小巫見大巫，小巫見大巫
夜間模式白天模式載入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;        }    }}