Android APP以及webview夜间模式的浅析
来源:互联网 发布:手机淘宝抢购神器 编辑:程序博客网 时间:2024/05/29 11:19
前言
Android的夜间模式主要主用于阅读方面,在QQ,微信读书,新闻阅读类一般会有相应的功能,本文主要介绍整体APP的夜间模式以及webview中夜间模式的实现。
效果图展示
功能实现简介
APP的夜间模式有两种方式:1、通过切换theme来实现夜间模式。2、通过修改uiMode来切换夜间模式。
修改uimode是修改Configuration,这种主题切换只限于黑白模式,没有其他模式,不需要大量定义主题,即本文介绍的内容。
webview这个是通过改变HTML代码来实现的,我们一个一个的来讲。
application夜间模式代码详解
首先记载依赖:compile 'com.android.support:appcompat-v7:24.0.0',然后Activity须继承AppCompatActivity。这两个应该是硬性要求哦,我在网上查到的。
关于xml的一些准备工作
采用这种方法切换夜间模式,其实就是动态变换xml的背景色。
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" android:fitsSystemWindows="true" app:navigationIcon="@drawable/ic_actionbar_menu" app:titleTextColor="@color/textColorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></android.support.v7.widget.Toolbar>
这是toolbar的布局文件,主要看颜色的处理,这里边颜色一定要引用color资源文件下的颜色。注意哦,一定不可以直接写颜色代码,一定不行!!!我在初学android的时候,基本不管这些封装的,刚开始就是觉得费劲,直接把颜色代码写上不就好了,#FFF或者其他颜色代码,简单明了。这次我才发现看来封装是真的有用。看一下color文件吧。
<?xml version="1.0" encoding="utf-8"?><resources> <color name="colorPrimary">#0099FF</color> <color name="colorPrimaryDark">#4b4b58</color> <color name="colorAccent">#FF4081</color> <color name="colorLightGray">#E0E0E0</color> <color name="colorWhite">#FFFFFF</color> <color name="textColorPrimary">#FFFFFF</color> <color name="colorDayWindowBackground">#F3F3F3</color> <color name="colorDayPrimary">#00A2ED</color> <color name="gray_color">#4b4b58</color> <color name="item_bg">#FFFFFF</color> <color name="titleTextColor">#FFFFFF</color></resources>
注意toolbar用到的colorPrimary以及textColorPrimary,都有在color文件中定义。然后需要注意的是你还需要另外定义一份夜间使用的资源颜色 values—night,放在res文件夹下面如图
<?xml version="1.0" encoding="utf-8"?><resources> <color name="colorPrimary">#35464e</color> <color name="colorPrimaryDark">#212a2f</color> <color name="colorAccent">#212a2f</color> <color name="textColorPrimary">#616161</color> <color name="viewBackground">#424242</color> <color name="colorDayWindowBackground">#212121</color> <color name="line_divider">#616161</color> <color name="item_bg">#616161</color></resources>
注意:values—night下面也有colorPrimary以及textColorPrimary。但是颜色值不一样,当点击切换夜间模式的时候,android会自动从values—night下面取值
还有一点需要注意:APP的主题一定要是DayNight下的
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="toolbarColor">@color/colorPrimary</item> </style>
Java代码实现
public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()) { case R.id.action_switch_model: int mode = getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK; if (mode == Configuration.UI_MODE_NIGHT_YES) { AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO); } else { AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES); } recreate(); } return false; }
这里我是在菜单栏中实现切换的,菜单栏不必详说。主要是看点击事件里的代码详解:
AppCompatDelegate.setDefaultNightMode(int mode);用于适配全局主题
model它有四个可选值,分别是:
MODE_NIGHT_NO: 使用亮色(light)主题,不使用夜间模式
MODE_NIGHT_YES:使用暗色(dark)主题,使用夜间模式
MODE_NIGHT_AUTO:根据当前时间自动切换 亮色(light)/暗色(dark)主题
MODE_NIGHT_FOLLOW_SYSTEM(默认选项):设置为跟随系统,通常为 MODE_NIGHT_NO
这里我们主要采用YES和NO两种主题, int mode = getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;用于获取现在的主题。
webview中的夜间模式
我这个方法不通用,但是理念是一样的,都需要注入css代码,改变HTML中的样式,因为HTML的整体样式都归于css管理。这次webview从json数据中获取了整体HTML的代码,通过setdata方法加载,详细用法看链接http://www.jianshu.com/p/7d93d72390ec
这次我在css代码后面加上了字符串"</head><body class="night">",代码如下:
public static String createHtmlData(String html, List<String> cssList, List<String> jsList) { final String css = HtmlUtil.createCssTag(cssList)+ "</head><body class=\"night\">"; final String js = HtmlUtil.createJsTag(jsList); Log.i("CSS123",css); Log.i("CSS125",html); Log.i("CSS124",js); return css.concat(HIDE_HEADER_STYLE).concat(html).concat(js); }
看不懂的看上面的连接,在这里不赘述了。demo地址http://download.csdn.net/download/qq_32331397/10128552
感兴趣的同学可以关注一下我的微信公众号,或者微信搜索 开发 Android的小学生
- Android APP以及webview夜间模式的浅析
- 设置webView 的 夜间模式
- 通过css注入实现的android webview的夜间模式
- Android Webview 通过反射实现夜间模式
- android webview夜间模式javascript代码
- 打造自己的 APP「冰与火百科」(四):WebView 交互、夜间模式
- Android 夜间模式的设置以及需要注意的地方
- webView 夜间模式
- Android APP日夜间模式切换
- android夜间模式的实现
- Android夜间模式的实现
- android 夜间模式的实现
- android简单的夜间模式
- Android 夜间模式的切换
- Android 夜间模式的实现
- android夜间模式的实现
- android夜间模式的实现
- Android夜间模式的切换
- poi工具类
- Android异步消息处理Handler
- java常用正则表达式验证
- jquery实现点击空白处隐藏元素
- C++中vector的用法实例解析
- Android APP以及webview夜间模式的浅析
- [转]Kalman滤波
- C语言-printf、fprintf、fopen、fclose函数的用法
- 解决openssl: error while loading shared libraries: libssl.so.1.1: cannot open shared object file.....
- Ajax 的全面总结
- 罗马宫殿-记忆数字
- UltraEdit软件如何替换回车换行
- IntelliJ IDEA基于maven构建的web项目找不到jar包
- linux 同步数据到另外一个服务器