Android动态换肤开源库Colorful发布

转自：http://blog.csdn.net/bboyfeiyu/article/details/48322023

Colorful是基于Theme，无需重启Activity、无需自定义View，方便的实现日间、夜间模式，github地址为 https://github.com/bboyfeiyu/Colorful。

Colorful 动态换肤开源库

基于Theme的Android动态换肤开源库,以简单的方式实现夜间模式。

效果如下：

一、使用方式

1.1 自定义属性

<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">resources</span>></span>    <span class="hljs-comment"><!-- 自定义属性 --></span>    <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"root_view_bg"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"reference|color"</span> /></span>    <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"btn_bg"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"reference|color"</span> /></span>    <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"text_color"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"reference|color"</span> /></span><span class="hljs-tag"></<span class="hljs-title">resources</span>></span></code><ul style="FILTER: ; ZOOM: 1" class="pre-numbering"><li>1</li></ul>

1.2 在布局中使用自定义属性设置View的背景、文本颜色等属性

activity_main.xml中的布局:

<code class="language-xml hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">RelativeLayout</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:tools</span>=<span class="hljs-value">"http://schemas.android.com/tools"</span>    <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/root_view"</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:background</span>=<span class="hljs-value">"?attr/root_view_bg"</span>    <span class="hljs-attribute">tools:context</span>=<span class="hljs-value">"com.example.androidthemedemo.MainActivity"</span> ></span>    <span class="hljs-tag"><<span class="hljs-title">TextView</span>        <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/textview"</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:gravity</span>=<span class="hljs-value">"center"</span>        <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"@string/change_theme"</span>        <span class="hljs-attribute">android:textColor</span>=<span class="hljs-value">"?attr/text_color"</span>        <span class="hljs-attribute">android:textSize</span>=<span class="hljs-value">"20sp"</span> /></span>    <span class="hljs-tag"><<span class="hljs-title">Button</span>        <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/change_btn"</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:layout_below</span>=<span class="hljs-value">"@id/textview"</span>        <span class="hljs-attribute">android:layout_marginTop</span>=<span class="hljs-value">"20dp"</span>        <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"@string/change_theme"</span>        <span class="hljs-attribute">android:textColor</span>=<span class="hljs-value">"?attr/text_color"</span> /></span>    <span class="hljs-tag"><<span class="hljs-title">Button</span>        <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/second_btn"</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:layout_below</span>=<span class="hljs-value">"@id/change_btn"</span>        <span class="hljs-attribute">android:layout_marginTop</span>=<span class="hljs-value">"20dp"</span>        <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"@string/sec_act"</span>         /></span>    <span class="hljs-tag"><<span class="hljs-title">ListView</span>        <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/listview"</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:layout_below</span>=<span class="hljs-value">"@id/second_btn"</span>        <span class="hljs-attribute">android:layout_marginTop</span>=<span class="hljs-value">"20dp"</span> /></span><span class="hljs-tag"></<span class="hljs-title">RelativeLayout</span>></span></code><ul style="FILTER: ; ZOOM: 1" class="pre-numbering"><li>1</li></ul>

例如上述布局中我们将root_view的背景设置为"?attr/root_view_bg"，代表它的背景是自定义属性root_view_bg的值，还有Textview和Button的textColor属性设置为"?attr/text_color"。

1.3 定义多个Theme

然后在不同的Theme中为这些属性设置不同的值,例如，通常我们有日间和夜间模式两种颜色模式。styles.xml中的完整代码如下:

<code class="language-xml hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">resources</span>></span>    <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"AppBaseTheme"</span> <span class="hljs-attribute">parent</span>=<span class="hljs-value">"Theme.AppCompat.Light"</span>></span><span class="css">    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>    <span class="hljs-comment"><!-- Application theme. --></span>    <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">"AppBaseTheme"</span>></span><span class="css">    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>    <span class="hljs-comment"><!-- 日间主题 --></span>    <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"DayTheme"</span> <span class="hljs-attribute">parent</span>=<span class="hljs-value">"AppTheme"</span>></span><span class="css">        <<span class="hljs-tag">item</span> <span class="hljs-tag">name</span>="<span class="hljs-tag">root_view_bg</span>"><span class="hljs-at_rule">@<span class="hljs-keyword">drawable/bg_day</item></span>        <item name=<span class="hljs-string">"btn_bg"</span>>@color/white_btn_color</item>        <item name=<span class="hljs-string">"text_color"</span>>@color/black_tx_color</item>    </span></span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>    <span class="hljs-comment"><!-- 夜间主题 --></span>    <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"NightTheme"</span> <span class="hljs-attribute">parent</span>=<span class="hljs-value">"AppTheme"</span>></span><span class="css">        <<span class="hljs-tag">item</span> <span class="hljs-tag">name</span>="<span class="hljs-tag">root_view_bg</span>"><span class="hljs-at_rule">@<span class="hljs-keyword">drawable/bg_night</item></span>        <item name=<span class="hljs-string">"btn_bg"</span>>@color/black_btn_color</item>        <item name=<span class="hljs-string">"text_color"</span>>@color/white_tx_color</item>    </span></span><span class="hljs-tag"></<span class="hljs-title">style</span>></span><span class="hljs-tag"></<span class="hljs-title">resources</span>></span></code><ul style="FILTER: ; ZOOM: 1" class="pre-numbering"><li>1</li></ul>

