关于夜间模式的总结

最新推荐文章于 2024-05-31 19:24:58 发布
最新推荐文章于 2024-05-31 19:24:58 发布
阅读量656 收藏
点赞数
文章标签： 移动开发 javascript 游戏 ViewUI
原文链接：https://my.oschina.net/zbj1618/blog/847954
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

 

关于夜间模式的总结

1.目前自己做的案例

  • 1. 那么有两种方式可以实现夜间模式
    • 1：修改theme，重启Activity
      • 优点：正儿八经的夜间模式，配色看着舒服
      • 缺点：图片刺眼、闪屏
    • 2：使用一个带黑色带透明度的View，盖在现有的activity上【遮罩层】
      • 优点：不用重启activity，不闪屏；加上透明度过渡动画，模式之间切换非常舒服，解决了1中，白底图片依旧刺眼的问题。；
      • 缺点：配色没变化，就算带上墨镜，白天依旧是白天。
  • 2.使用步骤
    • 1.首先，在values下要准备好三个文件，没有就自己创建

 

175144_tsMs_3027457.png

 

      • 说明： attrs.xml（声明属性的类型，布局xml中用） reference可以使用系统的资源ID，比如R.color.gray； color可以直接使用#ffffff颜色代码

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <!--夜间模式设置的属性-->

    <attr name="containerBackground" format="reference|color"/>

    <attr name="titleColor" format="reference|color"/>

    <attr name="textColor" format="reference|color"/>

    <attr name="selectorBtn" format="reference"/>

    <attr name="selectorListItem" format="reference"/>

    <attr name="personCenterTextColor" format="reference|color"/>

    <attr name="intervalBg" format="reference|color"/>

    <attr name="underLine" format="reference|color"/>

    <attr name="grayTextColor" format="reference|color"/>

</resources>

 

      • colors.xml（调色板，集中管理颜色hex）遵循 优秀格式规范 ，即调色板模式，避免使用btn1,btn2,fontTitle,fontText之类的颜色名。
<?xml version="1.0" encoding="utf-8"?>

<resources>

        <color name="white">#fafafa</color>

        <color name="white_dark">#f3f3f3</color>

        <color name="gray_light">#cccccc</color>

        <color name="gray">#777</color>

        <color name="gray_dark">#383838</color>

        <color name="green_light">#8e9ea4</color>

        <color name="green">#34515c</color>

        <color name="green_dark">#1e3e4a</color>

        <color name="night_mask">#90000000</color>

</resources>
      • styles.xml（日间、夜间主题）
<resources>

        <!-- Application theme. -->

        <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        </style>

        <!-- 日间模式 -->

        <style name="AppTheme.day" parent="AppTheme">

                <item name="containerBackground">@color/white_dark</item>

                <item name="titleColor">@color/gray_dark</item>

                <item name="textColor">@color/gray</item>

                <item name="selectorBtn">@drawable/navigator_list_item_day</item>

                <item name="selectorListItem">@drawable/list_item_day</item>

        </style>

        <!-- 夜间模式 -->

        <style name="AppTheme.night" parent="AppTheme">

                <item name="containerBackground">@color/green_dark</item>

                <item name="titleColor">@color/white_dark</item>

                <item name="textColor">@color/green_light</item>

                <item name="selectorBtn">@drawable/navigator_list_item_night</item>

                <item name="selectorListItem">@drawable/list_item_night</item>

        </style>

</resources>
    • 2.定义Activity父类和Application，自动托管日间、夜间模式
      • 说明：BaseApplication就是自己包装的Application，通过它，保存日间、夜间模式
      • Application和Activity一样是android框架的一个系统组件，当android程序启动时系统会创建一个application对象，用来存储系统的一些信息。
      • android系统会为每个程序运行时创建一个Application类的对象且仅创建一个，所以Application可以说是单例 (singleton)模式的一个类.且application对象的生命周期是整个程序中最长的，它的生命周期就等于这个程序的生命周期。因为它是全局 的单例的，所以在不同的Activity,Service中获得的对象都是同一个对象。所以通过Application来进行一些，数据传递，数据共享等,数据缓存等操作。
      • 在自定义Application中
@Override

