【android】夜間模式簡單實現

完整代碼，請參考我的博客園客戶端，git地址：http://git.oschina.net/yso/CNBlogs

關於閱讀類的app，有個夜間模式真是太重要了。

那么有兩種方式可以實現夜間模式

1：修改theme，重啟activity

優點：正兒八經的夜間模式，配色看着舒服

缺點：圖片刺眼、閃屏

核心思路：自定義一個顏色屬性名 A，A在日間和夜間模式下都有具體的顏色代碼，頁面布局文件只管引用A，至於是日間還是夜間，由后台主題決定。

2：使用一個帶黑色帶透明度的View，蓋在現有的activity上，效果類似你帶上墨鏡，看着太陽不刺眼。

優點：不用重啟activity，不閃屏；加上透明度過渡動畫，模式之間切換非常舒服，解決了1中，白底圖片依舊刺眼的問題。；

缺點：配色沒變化，就算帶上墨鏡，白天依舊是白天。

核心思路：使用WindowManager，在當前activity上，通過addView，添加一個黑色帶透明度的View。

 

本方案整合了兩種解決方案。在夜間配色的基礎上，再加上一層墨鏡，讓圖片也變得柔和起來，效果圖如下：

可以看待chrome圖標的白色底，在夜間模式下也變得柔和了

好，下面來講講具體的實現步驟，本環節使用的開發環境是android Studio

1 首先，在values下要准備好三個文件，沒有就自己創建

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>
    <attr name="cardBackground" format="reference|color"></attr>
    <attr name="titleColor" format="reference|color"></attr>
    <attr name="textColor" format="reference|color"></attr>
    <attr name="selectorBtn" format="reference"></attr>
    <attr name="selectorListItem" format="reference"></attr>
</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父類，自動托管日間、夜間模式

BaseApplication就是自己包裝的Application，通過它，保存日間、夜間模式

　Application和Activity,Service一樣是android框架的一個系統組件，當android程序啟動時系統會創建一個 application對象，用來存儲系統的一些信息。通常我們是不需要指定一個Application的，這時系統會自動幫我們創建，如果需要創建自己 的Application，也很簡單創建一個類繼承 Application並在manifest的application標簽中進行注冊(只需要給Application標簽增加個name屬性把自己的 Application的名字定入即可)。

　　android系統會為每個程序運行時創建一個Application類的對象且僅創建一個，所以Application可以說是單例 (singleton)模式的一個類.且application對象的生命周期是整個程序中最長的，它的生命周期就等於這個程序的生命周期。因為它是全局 的單例的，所以在不同的Activity,Service中獲得的對象都是同一個對象。所以通過Application來進行一些，數據傳遞，數據共享 等,數據緩存等操作。

public class BaseActionBarActivity extends ActionBarActivity {

    private BaseApplication mBaseApp = null;
    private WindowManager mWindowManager = null;
    private View mNightView = null;
    private LayoutParams mNightViewParam; 
    private boolean mIsAddedView;   

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        mBaseApp = (BaseApplication) getApplication();

        if (mBaseApp.isNightMode())
            setTheme(R.style.AppTheme_night);
        else
            setTheme(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();
    }
  
    public void ChangeToDay() {
        mBaseApp.setIsNightMode(false);
        mNightView.setBackgroundResource(android.R.color.transparent);
    }

    public void ChangeToNight() {
        mBaseApp.setIsNightMode(true);
        initNightView();
        mNightView.setBackgroundResource(R.color.night_mask);
    }

    /**
     * wait a time until the onresume finish
     */
    public void recreateOnResume() {
        new Handler().postDelayed(new Runnable() {
            public void run() {
                recreate();
            }
        }, 100);
    }

    private void initNightView() {
        if (mIsAddedView == true)
            return;
        mNightViewParam = new LayoutParams(
                LayoutParams.TYPE_APPLICATION,
                LayoutParams.FLAG_NOT_TOUCHABLE | LayoutParams.FLAG_NOT_FOCUSABLE,
                PixelFormat.TRANSPARENT);

        mWindowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
        mNightView = new View(this);
        mWindowManager.addView(mNightView, mNightViewParam);
        mIsAddedView = true;
    }
}

值得一提的是recreateOnResume()函數，因為是從Resume里面重建activity的（避免閃屏）此時，直接調用系統的recreate函數時，會報錯，原因是resume還沒執行完，就被recreate了，因此，我們函數需要延時一會，等待系統完成resume就好了。一般延時1毫秒就可以了，但是我的app里面用到抽屜式導航欄，保存的時間要長點。

准備工作到這里已經結束了。只要activity集成自該父類，就會自動托管日間、夜間模式了

3調用方式

在布局文件里，引用顏色的地方，我們使用問號來訪問定義在styles.xml里面主題的屬性。換句話說，這種方式的神奇之處在於，我在夜間主題、白天主題都定義了titleColor，布局只管引用titleColor，至於是白天的還是晚上的，則由activity的setTheme指定。

 

?表示引用屬性
“？”引用主題屬性，當您使用這個標記，你所提供的資源名必須能夠在主題屬性中找到，因為資源工具認為這個資源屬性是被期望得到的，您不需要明確的指出它的類型

        <TextView
            android:id="@+id/base_swipe_item_title"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:gravity="left|center_vertical"
            android:textColor="?titleColor"
            android:textSize="21sp" />

 

 

子類只要調用ChangeToDay、ChangeToNight就可以完成模式的切換了。別忘了recreate activity來生效哦，實例代碼如下：

  void changeViewMode() {
        boolean isNight = getMyApplication().isNightMode();
        if (isNight)
            ChangeToDay();
        else
            ChangeToNight();

        recreate();
    }

 

OK，如過你能堅持看到這里，說明閣下是有耐心的人，奉上一個彩蛋。

關於WebView網頁如何實現日間、夜間模式。

這個問題比我們現象的要簡單的多。因為網頁么，在生成html內容時，只要根據日間、還是夜間模式，替換css路徑為日間.css、夜間.css就好了。

栗子來了，瞧，就是這個"{style}",我們要替換的對象。

<html>
<head>
    <title>Cnblogs</title>
    <link rel="stylesheet" type="text/css" href="{style}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
    minimum-scale=1.0, user-scalable=no"/>
</head>

在對webview加載內容文本時，替換該字符串的css

replace("{style}",baseApplication.isNightMode() ? "style_night.css" : "style_day.css")

結構如下：

切換主題如何避免閃屏

我們知道，通過reCreate()，來重啟activity的時候，會閃屏；

那么 在切換之前，先截屏作為activity蓋在當前的activity上面，然后重啟activity，完畢之后，把蓋着的activity通過alpha動畫消失，這樣切換主題動作就會變的很柔和了