AndroidSDK Support自带夜间、日间模式切换详解

<div id="article_content" class="article_content">
        <div class="markdown_views"><h1 id="androidsdk-support自带夜间日间模式切换详解"><a name="t0"></a>AndroidSDK Support自带夜间、日间模式切换详解</h1>

<blockquote>
  <p>版权声明：转载必须注明本文转自严振杰的博客: <a href="http://blog.csdn.net/yanzhenjie1003">http://blog.yanzhenjie.com</a></p>
</blockquote>

<p>写这篇博客的目的就是教大家利用AndroidSDK自带的support lib来实现APP日间/夜间模式的切换，最近看到好多帖子在做关于这个日夜间模式切换的开源项目，其实AndroidSDK Support中已经有了非常好的支持了。</p>

<p><strong>本文demo下载地址在文章的末尾，看完文档如果还不能实现可以下载玩玩。</strong></p>

<hr>



<h2 id="效果演示"><a name="t1"></a>效果演示</h2>

<p>左是<strong><a href="http://lib.csdn.net/base/android" class="replace_word" title="Android知识库" target="_blank" style="color:#df3434; font-weight:bold;">Android</a> 4.1的效果</strong>，右是<strong>Android 6.0的效果</strong>。 <br>
<img src="https://img-blog.csdn.net/20160907222102954" alt="Android 4.1的效果" title="">  <img src="https://img-blog.csdn.net/20160907222201581" alt="Android 6.0的效果" title=""></p>



<h2 id="实现步骤"><a name="t2"></a>实现步骤</h2>

<p>我就以我的demo为例，需要修改Style，需要针对Day/Night设置不同的Style或者Color，切换模式在<a href="http://lib.csdn.net/base/javase" class="replace_word" title="Java SE知识库" target="_blank" style="color:#df3434; font-weight:bold;">Java</a>代码中实现。</p>

<p>首先需要新建一个项目，选择初始的Activity时选择BaseActivity。</p>



<h3 id="一依赖appcompat库"><a name="t3"></a>一、依赖appcompat库</h3>

<p>在app module的gradle中依赖appcompat库，版本最低为23.2.0：</p>



<pre class="prettyprint" name="code"><code class="language-groovy hljs matlab has-numbering">dependencies <span class="hljs-cell">{
    compile <span class="hljs-string">'com.android.support:appcompat-v7:23.4.0'</span>
}</span></code><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"></div></pre>

<p>今天博客切换日间夜间模式的原理是切换style，因为我们的页面中引用了各种style，所以我们只要为定义不同style就可以了，粗略的浏览下我们的布局页面：</p>



<pre class="prettyprint" name="code"><code class="language-xml hljs  has-numbering"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span>
<span class="hljs-tag"><<span class="hljs-title">android.support.design.widget.CoordinatorLayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>
    <span class="hljs-attribute">xmlns:app</span>=<span class="hljs-value">"http://schemas.android.com/apk/res-auto"</span>
    <span class="hljs-attribute">xmlns:tools</span>=<span class="hljs-value">"http://schemas.android.com/tools"</span>
    <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
    <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span>
    <span class="hljs-attribute">android:fitsSystemWindows</span>=<span class="hljs-value">"true"</span>
    <span class="hljs-attribute">tools:context</span>=<span class="hljs-value">"com.yanzhenjie.daynight.MainActivity"</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">android.support.design.widget.AppBarLayout
</span>        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
        <span class="hljs-attribute">android:theme</span>=<span class="hljs-value">"@style/AppTheme.AppBarOverlay"</span>></span>

        <span class="hljs-tag"><<span class="hljs-title">android.support.v7.widget.Toolbar
</span>            <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/toolbar"</span>
            <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
            <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"?attr/actionBarSize"</span>
            <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"?attr/colorPrimary"</span>
            <span class="hljs-attribute">app:popupTheme</span>=<span class="hljs-value">"@style/AppTheme.PopupOverlay"</span> /></span>

    <span class="hljs-tag"></<span class="hljs-title">android.support.design.widget.AppBarLayout</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">include</span> <span class="hljs-attribute">layout</span>=<span class="hljs-value">"@layout/content_main"</span> /></span>

    <span class="hljs-tag"><<span class="hljs-title">android.support.design.widget.FloatingActionButton
</span>        <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/fab"</span>
        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span>
        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
        <span class="hljs-attribute">android:layout_gravity</span>=<span class="hljs-value">"bottom|end"</span>
        <span class="hljs-attribute">android:layout_margin</span>=<span class="hljs-value">"@dimen/fab_margin"</span>
        <span class="hljs-attribute">android:src</span>=<span class="hljs-value">"@android:drawable/ic_dialog_email"</span> /></span>

<span class="hljs-tag"></<span class="hljs-title">android.support.design.widget.CoordinatorLayout</span>></span></code><ul class="pre-numbering"></ul><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"></div><ul class="pre-numbering"></ul></pre>



<h3 id="二修改style"><a name="t4"></a>二、修改style</h3>

<p>打开res/values/styles.xml，把原来的：</p>