public void onCreate() {

    super.onCreate();

    ……

    //记录夜间模式状态。这个SP值很重要，不要随便清理SP中的值

    mSp = PreferenceManager.getDefaultSharedPreferences(this);

    mIsNightMode = mSp.getBoolean(PARAM_IS_NIGHT_MODE, false);

}


private boolean mIsNightMode;

private SharedPreferences mSp;

private static final String PARAM_IS_NIGHT_MODE = "PARAM_IS_NIGHT_MODE";

public boolean isNightMode() {

    return mIsNightMode;

}


public void setIsNightMode(boolean isNightMode) {

    if (mIsNightMode == isNightMode)

        return;

    mIsNightMode = isNightMode;

    mSp.edit().putBoolean(PARAM_IS_NIGHT_MODE, mIsNightMode).apply();

}
      • 在BaseActivity中
@Override

protected void onCreate(Bundle savedInstanceState) {

    mBaseApp = (BaseApplication) getApplication();

    if (mBaseApp.isNightMode()){

        setTheme(isSwipeToClose() ? R.style.AppTheme_night_transparent : R.style.AppTheme_night);

    } else{

        setTheme(isSwipeToClose() ? R.style.AppTheme_day_transparent : R.style.AppTheme_day);

    }

    super.onCreate(savedInstanceState);

    //夜间模式

    mIsAddedView = false;

    if (mBaseApp.isNightMode()) {

        initNightView();

        mNightView.setBackgroundResource(R.color.night_mask);

    }

}


@Override

protected void onDestroy() {

    if (mIsAddedView) {

        mBaseApp = null;

        mWindowManager.removeViewImmediate(mNightView);

        mWindowManager = null;

        mNightView = null;

    }

    super.onDestroy();

}


protected void initNightView() {

    if (mIsAddedView)

        return;

    WindowManager.LayoutParams mNightViewParam = new WindowManager.LayoutParams(

            WindowManager.LayoutParams.TYPE_APPLICATION,

            WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE | WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,

            PixelFormat.TRANSPARENT);


    mWindowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);

    mNightView = new View(this);

    mWindowManager.addView(mNightView, mNightViewParam);

    mIsAddedView = true;

}


protected void ChangeToDay() {

    mBaseApp.setIsNightMode(false);

    mNightView.setBackgroundResource(android.R.color.transparent);

}


protected void ChangeToNight() {

    mBaseApp.setIsNightMode(true);

    initNightView();

}

调用方式

isNight = BaseApplication.getInstance().isNightMode();

if (isNight) {

    ChangeToDay();

} else {

    ChangeToNight();

}

recreate();

    • 3.如何在布局中引用资源

  • 3.关于WebView网页如何实现日间、夜间模式
    • 先了解js的切换夜间模式的点击事件接口

    • 在代码里写【关键代码】
ws = webView.getSettings();

ws.setJavaScriptEnabled(true);

webView.setWebViewClient(new MyWebViewClient());


private class MyWebViewClient extends WebViewClient {

    @Override

    public void onPageFinished(WebView view, String url) {

        view.getSettings().setJavaScriptEnabled(true);

        super.onPageFinished(view, url);

        if (isNight) {

            webView.loadUrl("javascript:toggleClassTest()");

        }

    }

}

 

2.简单优雅使用Android7.0实现夜间模式

  • 1.关于Android7.0夜间模式新特性
    • 事实上，日间模式与夜间模式就是给APP定义并应用两套不同颜色的主题。用户可以自动或者手动的开启。
    • Android 6.0 Marshmallow 预览版中曾经短暂出现过相关的夜间模式的功能，只是在正式版中被移除了，在Android 7.0 Nougat上，用户们再次经历了「得而复失」的遗憾，在开发者预览版中，夜间模式和暗色模式先是开启，然后有再次被移除。而在正式版中，夜间模式也没有出现。但其实相关的代码一直存在于系统中，只是默认没有被开启。
  • 2.实现步骤
    • 1.添加依赖库

compile 'com.android.support:appcompat-v7:25.1.1'

compile 'com.android.support:design:25.1.1'

由于Support Library在23.2.0的版本中才添加了Theme.AppCompat.DayNight主题，所以依赖的版本必须是高于23.2.0的，并且，这个特性支持的最低SDK版本为14，所以，需要兼容Android 4.0的设备，是不能使用这个特性的，在API Level 14以下的设备会默认使用亮色主题。不过现在4.0以下的设备应该比较少了吧，毕竟微信的minSdkVersion都设置为14了。

    • 2.准备资源
      • 1.让我们自己的主题继承并应用DayNight主题。
