前言
本篇博客给大家分享一个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);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
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")) {
return false;
}
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
<script type="text/javascript">
$(function () {
$('pre.prettyprint code').each(function () {
var lines = $(this).text().split('\n').length;
var $numbering = $('<ul/>').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<li/>').text(i));
};
$numbering.fadeIn(1700);
});
});
</script>
分享到:
相关推荐
Android8.0以下手机自带的android-system-webview版本过低使用
react-native-webview.zip
Android-----WebView使用
Android-X5WebView基本封装和使用 通过OkHttp拦截器、自定义CookieJar有效完成客户端与H5端的Cookie同步管理 监听WebView的加载进度 滚动条的设置(隐藏或者显示,内侧显示还是外侧显示) 优化X5WebView的预加载问题...
React Native用于RN的WebView的Web实现 入门 $ npm install react-native-web-webview --save 别名打包您的webpack配置中: resolve: { alias: { 'react-native': 'react-native-web', ... 'react-native-...
包含三个Android工程示例代码: 1. 使用降低屏幕亮度的方式实现夜间模式 2. 使用替换theme的方式实现夜间模式 3. webView实现白天/夜间模式阅读
react-native-android-fullscreen-webview 概述 默认情况下,React Native随附的WebView组件无法显示全屏。 该软件包实质上复制了现有的Android版WebView,并添加了一些额外的功能来启用全屏视频。 iOS默认情况下...
unity-webview-integration-master unity-webview-integration-master unity-webview-integration-master
webview 实现流程分析
webview socket 完整版的demo实现,可以支持使用
crosswalk-webview 比android原生的webview更好用速度更快,支持富文本显示,能够更好的支持富文本网页
主要为大家分享了三行Android代码实现白天夜间模式流畅切换,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
在开发中,有时候我们会在app中使用WebView加载一个web页面。这样可以适当减轻我们开发的难度...这里我们就利用动画,以及 获取网页的快照来实现android activity 默认的切换效果(页面从右往左进入,从左往右退出)。
通过css注入的方式实现android webview的夜间模式。
Android WebView添加夜间模式
react-native-android-webview解决React Native自带的WebView组件Android不能拦截URL的问题安装npm install react-native-android-webview --save 本机库链接安卓android/settings.gradle添加到android/settings....
该插件在iOS上使用WKWebView,在Android上使用最新的常绿webview。 此外,此插件使Web开发人员期望使用HTML5样式路由轻松构建单页应用程序。 注意:此存储库及其文档适用于cordova-plugin-ionic-webview @ 5.x ,...
解决React-Native的WebView不支持Android选择图片和拍照
安卓调试调试webview(类似Chrome://inspect的功能)国内404,大家都懂的,经过我各种折腾制作完成,不会出现空白页面,无需科学那啥,不限机型,Hybrid App等H5混合应用开发必备
Android -- webview全屏播放HTML video.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。