<pre class="prettyprint" name="code"><code class="language-xml hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"AppTheme"</span> <span class="hljs-attribute">parent</span>=<span class="hljs-value">"Theme.AppCompat.Light.DarkActionBar"</span>></span><span class="css">
    <<span class="hljs-tag">item</span> <span class="hljs-tag">name</span>="<span class="hljs-tag">colorPrimary</span>"><span class="hljs-at_rule">@<span class="hljs-keyword">color/colorPrimary</item></span>
    <item name=<span class="hljs-string">"colorPrimaryDark"</span>>@color/colorPrimaryDark</item>
    <item name=<span class="hljs-string">"colorAccent"</span>>@color/colorAccent</item>
</span></span><span class="hljs-tag"></<span class="hljs-title">style</span>></span></code><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"><a href="javascript:;" target="_blank"></div></pre>

<p>改为：</p>



<pre class="prettyprint" name="code"><code class="language-xml hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"AppTheme"</span> <span class="hljs-attribute">parent</span>=<span class="hljs-value">"Theme.AppCompat.DayNight.DarkActionBar"</span>></span><span class="css">
    <<span class="hljs-tag">item</span> <span class="hljs-tag">name</span>="<span class="hljs-tag">colorPrimary</span>"><span class="hljs-at_rule">@<span class="hljs-keyword">color/colorPrimary</item></span>
    <item name=<span class="hljs-string">"colorPrimaryDark"</span>>@color/colorPrimaryDark</item>
    <item name=<span class="hljs-string">"colorAccent"</span>>@color/colorAccent</item>
</span></span><span class="hljs-tag"></<span class="hljs-title">style</span>></span></code><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"></div></pre>

<p>也就是把<code>Light</code>改为<code>DayNight</code>，<code>DayNight</code>这个主题或者它的子主题才支持白夜间模式的切换。</p>



<h3 id="三为不同的模式写不同的colors"><a name="t5"></a>三、为不同的模式写不同的colors</h3>

<p>我们注意到上面的AppTheme这个主题下其实是设置了三个颜色，这里简单实现一个效果，我们就修改这三个颜色即可，在res下新建一个<code>values-night</code>的文件夹：</p>

<p><img src="https://img-blog.csdn.net/20160907223542538" alt="values-night" title=""></p>

<p>这里先要说明一下这个文件夹的作用，我们的默认模式一般是日间模式，所以系统会读取values中的值，当我们切换到夜间模式时会读取values-night下的值，不论是style还是color。所以我们简单的替换颜色，那就新建colors.xml，我们先看下values中的colors.xml：</p>

<p><img src="https://img-blog.csdn.net/20160907223838839" alt="values中的colors" title=""></p>

<p>然后我们把values中的colors.xml文件复制到values-night中，并且修改下颜色：</p>

<p><img src="https://img-blog.csdn.net/20160907224001728" alt="values-night中的colors" title=""></p>

<p>我这里简单把深蓝改为浅蓝，把玫红改为金黄。</p>

<p>OK，styel和color到这里就技术了，下面就是java代码切换模式了。</p>



<h3 id="java代码控制日间夜间模式"><a name="t6"></a>Java代码控制日间夜间模式</h3>

<p>首先因为这个功能来自support-appcompat，所以我们的Activity是继承的AppCompatActivity的。</p>

<p>下面的三种模式都可以用在初始化、或者显式调用：</p>

<p>第一种，自动模式，如果我们app有定位权限、网络权限等，系统可以自动确实现在是晚上还是白天，当用户打开APP时会自动切换到响应的模式，这个模式我们可以在APP初始化或者Application中用一个静态代码快来设置：</p>



<pre class="prettyprint" name="code"><code class="language-java hljs  has-numbering">{
    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO);
}</code><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"><a href="javascript:;" target="_blank"></div></pre>

<p>第二种，日间模式，调用后需要调用Activity的<code>recreate()</code>方法：</p>



<pre class="prettyprint" name="code"><code class="language-java hljs  has-numbering">getDelegate().setLocalNightMode(AppCompatDelegate.MODE_NIGHT_NO);
recreate();</code><div class="save_code tracking-ad" data-mod="popu_249"></div></pre>

<p>第三种，夜间模式，调用后需要调用Activity的<code>recreate()</code>方法：</p>



<pre class="prettyprint" name="code"><code class="language-java hljs  has-numbering">getDelegate().setLocalNightMode(AppCompatDelegate.MODE_NIGHT_YES);
recreate();</code><div class="save_code tracking-ad" data-mod="popu_249"></div></pre>

<p>好了，非常粗鲁，就是这么简单，完了咯。</p>



<h2 id="总结"><a name="t7"></a>总结</h2>

<ol>
<li>如果你要实现的比较复杂，就不单单是在values-night中设置不同的颜色了，你也可以建不同的style，给不同的view引用。</li>
<li>需要注意的两个地方，一是app或者activity引用的style需要是<code>Theme.AppCompat.DayNight</code>或者它的子style，二是调用<code>getDelegate().setLocalNightMode()</code>你的Activity必须是继承<code>AppCompatActivity</code>的。</li>
</ol>

<p><a href="http://download.csdn.net/detail/yanzhenjie1003/9624635">文章Demo源码下载传送门</a>。</p>

<hr>
<blockquote>
  <p>本文转自严振杰的博客: <a href="http://blog.csdn.net/yanzhenjie1003">http://blog.yanzhenjie.com</a></p>
</blockquote>
</div>
        
  
</div>