前言

本篇博客给大家分享一个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实现白天/夜间阅读模式的更多相关文章

  1. Android 高级UI设计笔记24：Android 夜间模式之 WebView 实现白天 / 夜间阅读模式 （使用JavaScript）

    1. 问题引入: 前面我们是使用方法 降低屏幕亮度(不常用) 和 替换theme,两者都是针对Activity的背景进行白天.夜间模式的交换,但是如果我们显示的是Html的内容,这个时候改怎么办? 分 ...

  2. Android白天/夜间模式Day/Night Mode标准原生SDK实现

     Android白天/夜间模式Day/Night Mode标准原生SDK实现 章节A:Android实现白天/夜间模式主要控制器在于UiModeManager,UiModeManager是Andr ...

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

    Android中使用WebView, WebChromeClient和WebViewClient加载网页   在android应用中,有时要加载一个网页,如果能配上一个进度条就更好了,而android ...

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

    在android应用中,有时要加载一个网页,如果能配上一个进度条就更好了,而android 中提供了其很好的支持, 其中webView的一系列用法,比如 webView.getSettings().s ...

  5. Android 各个版本WebView

    转载请注明出处   http://blog.csdn.net/typename/ powered by miechal zhao : miechalzhao@gmail.com 前言: 根据Googl ...

  6. Android之针对WebView的全屏播放

    转载请标明转载处:http://bbs.csdn.net/topics/390839259 本人刚学android,菜鸟一个,第一次写帖子,最近因为项目要用webview加载html5的视频,开始不能 ...

  7. Android开发之WebView具体解释

    概述: 一个显示网页的视图.这个类是你能够滚动自己的Web浏览器或在你的Activity中简单地显示一些在线内容的基础.它使用了WebKit渲染引擎来显示网页,包含向前和向后导航的方法(通过历史记录) ...

  8. Android应用开发 WebView与服务器端的Js交互

    最近公司再添加功能的时候,有一部分功能是用的html,在一个浏览器或webview中展示出html即可.当然在这里我们当然用webview控件喽 WebApp的好处: 在应用里嵌套web的好处有这么几 ...

  9. Android 各个版本号WebView

    转载请注明出处   http://blog.csdn.net/typename/ powered by miechal zhao : miechalzhao@gmail.com 前言: 依据Googl ...

随机推荐

  1. Android 标题栏（2）

    本文来自网易云社区 作者:孙圣翔 添加ActionProvider 1.在menu菜单中添加app:actionProviderClass属性: <item     android:id=&qu ...

  2. ogre3D学习基础8 --- 资源管理器

    资源管理 可管理的资源有: 材质资源:在.material文件中包含的材质脚本定义(技术.通路.纹理单元等数据的定义). 模型资源:经过优化的二进制网格模型文件,扩展名为.mesh.包含几何信息和一些 ...

  3. 基于 FPGA 的图像边缘检测

    本文主要内容是实现图像的边缘检测功能 目录 mif文件的制作 调用 ip 核生成rom以及在 questasim 仿真注意问题 灰度处理 均值滤波:重点是3*3 像素阵列的生成 sobel边缘检测 图 ...

  4. 深度学习：Sigmoid函数与损失函数求导

    1.sigmoid函数 ​ sigmoid函数,也就是s型曲线函数,如下: 函数: 导数: ​ 上面是我们常见的形式,虽然知道这样的形式,也知道计算流程,不够感觉并不太直观,下面来分析一下. 1.1 ...

  5. 剪枝的定义&&hdu1010

    半年前在POJ上遇到过一次剪枝的题目,那时觉得剪枝好神秘...今天在网上查了半天资料,终于还是摸索到了一点知识,但是相关资料并不多,在我看来,剪枝是技巧,而不是方法,也就是说,可能一点实用的小技巧,让 ...

  6. git命令综合

    Git 是一个很强大的分布式版本控制系统.它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势.Git常用操作命令:1) 远程仓库相关命令检出仓库:$ git clone git: ...

  7. 【bzoj2339】[HNOI2011]卡农 dp+容斥原理

    题目描述 题解 dp+容斥原理 先考虑有序数列的个数,然后除以$m!$即为集合的个数. 设$f[i]$表示选出$i$个集合作为满足条件的有序数列的方案数. 直接求$f[i]$较为困难,考虑容斥,满足条 ...

  8. hihoCoder #1047 Random Tree

    题意 给出点数为 $n$($n \le 1000$)的完全图 $K_n$,带边权.随机出 $K_n$ 的一棵生成树 $T$.求 $T$ 上任意两点间距离的期望. 解法 固定两点 $u$.$v$($u ...

  9. poj 3068 "Shortest" pair of paths

    "Shortest" pair of paths Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 1407 ...

  10. 2018.8.8 Noip2018模拟测试赛（二十一）

    日期: 八月七号  总分: 300分  难度: 提高 ~ 省选    得分: 112分(OvO) 题目目录: T1:幸福的道路 T2:Solitaire T3:Flags 赛后心得: 第一题裸树d啊! ...