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代码

@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

时间: 2024-10-10 03:19:08

Android记录24-WebView实现白天/夜间阅读模式的相关文章

Android 高级UI设计笔记24:Android 夜间模式之 WebView 实现白天 / 夜间阅读模式 (使用JavaScript)

1. 问题引入: 前面我们是使用方法 降低屏幕亮度(不常用) 和 替换theme,两者都是针对Activity的背景进行白天.夜间模式的交换,但是如果我们显示的是Html的内容,这个时候改怎么办? 分析:首先加载Html页面肯定是要用到WebView的,通过loadUrl的方法可以把html页面显示到webView,我们知道Android可以与JavaScript进行交互,就是说可以在JavaScript中调用Android的代码,也可以在Android中调用JavaScript代码. 所以就有

iOS Safari阅读模式研究

这是一篇在2013年准备的资料,现在分享出来,供有需要的同学参考. 要点 (1) 阅读模式的检测 在frame加载完成后,触发一个timer来检测是否可以使用阅读模式.检测的方式是使用JavaScriptCore framework的接口执行一段JS脚本,然后取JS中属性值来判断是否可以进入阅读模式.如果当前页面可以进入阅读模式,将在地址栏显示阅读模式切换按钮. (2) 阅读模式的执行 当用户点击阅读模式切换按钮时,会依次执行: i. 执行阅读模式检查脚本,判断目前是否可以进入阅读模式. ii.

Android记录25-WebView实现离线缓存阅读

Android记录25-WebView实现离线缓存阅读 前言 本篇博客要实现的是一个离线下载和离线阅读的功能,这是很多阅读类app都常见的一个功能,典型的应用就是网易新闻.什么是离线下载?其实这个概念是比较模糊,是离线之后下载呢,还是下载之后离线,但稍微有点脑子的人都知道没有网络之后怎么下载呢?所以离线下载这个功能是"在有网络的情况下,把资源下载到本地",离线阅读就是"在没有网络或者网络不好的时候,阅读本地好缓存的文章资源".这样就很清楚我们要的这两个具体的功能需求

Android KitKat 4.4 Wifi移植之AP模式与网络共享功能调试记录

Tethering技术在移动平台上已经运用的越来越广泛了,它可以把移动设备当做一个接入点,其它的设备可以通过Wi-Fi,USB或是Bluetooth等方式连接到此移动设备.在Android中可以将Wifi设为AP模式作为WLAN接入点,从而与其他设备共享Android的互联网连接.Android成为接入点后,就无法通过WLAN连接使用Android的应用程序访问互联网,但可以通过其他方式如以太网或移动网络访问互联网.此时以太网或移动网络在网络共享(Tethering)中是作为upstream的角

第24本:《杠杆阅读术》

第24本:<杠杆阅读术> 这段时间正在参加密集式的英语培训,以前的日常作息安排全部被打乱,以前都是在晚上读书的,现在却有点抽不出时间读完一本书. <杠杆阅读术>可能因为是日本人写的书所以在豆瓣上评分并不高,我收藏到读书清单时评分为7.2-7.5之间吧,但感觉这书还是不错,能从中学到5%有用的东西就非常好. 一.何谓多读商业书? 这一章可以总结为一句话:要读书,读好书,还要会读书,更重要的是应用于实践. 读书的本身就是一种投资活动,读书是一种自我投资,而且没有比这更划算的. 就是因为

Android开发之WebView详解

概述: 一个显示网页的视图.这个类是你可以滚动自己的Web浏览器或在你的Activity中简单地显示一些在线内容的基础.它使用了WebKit渲染引擎来显示网页,包括向前和向后导航的方法(通过历史记录),放大和缩小,执行文本搜索等. 需要注意的是:为了让你的应用能够使用WebView访问互联网和加载网页,你必须添加Internet的权限在Android Manifest文件中: <uses-permission android:name="android.permission.INTERNE

Android中使用WebView, WebChromeClient和WebViewClient加载网页

在android应用中,有时要加载一个网页,如果能配上一个进度条就更好了,而android 中提供了其很好的支持, 其中webView的一系列用法,比如 webView.getSettings().setJavaScriptEnabled(true); //设置可以使用javascriptwebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY); //设置滚动条风格webView.setHorizontalScrollBarEna

Android中使用WebView, WebChromeClient和WebViewClient加载网页 (能够执行js)

Android中使用WebView, WebChromeClient和WebViewClient加载网页 在android应用中,有时要加载一个网页,如果能配上一个进度条就更好了,而android 中提供了其很好的支持,下面是一个例子程序,先帖: 1 2 3 4 <?xml version="1.0" encoding="utf-8"?> <WebView xmlns:android="http://schemas.android.com

Android记录程序崩溃Log写入文件

将导致程序崩溃的堆栈调用Log写入文件,便于收集bug.在调试安卓程序,由于某些原因调试时手机不能连接PC端,无法通过IDE查看程序崩溃的Log,希望log能够写入文件中,对于已经发布的App可以通过该功能收集Bug. 01import java.io.FileNotFoundException; 02import java.io.FileOutputStream; 03import java.io.IOException; 04import java.io.PrintStream; 05imp