AndroidSDK Support自帶夜間、日間模式切換詳解

轉載前寫在前面的話，現在APP已經不是過去的模式了，要儘可能的做到人性化才能吸引使用者，日夜間面板切換感覺被應用的十分廣泛，但是這篇部落格卻寫出來基本的實現思路，那就是利用系統自帶的style樣式實現日夜面板切換。雖然只有日和夜兩個模式切換，畢竟實現思路在這裡，你可以修改style來實現。感覺嚴大大的部落格被我轉了好幾篇了，下次再找點剛好點乾貨給大家準備過冬。

——— 張愛玲

寫這篇部落格的目的就是教大家利用AndroidSDK自帶的support lib來實現APP日間/夜間模式的切換，最近看到好多帖子在做關於這個日夜間模式切換的開源專案，其實AndroidSDK Support中已經有了非常好的支援了。

本文demo下載地址在文章的末尾，看完文件如果還不能實現可以下載玩玩。

效果演示

左是，右是Android 6.0的效果。 
 

實現步驟

我就以我的demo為例，需要修改Style，需要針對Day/Night設定不同的Style或者Color，切換模式在Java程式碼中實現。

首先需要新建一個專案，選擇初始的Activity時選擇BaseActivity。

一、依賴appcompat庫

在app module的gradle中依賴appcompat庫，版本最低為23.2.0：

dependencies {
    compile 'com.android.support:appcompat-v7:23.4.0'
 

}

• 1
• 2
• 3

• 1
• 2
• 3

今天部落格切換日間夜間模式的原理是切換style，因為我們的頁面中引用了各種style，所以我們只要為定義不同style就可以了，粗略的瀏覽下我們的佈局頁面：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:fitsSystemWindows="true"
    tools:context="com.yanzhenjie.daynight.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34

二、修改style

開啟res/values/styles.xml，把原來的：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

改為：

<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>

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

也就是把Light改為DayNight，DayNight這個主題或者它的子主題才支援白夜間模式的切換。

三、為不同的模式寫不同的colors

我們注意到上面的AppTheme這個主題下其實是設定了三個顏色，這裡簡單實現一個效果，我們就修改這三個顏色即可，在res下新建一個values-night的資料夾：

這裡先要說明一下這個資料夾的作用，我們的預設模式一般是日間模式，所以系統會讀取values中的值，當我們切換到夜間模式時會讀取values-night下的值，不論是style還是color。所以我們簡單的替換顏色，那就新建colors.xml，我們先看下values中的colors.xml：

然後我們把values中的colors.xml檔案複製到values-night中，並且修改下顏色：

我這裡簡單把深藍改為淺藍，把玫紅改為金黃。

OK，styel和color到這裡就技術了，下面就是java程式碼切換模式了。

Java程式碼控制日間夜間模式

首先因為這個功能來自support-appcompat，所以我們的Activity是繼承的AppCompatActivity的。

下面的三種模式都可以用在初始化、或者顯式呼叫：

第一種，自動模式，如果我們app有定位許可權、網路許可權等，系統可以自動確實現在是晚上還是白天，當用戶開啟APP時會自動切換到響應的模式，這個模式我們可以在APP初始化或者Application中用一個靜態程式碼快來設定：

{
    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO);
}

• 1
• 2
• 3

• 1
• 2
• 3

第二種，日間模式，呼叫後需要呼叫Activity的recreate()方法：

getDelegate().setLocalNightMode(AppCompatDelegate.MODE_NIGHT_NO);
recreate();

• 1
• 2

• 1
• 2

第三種，夜間模式，呼叫後需要呼叫Activity的recreate()方法：

getDelegate().setLocalNightMode(AppCompatDelegate.MODE_NIGHT_YES);
recreate();

• 1
• 2

• 1
• 2

好了，非常粗魯，就是這麼簡單，完了咯。

總結

1. 如果你要實現的比較複雜，就不單單是在values-night中設定不同的顏色了，你也可以建不同的style，給不同的view引用。
2. 需要注意的兩個地方，一是app或者activity引用的style需要是Theme.AppCompat.DayNight或者它的子style，二是呼叫getDelegate().setLocalNightMode()你的Activity必須是繼承AppCompatActivity的。