两个主题下为同一个属性设置了不同的值，达到切换主题时修改View的相关属性的目的。例如定义在colors.xml中的颜色值。

<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">resources</span>></span>    <span class="hljs-comment"><!-- 日间模式 --></span>    <span class="hljs-tag"><<span class="hljs-title">color</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"white_btn_color"</span>></span>#3BB32E<span class="hljs-tag"></<span class="hljs-title">color</span>></span>    <span class="hljs-tag"><<span class="hljs-title">color</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"black_tx_color"</span>></span>#333333<span class="hljs-tag"></<span class="hljs-title">color</span>></span>    <span class="hljs-comment"><!-- 夜间模式 --></span>    <span class="hljs-tag"><<span class="hljs-title">color</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"black_btn_color"</span>></span>#aa7788<span class="hljs-tag"></<span class="hljs-title">color</span>></span>    <span class="hljs-tag"><<span class="hljs-title">color</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"white_tx_color"</span>></span>#f0f0f0<span class="hljs-tag"></<span class="hljs-title">color</span>></span><span class="hljs-tag"></<span class="hljs-title">resources</span>></span></code><ul style="FILTER: ; ZOOM: 1" class="pre-numbering"><li>1</li></ul>

1.4 设置要修改的View的属性

下面我们为activity_main.xml中的视图进行换肤设置:

<code class="language-java hljs  has-numbering">ListView  mNewsListView = (ListView) findViewById(R.id.listview);<span class="hljs-comment">// 为ListView设置要修改的属性,在这里没有对ListView本身的属性做修改</span>ViewGroupSetter listViewSetter = <span class="hljs-keyword">new</span> ViewGroupSetter(mNewsListView, <span class="hljs-number">0</span>);<span class="hljs-comment">// 绑定ListView的Item View中的news_title视图，在换肤时修改它的text_color属性</span>listViewSetter.childViewTextColor(R.id.news_title, R.attr.text_color);<span class="hljs-comment">// 构建Colorful对象</span>Colorful mColorful = <span class="hljs-keyword">new</span> Colorful.Builder(<span class="hljs-keyword">this</span>)        .backgroundDrawable(R.id.root_view, R.attr.root_view_bg) <span class="hljs-comment">// 设置view的背景图片</span>        .backgroundColor(R.id.change_btn, R.attr.btn_bg) <span class="hljs-comment">// 设置按钮的背景色</span>        .textColor(R.id.textview, R.attr.text_color) <span class="hljs-comment">// 设置文本颜色</span>        .setter(listViewSetter)           <span class="hljs-comment">// 手动设置setter</span>        .create(); </code><ul style="FILTER: ; ZOOM: 1" class="pre-numbering"><li>1</li></ul>

首先我们定义了一个listViewSetter，该Setter用于为ListView的每个Item View中的news_title控件设置文本颜色，文本颜色的值是自定义属性text_color的颜色值。然后构建Colorful对象，并且id分别为change_btn、root_view、textview的控件绑定特定属性值，例如backgroundDrawable(R.id.root_view, R.attr.root_view_bg)代表root_view的背景Drawable为自定义属性root_view_bg的值，textColor(R.id.textview, R.attr.text_color)表示id为textview的TextView控件的文本颜色为R.attr.text_color的值。这些属性都在不同的Theme中有不同的值，因此切换Theme时就会发生变化。然后我们将listViewSetter添加到Colorful对象中，在修改主题时被遍历ListView中的所有Item View，然后修改news_title控件的文本颜色。

1.5 切换主题

最后通过Colorful对象设置主题即可实现切换，代码如下:

<code class="language-java hljs  has-numbering"><span class="hljs-keyword">boolean</span> isNight = <span class="hljs-keyword">false</span> ;<span class="hljs-comment">// 切换主题</span><span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">changeThemeWithColorful</span>() {    <span class="hljs-keyword">if</span> (!isNight) {        mColorful.setTheme(R.style.DayTheme);    } <span class="hljs-keyword">else</span> {        mColorful.setTheme(R.style.NightTheme);    }    isNight = !isNight;}</code><ul style="FILTER: ; ZOOM: 1" class="pre-numbering"><li>1</li></ul>

时间仓促，功能简单，希望有时间的同学积极加入，将功能慢慢完善起来！