Android系列之夜间模式和日间模式的功能实现

功能的实现,首先你得把项目中的一些配置文件的信息给改一下

一、把styles中的文件信息改为:

原来的:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>
改为:

<resources>

    <!-- Base application theme. -->
    <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>
    </style>

</resources>

二、之后在res的下面创一个values-night文件夹,cope其中values中的colors.xml文件,修改其中的颜色成以下模样

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#2196F3</color>
    <color name="colorPrimaryDark">#1976D2</color>
    <color name="colorAccent">#CDDC39</color>
</resources>
这样子之后配置信息就差不多可以了,因为我们要用到系统默认的夜间模式,所以需要改这些信息

================================================================================

实例代码:

一、xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" tools:context="com.zking.laci.android13_test.MainActivity">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="日间"
        android:id="@+id/ri"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="夜间"
        android:id="@+id/ye"
        />
</LinearLayout>

二、java代码:

package com.zking.laci.android13_test;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.app.AppCompatDelegate;
import android.view.View;


public class MainActivity extends AppCompatActivity implements  View.OnClickListener{
    {
        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO);
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.ri).setOnClickListener(this);
        findViewById(R.id.ye).setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.ri:{
                getDelegate().setLocalNightMode(AppCompatDelegate.MODE_NIGHT_NO);
                recreate();
                break;
            }
            case R.id.ye:{
                getDelegate().setLocalNightMode(AppCompatDelegate.MODE_NIGHT_YES);
                recreate();
            }
        }

    }
}

这样子日间模式和夜间模式就可以出来了,是不是觉得很简单呢~~~~时间不早了,大家晚安啦,有什么不解或者发现哪里有问题的,欢迎评论哦!










实现小程序中通过按钮全局自由切换夜间模式日间模式,你可以按照以下步骤进行实现: 1. 在app.js中定义一个全局变量,用于保存当前的主题模式(例如nightMode)。 ```javascript App({ globalData: { themeMode: 'day', // 默认为日间模式 }, // 其他全局方法和属性 }) ``` 2. 在app.wxss中定义两套样式,分别对应日间模式夜间模式。 ```css /* 日间模式样式 */ .page { background-color: #ffffff; color: #333333; } /* 夜间模式样式 */ .page-night { background-color: #333333; color: #ffffff; } ``` 3. 在需要切换主题的页面中,创建一个按钮或其他触发事件的元素。 ```html <button bindtap="toggleTheme">切换主题</button> ``` 4. 在触发事件的回调函数中,根据当前主题模式切换全局样式,并更新全局变量。 ```javascript toggleTheme: function() { var app = getApp(); var themeMode = app.globalData.themeMode === 'day' ? 'night' : 'day'; app.globalData.themeMode = themeMode; if (themeMode === 'night') { wx.setStorageSync('themeMode', 'night'); } else { wx.removeStorageSync('themeMode'); } wx.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: themeMode === 'night' ? '#333333' : '#ffffff' }); // 更新当前页面样式 this.setData({ themeClass: themeMode === 'night' ? 'page-night' : '' }); } ``` 5. 在小程序的入口页面(例如app.js中的onLaunch方法)中,读取本地缓存中的主题模式,并更新全局变量和当前页面样式。 ```javascript onLaunch: function() { var themeMode = wx.getStorageSync('themeMode'); var app = getApp(); app.globalData.themeMode = themeMode || 'day'; // 更新当前页面样式 this.setData({ themeClass: app.globalData.themeMode === 'night' ? 'page-night' : '' }); } ``` 这样,当用户点击切换主题按钮时,全局的主题模式切换,并更新当前页面的样式。同时,当前选择的主题模式也会被保存到本地缓存中,下次打开小程序时保持之前选择的主题模式
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值