27
2017
09

Day8 一行代码给我们的APP增添多彩主题

首先看一下多彩主题的设置页面:

然后看一下设置后的不同效果:

最后看一下动态效果:

点此进入目录:[干货] 十天 教你从创意到上线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
CSDN:WillFlow
微信公众号:WillFlow

微信公众号:WillFlow

上一篇:Day6 快速学习OkHttp3的九大用法 下一篇:Android sdk的目录结构