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

來源:互聯網
上載者:User

標籤:print   樣式   方法   案例   extend   lock   find   分享   tco   

前言

本篇部落格給大家分享一個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;        }    }
終於效果

完整代碼
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實現白天/夜間閱讀模式

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.