码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2015-04-01 20:06:54      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:android   it-xiao小巫   

前言

本篇博客给大家分享一个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代码

<!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实现白天/夜间阅读模式

标签:android   it-xiao小巫   

原文地址:http://blog.csdn.net/wwj_748/article/details/44810283

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!