Day8 一行代码给我们的APP增添多彩主题
2017-10-05 本文已影响144人
常思行
首先看一下多彩主题的设置页面：
然后看一下设置后的不同效果：
最后看一下动态效果：
点此进入目录：[干货] 十天 教你从创意到上线APP
一、变化主题之前的准备
1、用枚举定义主题类型
首先，定义一个枚举用来规定我们的主题都有那些类型：
/**
* Created by : WGH.
*/
public enum APPTheme {
Blue,
Green,
Red,
Grey,
Black,
Purple,
Orange,
Pink,
WillFLow
}
2、定义每个主题的颜色值
其次，我们应当在themes当中定义每个主题类型所对应的各个主题颜色，这里我们每个主题分配四种主题颜色，分别是：colorPrimary、colorPrimaryLight、colorPrimaryDark、colorAccent。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme. -->
<style name="WillFlowTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="colorPrimaryLight">@color/colorPrimaryLight</item>
</style>
<style name="BlueTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/blue_primary</item>
<item name="colorPrimaryDark">@color/blue_primary_dark</item>
<item name="colorAccent">@color/blue_accent</item>
<item name="colorPrimaryLight">@color/blue_primary_light</item>
</style>
<style name="GreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/green_primary</item>
<item name="colorPrimaryDark">@color/green_primary_dark</item>
<item name="colorAccent">@color/green_accent</item>
<item name="colorPrimaryLight">@color/green_primary_light</item>
</style>
<style name="RedTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/red_primary</item>
<item name="colorPrimaryDark">@color/red_primary_dark</item>
<item name="colorAccent">@color/red_accent</item>
<item name="colorPrimaryLight">@color/red_primary_light</item>
</style>
<style name="BlueGreyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/blue_grey_primary</item>
<item name="colorPrimaryDark">@color/blue_grey_primary_dark</item>
<item name="colorAccent">@color/blue_grey_accent</item>
<item name="colorPrimaryLight">@color/blue_grey_primary_light</item>
</style>
<style name="BlackTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/black_primary</item>
<item name="colorPrimaryDark">@color/black_primary_dark</item>
<item name="colorAccent">@color/black_accent</item>
<item name="colorPrimaryLight">@color/black_primary_light</item>
</style>
<style name="PurpleTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/purple_primary</item>
<item name="colorPrimaryDark">@color/purple_primary_dark</item>
<item name="colorAccent">@color/purple_accent</item>
<item name="colorPrimaryLight">@color/purple_primary_light</item>
</style>
<style name="OrangeTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/orange_primary</item>
<item name="colorPrimaryDark">@color/orange_primary_dark</item>
<item name="colorAccent">@color/orange_accent</item>
<item name="colorPrimaryLight">@color/orange_primary_light</item>
</style>
<style name="PinkTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/pink_primary</item>
<item name="colorPrimaryDark">@color/pink_primary_dark</item>
<item name="colorAccent">@color/pink_accent</item>
<item name="colorPrimaryLight">@color/pink_primary_light</item>
</style>
</resources>
二、设置我们的主题
1、在选中的时候保存
首先，我们需要在用户选择主题的时候进行保存用户的设置：
@Override
public void onClick(View v) {
APPTheme theme;
switch (v.getId()) {
case R.id.blue_theme:
theme = APPTheme.Blue;
break;
case R.id.willflow_theme:
theme = APPTheme.WillFLow;
break;
case R.id.green_theme:
theme = APPTheme.Green;
break;
case R.id.red_theme:
theme = APPTheme.Red;
break;
case R.id.grey_theme:
theme = APPTheme.Grey;
break;
case R.id.black_theme:
theme = APPTheme.Black;
break;
case R.id.orange_theme:
theme = APPTheme.Orange;
break;
case R.id.purple_theme:
theme = APPTheme.Purple;
break;
case R.id.pink_theme:
theme = APPTheme.Pink;
break;
default:
theme = APPTheme.WillFLow;
break;
}
Define.setAppTheme(theme);
startActivity(new Intent(getContext(), MainActivity.class));
getActivity().finish();
}
我们这里在点击监听器里面做相应的逻辑操作。首先根据对应的点击找到相应的主题，其次保存主题到常量里面，然后通过启动Activity来进行主题的生效，最后finish()掉当前的Activity。那么，Activity里面的代码就显得尤为重要了，接下来我们看一下。
2、在启动的时候进行主题设置
我们所有的Activity都是继承自BaseActivity，所以在这里面进行主题设置就完全可以实现想要的功能，主要代码如下：
protected void onPreCreate() {
final APPTheme currentTheme = Define.getAppTheme();
switch (currentTheme) {
case Blue:
this.setTheme(R.style.BlueTheme);
break;
case Green:
this.setTheme(R.style.GreenTheme);
break;
case Red:
this.setTheme(R.style.RedTheme);
break;
case Grey:
this.setTheme(R.style.BlueGreyTheme);
break;
case Black:
this.setTheme(R.style.BlackTheme);
break;
case Orange:
this.setTheme(R.style.OrangeTheme);
break;
case Purple:
this.setTheme(R.style.PurpleTheme);
break;
case Pink:
this.setTheme(R.style.PinkTheme);
break;
case WillFLow:
this.setTheme(R.style.WillFlowTheme);
default:
this.setTheme(R.style.WillFlowTheme);
break;
}
}
@Override
protected void onCreate(Bundle savedInstanceState) {
onPreCreate();
super.onCreate(savedInstanceState);
}
可以看到，我们是在onCreate的父类调用之前首先调用了onPreCreate()，这就意味着我们是在所有的Activity开启之前就进行了主题的设置。而设置的方法就是：通过获取之前保存在常量里的AppTheme枚举值来进行主题的选择和设置，方法是：this.setTheme(R.style.XXXTheme)。其中的就对应着我们之前文件中定义的主题颜色集合。
至此为止，我们就为APP做出了良好的更换主题的工作。如果你有更好的颜色想要设置，只要增加分类即可，这很简单。
联系方式：
微信公众号：WillFlow