<style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">

        <item name="colorPrimary">@color/colorPrimary</item>

        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

        <item name="colorAccent">@color/colorAccent</item>

        <!--customize your theme here 下面可以自定义-->

</style>
      • 2.新建资源文件

 

新建夜间模式资源文件夹:在res目录下新建values-night文件夹，然后在此目录下新建colors.xml文件在夜间模式下的应用的资源。当然也可以根据需要新建drawable-night,layout-night等后缀为-night的夜间资源文件夹。

 

在value中的color文件

<!--values-colors.xml-->

<resources>

    <color name="colorPrimary">#009688</color>

    <color name="colorPrimaryDark">#00796B</color>

    <color name="colorAccent">#009688</color>

    <color name="textColorPrimary">#616161</color>

    <color name="viewBackground">@android:color/white</color>

</resources>

在value-night的color文件

<!--values-night-colors.xml-->

<resources>

    <color name="colorPrimary">#35464e</color>

    <color name="colorPrimaryDark">#212a2f</color>

    <color name="colorAccent">#212a2f</color>

    <color name="textColorPrimary">#616161</color>

    <color name="viewBackground">#212a2f</color>

</resources>
      • 3. 使Activity继承自AppCompatActivity
    • 3.在自定义Application中
public class App extends Application {

    @Override

    public void onCreate() {

        super.onCreate();

        // the 'theme' has two values, 0 and 1

        // 0 --> day theme, 1 --> night theme

        if (getSharedPreferences("user_settings",MODE_PRIVATE).getInt("theme", 0) == 0) {

            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

        } else {

            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);

        }

    }

}

 

注意：

                 这里AppCompatDelegate.setDefaultNightMode()方法可以接受的参数值有4个：

        • MODE_NIGHT_NO. (一直应用日间(light)主题).
        • MODE_NIGHT_YES. (一直使用夜间(dark)主题).
        • MODE_NIGHT_AUTO. (根据当前时间在day/night主题间切换).
        • MODE_NIGHT_FOLLOW_SYSTEM(默认选项)(跟随系统，通常为MODE_NIGHT_NO).
    • 4.动态调用切换夜间模式
SharedPreferences sp =  getSharedPreferences("user_settings",MODE_PRIVATE);

if ((getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES) {

    sp.edit().putInt("theme", 0).apply();

    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

} else {

    sp.edit().putInt("theme", 1).apply();

    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);

}

//过渡动画效果，防止切换夜间模式闪屏
 

getWindow().setWindowAnimations(R.style.WindowAnimationFadeInOut);

recreate();

 

注意：

在调用recreate()方法之前，还可以创建一些动画进行过渡。

过渡动画

<style name="WindowAnimationFadeInOut">

    <item name="android:windowEnterAnimation">@anim/fade_in</item>

    <item name="android:windowExitAnimation">@anim/fade_out</item>

</style>

fade_in.xml动画文件

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha

        android:duration="1000"

        android:fromAlpha="0"

        android:interpolator="@android:anim/decelerate_interpolator"

        android:toAlpha="1.0" />

</set>
    • 5.设置自定义属性，比如文字，按钮，容器背景等颜色
android:textColor="@color/textColor"

这样就可以根据属性切换字体颜色

values中color     

<color name="textColor">#FF0000</color>

night-values中color

<color name="textColor">#039BE5</color>
    • 6.注意事项

在Android 6.0及以下的设备上，本项目运行时会有切换的过渡动画效果，但是不支持Android 7.0及以上的设备

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/zbj1618/blog/847954

