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

实现：

源码下载

更多相关文章

随机推荐