Android动态换肤（一、应用内置多套皮肤）

动态换肤在很多android应用中都有使用，用户根据自己的喜好设置皮肤主题，可以增强用户使用应用的舒适度。

Android换肤可以分为很多种，它们从使用方式，用户体验以及项目框架设计上体现了明显的差异。

接下来几篇文章分别讲解其中比较主流的换肤方式。

应用内置皮肤实现动态切换在技术上是最容易实现的，但有很多局限性，比如不能在使用过程中增减皮肤，除非升级应用，扩展性很弱；如果需要设置皮肤的位置很多，编码起来比较麻烦。主要是使用 SharedPreferences记录当前设置的皮肤序号，然后加载这套皮肤的所有资源，在每个activity中有一个setSkin()的方法设置皮肤。

博主的个人项目好记单词 中的换肤功能就是使用这个方案，感兴趣可以下载看一看，效果还不错。

实现：

• 确定需要换肤的地方
  
  首先要确定应用中那些界面需要换肤，他们有什么共性？比如天天动听，一套以蓝色为基调的皮肤，所有的界面title应该是蓝色的，所有的按钮也是蓝色系列的…，这样就可以确定一套皮肤需要哪些颜色以及资源文件。
  
  

• 确定一套皮肤需要的资源（其余皮肤按照第一套皮肤模板做）
  
  比如首页，四个模块，其中 本地音乐和 最近播放 的颜色是一样的，这里需要两个颜色值（正常和按下状态），歌曲下载 和 MV下载 的颜色是一样的，这里也需要两个颜色值，每个界面的标题背景色相同，然后一些按钮也需要两个颜色值；综合起来就需要7个色值，在color.xml文件中定义好它们，然后再drawable目录定义好选择器。
  
  （以下是Demo中的代码片段，真实项目开发中只需要按照这个步骤模板做就行）

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 皮肤1 主色调 天蓝#4AC2E3-->
    <!-- 界面背景 -->
    <color name="pf1_activity_bg_color1">#46BAE3</color>
    <color name="pf1_activity_bg_color2">#63f3e3</color>
    <!-- item选择器 -->
    <color name="pf1_main_item_bg1">#50CEE3</color>
    <color name="pf1_main_item_bg2">#4AC2E3</color>
    <!-- 字体颜色黑色 -->
    <color name="pf1_text_color">#000000</color>               

    <!-- 皮肤2 主色调 草绿#53CAC3-->
    <!-- 界面背景 -->
    <color name="pf2_activity_bg_color1">#53CAC3</color>
    <color name="pf2_activity_bg_color2">#73FFB9</color>
    <!-- item选择器 -->
    <color name="pf2_main_item_bg1">#62E3BE</color>
    <color name="pf2_main_item_bg2">#5BD7C0</color>
    <!-- 字体颜色白色 -->
    <color name="pf2_text_color">#ffffff</color>
</resources>

• 编写SkinUtil资源加载类

public class SkinUtil {
    private SharedPreferences sp;
    //KEY
    private final String KEY_PF = "skin";  //记录当前皮肤
    //VALUE
    public static final int VALUE_SKIN_1 = 1;   //天蓝
    public static final int VALUE_SKIN_2 = 2;   //草绿

    //当前皮肤资源ID
    public int activity_bg;
    public int item_bg;
    public int textColor;

    public SkinUtil(Context context){
        sp = context.getSharedPreferences("mySkin", Context.MODE_PRIVATE);
        loadPf();
    }
    /**
     * 设置使用那一套皮肤
     * @param witch
     */
    public void setSkin(int witch){
        sp.edit().putInt(KEY_PF, witch).commit();
        loadPf();
    }
    /**
     * 加载皮肤资源
     */
    public void loadPf(){
        //默认第一套皮肤（如果没有设置过）
        int pf_num =  sp.getInt(KEY_PF, VALUE_SKIN_1);
        switch (pf_num) {
        case VALUE_SKIN_1:
            setSkin1();
            break;
        case VALUE_SKIN_2:
            setSkin2();
            break;
        }
    }

    //加载第一套皮肤资源ID
    private void setSkin1() {
        activity_bg = R.drawable.skin1_activity_bg;
        item_bg = R.drawable.skin1_main_item_bg;
        textColor = R.color.pf1_text_color;
    }

    //加载第二套皮肤资源ID
    private void setSkin2() {
        activity_bg = R.drawable.skin2_activity_bg;
        item_bg = R.drawable.skin2_main_item_bg;
        textColor = R.color.pf2_text_color;
    }
}

• 使用皮肤
  
  在Application中初始化皮肤工具类

public class MyApplication extends Application {
    public static SkinUtil skin;
    @Override
    public void onCreate() {
        super.onCreate();
        skin = new SkinUtil(getApplicationContext());
    }
}

定义BaseActivity

public abstract class BaseActivity extends Activity implements OnClickListener {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initView();
        setSkin();
    }
    protected abstract void initView();
    protected abstract void setSkin();
}

实现setSkin()方法设置皮肤

public class MainActivity extends BaseActivity{
    private LinearLayout ll_bg;
    private TextView tv_skin1, tv_skin2;
    @Override
    protected void initView() {
        setContentView(R.layout.activity_main);
        ll_bg = (LinearLayout) findViewById(R.id.ll_bg);
       ...
    }
    protected void setSkin() {
        ll_bg.setBackgroundResource(MyApplication.skin.activity_bg);
        ...
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.tv_skin1:
            //使用第一套皮肤
            MyApplication.skin.setSkin(SkinUtil.VALUE_SKIN_1);
            setSkin();
            break;
        case R.id.tv_skin2:
            //使用第二套皮肤
            MyApplication.skin.setSkin(SkinUtil.VALUE_SKIN_2);
            setSkin();
            break;
        ...
        }
    }
}

源码下载

https://github.com/openXu/SkinChange1