weixin_34357887
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单实现日夜间模式切换
duanzeshan的博客
09-22 1246
在values下的color中设置一个颜色 color name="bg_select">#fffcolor>//为日间模式时的颜色 新建一个values-night文件夹将values中的color复制到此文件夹下 color name="bg_select">#000color>//改变夜间模式时需要的颜色 //将夜间模式需要改变颜色的地方背景颜色设置为bg_select
夜间模式
hihugo的专栏
10-26 1317
夜间模式，其实跟换肤功能没什么区别，用户可以在正常模式和夜间模式之间切换。我实现的思路总结为：继承+通知+两套图片。 继承一个父类，姑且命名它BaseViewController吧，所有的UIViewController都继承它。其实大家都应该养成一个习惯，项目在构建的时候，尽量让所有的UIViewController都继承一个父的UIViewController,这样的框架让代码有更好的拓展性
vue2+less实现夜间模式
cnlovedudu的博客
07-12 1636
夜间模式vue2+less 项目中使用less预处理器 安装依赖：less、less-loader、style-resources-loader 实现步骤 1、建一个theme.less文件（定义通用变量） //白天模式下色值 @opacity-light:100%; @color-main-red-light: #D43C33;/* 品牌主色，用于导航栏，按钮，需要强调的文字等*/ @color-main-25-light: #252525;/* 品牌主色，用于工具栏背景等*/ ... //夜间模式下色
vue3实现白天黑夜切换
最新发布
FRC16669的博客
05-31 156
简单实现vue3页面白天黑夜切换
夜间模式的实现
JavaLive09的专栏
04-30 1117
1. window 设置 screenBrightness
夜间模式实现方法2
04-25
该文档总结了一种通过切换主题实现夜间模式的方法。 有兴趣的同学可以参考，有不懂的地方欢迎留言，共同进步！ 谢谢！
夜间模式实现方法1
04-25
该文档总结了一种通过AppCompatDelegate实现夜间模式的方法。 有兴趣的同学可以参考，有不懂的地方欢迎留言，共同进步！ 谢谢！
夜间模式实现方法3 webview夜间模式
04-25
该文档总结了一种通过注入css实现夜间模式的方法。 兴趣的同学可以参考，有不懂的地方欢迎留言，共同进步！ 谢谢！
android 夜间模式
01-30
`Zdndemo`可能是提供了一个关于夜间模式实现的示例项目。在该项目中，你可能可以找到以下内容： 1. **资源文件夹**：可能包含`values`和`values-night`两个资源文件夹，分别用于日间和夜间模式。 2. **主题配置**：`...
iOS demo 阅读 夜间模式
12-30
在iOS开发中，夜间模式（Night Mode）是一个重要的功能，它允许用户在暗光环境下使用应用时调整界面颜色，减轻视觉疲劳。这个“iOS demo 阅读 夜间模式”是一个示例项目，用于展示如何实现夜间模式的切换以及响应...
unity3d 白天夜晚切换插件 Day_Night_Cycle.unitypackage
02-27
unity3d 白天夜晚切换插件，可以渐变改变天空盒，代码可以更改，很方便使用。
Android实现日夜间模式的深入理解
Fred
03-07 997
转自：http://www.jb51.net/article/93852.htm 在本篇文章中给出了三种实现日间/夜间模式切换的方案，三种方案综合起来可能导致文章的篇幅过长，请耐心阅读。1、使用 setTheme 的方法让 Activity 重新设置主题；2、设置 Android Support Library 中的 UiMode 来支持日间/夜间模式的切换；3、通过资源 id 映射，回调自定义
有关夜间模式
lianshaoshao的博客
02-01 637
这个是邓总给的。很niubility的 1.http://p.codekk.com/detail/Android/dersoncheng/MultipleTheme 2.http://p.codekk.com/detail/Android/hongyangAndroid/AndroidChangeSkin ;
夜间模式的开启与关闭，父模板的制作
weixin_30664051的博客
11-02 253
夜间模式的开启与关闭 放置点击的按钮或图片。 定义开关切换函数。 onclick函数调用。 父模板的制作 制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。 汇总相关的样式形成独立的css文件。 汇总相关的js代码形成独立的js文件。 形成完整的base.html+css+js <!DOCTYPE html> &...
知乎和简书的夜间模式实现套路（转）
dsadfwersdfa的专栏
08-29 876
http://www.diycode.cc/topics/269 github https://github.com/D-clock/AndroidStudyCode
夜间模式实现
阿洋的博客
08-31 566
最简单的方法：self.view.window.alpha = 0.6;
通过切换主题实现夜间模式的技术解析
"该文档介绍了两种实现夜间模式的方法，一种是通过...总结，实现夜间模式有多种策略，本文档主要关注的是通过切换主题的方式，这种方法虽然较为繁琐，但能提供平滑的用户体验，适用于对界面动态变化有较高要求的App。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值