夜间模式实现

所谓的夜间模式，就是能够根据不同的设定，呈现不同风格的界面给用户，而且晚上看着不伤眼睛，实现方式也就是所谓的换肤（主题切换）。对于夜间模式的实现网上流传了很多种方式。也反编译了几个新闻类（你懂得）夜间模式实现的比较的好的App,好歹算是实现了。方式有很多，我现在把我所实现原理（内置主题的方式）分享出来，希望能帮到大家，不喜勿喷（近来笔者小心肝不太安生），有更好的方法也欢迎分享。

实现夜间模式的时候，我一直纠结下面几个问题

• 从何处着手。
  
• 选中夜间模式，如何才能使当前所看到的页面立即呈现出夜间模式的效果又不闪屏
  
• 其他页面如何设置，特别是在Actionbar上的或者有侧边栏Menu的，比如使用了（actionbar——sherlock）库。
  

上面的问题咱们先一个一个解决：

其一：从何处着手

1.1定义属性

要想根据主题的不同，设置不同属性，我们至少需要定义下属性的名字吧。要不然系统怎么知道去哪找啊！

定义属性，是在values下进行。

在attrs.xml里定义了几种属性。

<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="colorValue" format="color" /> <attr name="floatValue" format="float" /> <attr name="integerValue" format="integer" /> <attr name="booleanValue" format="boolean" /> <attr name="dimensionValue" format="dimension" /> <attr name="stringValue" format="string" /> <attr name="referenceValue" format="color|reference" /> <attr name="imageValue" format="reference"/> <attr name="curVisibility"> <enum name="show" value="0" /> <!-- Not displayed, but taken into account during layout (space is left for it). --> <enum name="inshow" value="1" /> <!-- Completely hidden, as if the view had not been added. --> <enum name="hide" value="2" /> </attr> </resources>

从上面的xml文件的内容可以看到，attr里可以定义各种属性类型，如color、float、integer、boolean、dimension（sp、dp/dip、px、pt...）、reference（指向本地资源），还有curVisibility是枚举属性，对应view的invisibility、visibility、gone。

1.2定义主题

接着，我们需要在资源文件中定义若干套主题。并且在主题中设置各个属性的值。

本例中，我在styles.xml里定义了DayTheme与NightTheme。

<style name="DayTheme" parent="Theme.Sherlock.Light">> <item name="colorValue">@color/title</item> <item name="floatValue">0.35</item> <item name="integerValue">33</item> <item name="booleanValue">true</item> <item name="dimensionValue">16dp</item> <!-- 如果string类型不是填的引用而是直接放一个字符串,在布局文件中使用正常,但代码里获取的就有问题 --> <item name="stringValue">@string/action_settings</item> <item name="referenceValue">@drawable/bg</item> <item name="imageValue">@drawable/launcher_icon</item> <item name="curVisibility">show</item> </style> <style name="NightTheme" parent="Theme.Sherlock.Light"> <item name="colorValue">@color/night_title</item> <item name="floatValue">1.44</item> <item name="integerValue">55</item> <item name="booleanValue">false</item> <item name="dimensionValue">18sp</item> <item name="stringValue">@string/night_action_settings</item> <item name="referenceValue">@drawable/night_bg</item> <item name="imageValue">@drawable/night_launcher_icon</item> <item name="curVisibility">hide</item> </style>

1.3在布局文件中使用

定义好了属性，我们接下来就要在布局文件中使用了。

为了使用主题中的属性来配置界面，我定义了一个名为setting.xml布局文件。

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="?attr/referenceValue" android:orientation="vertical" > <TextView android:id="@+id/setting_Color" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" android:textColor="?attr/colorValue" /> <CheckBox android:id="@+id/setting_show_answer_switch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="?attr/booleanValue"/> <TextView android:id="@+id/setting_Title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="?attr/dimensionValue" android:text="@string/text_title" android:textColor="?attr/colorValue" /> <TextView android:id="@+id/setting_Text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="?attr/stringValue" /> <ImageView android:id="@+id/setting_Image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="?attr/imageValue" /> <View android:id="@+id/setting_line" android:layout_width="match_parent" android:layout_height="1dp" android:visibility="?attr/curVisibility" /> </LinearLayout>

从这个布局文件中可以看到，通过“?attr/……” 格式来引用主题中的值，包括（字符串、图片、bool类型、尺寸设置等）。

1.4设置主题及布局文件

布局文件与主题都写好了，接下来我们就要在Activity的onCreate方法里使用了。

大致应该像这样子的：

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if(MyApplication.appConfig.getNightModeSwitch()){ this.setTheme(R.style.NightTheme); }else{ this.setTheme(R.style.DayTheme); } setContentView(R.layout.setting); …… }

ps:

• MyApplication.appConfig.getNightModeSwitch()//是获取pf中当前所处的模式。
• 一定要放到setContentView();方法之前设置。
  

如果你使用的fragment 大致应该像下面的样子：

@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { if(MyApplication.appConfig.getNightModeSwitch()){ getActivity().setTheme(R.style.NightTheme); }else{ getActivity().setTheme(R.style.DayTheme); } final View view = inflater.inflate(R.layout.setting, null); …… }

ps：建议放到onCreateView（……）方法里面。

值得注意的是，要是默认主题里没那些属性，解析布局文件时候是会crash。这点在配置多个不同style时要主题时，属性可以多，但一定不能少。

比如在attrs.xml文件中

<item name="floatValue">1.44</item> <item name="integerValue">55</item>

这两个属性没有用到，但却没有问题。

如果按照上面的操作完毕之后，程序运行起来应该就会看到效果了

那第二个问题呢？

直接看源码

源码地址：NightModel_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。