Android 夜间模式的实现(一)

夜间模式实现

 

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

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

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

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

 

其一：从何处着手

 

1.1定义属性

 

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

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

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

[html] view plain copy

print ?

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

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

[html] view plain copy

print ?

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

    <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布局文件。

 

[html] view plain copy

print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"   
5.     android:background="?attr/referenceValue"  
6.     android:orientation="vertical"  
7.     >  
8.     <TextView  
9.         android:id="@+id/setting_Color"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:text="TextView"  
13.         android:textColor="?attr/colorValue" />  
14.     <CheckBox  
15.                 android:id="@+id/setting_show_answer_switch"  
16.                 android:layout_width="wrap_content"  
17.                 android:layout_height="wrap_content"                 
18.                 android:checked="?attr/booleanValue"/>     
19.     <TextView  
20.         android:id="@+id/setting_Title"  
21.         android:layout_width="wrap_content"  
22.         android:layout_height="wrap_content"   
23.         android:textSize="?attr/dimensionValue"   
24.         android:text="@string/text_title"  
25.         android:textColor="?attr/colorValue" />   
26.     <TextView  
27.         android:id="@+id/setting_Text"  
28.         android:layout_width="wrap_content"  
29.         android:layout_height="wrap_content"    
30.         android:text="?attr/stringValue" />  
31.   
32.     <ImageView  
33.         android:id="@+id/setting_Image"  
34.         android:layout_width="wrap_content"  
35.         android:layout_height="wrap_content"      
36.         android:src="?attr/imageValue" />  
37.   
38.   
39.     <View android:id="@+id/setting_line"  
40.         android:layout_width="match_parent"  
41.         android:layout_height="1dp"  
42.         android:visibility="?attr/curVisibility"  
43.         />   
44. </LinearLayout>  

<?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方法里使用了。
 大致应该像这样子的：

[java] view plain copy

print ?

1. @Override  
2.     protected void onCreate(Bundle savedInstanceState) {         
3.         super.onCreate(savedInstanceState);  
4.         if(MyApplication.appConfig.getNightModeSwitch()){  
5.             this.setTheme(R.style.NightTheme);  
6.         }else{  
7.             this.setTheme(R.style.DayTheme);  
8.         }  
9.         setContentView(R.layout.setting);  
10.         ……    
11.     }  

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

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

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

[java] view plain copy

print ?

1. @Override  
2.   public View onCreateView(LayoutInflater inflater, ViewGroup container,  
3.                            Bundle savedInstanceState) {  
4.       if(MyApplication.appConfig.getNightModeSwitch()){  
5.           getActivity().setTheme(R.style.NightTheme);  
6.       }else{  
7.           getActivity().setTheme(R.style.DayTheme);  
8.       }  
9.       final View view = inflater.inflate(R.layout.setting, null);  
10.       ……  
11.   
12.    }  

  @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文件中

[html] view plain copy

print ?

1. <item name="floatValue">1.44</item>  
2. <item name="integerValue">55</item>  

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

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

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

那第二个问题呢？

http://blog.csdn.net/brokge/article/details/45063075