换肤功能接入及原理

前阵子开源出了自己的mp3剪切器项目,在鸿洋大神公众号的宣传下引来众人关注。本着持续维护的心,计划中项目要实现一个简单的应用内换肤功能。

经过调研发现一款很用心的开源的换肤框架Android-skin-support。它支持应用内换肤、插件式换肤和自定义加载的方式。在这里只介绍一下应用内换肤方式,希望能够抛砖引玉,详细的介绍可以参考它的github。先来看看效果Gif图。

效果图

[图片上传失败...(image-e2132e-1516800042573)]

使用方法

  1. 先来添加jcenter依赖库,
    compile 'skin.support:skin-support:2.2.3'                   
    compile 'skin.support:skin-support-design:2.2.3'  
  1. Application类中增加初始化sdk代码
SkinCompatManager.withoutActivity(this)                         // 基础控件换肤初始化
                .addInflater(new SkinMaterialViewInflater())            // material design 控件换肤初始化[可选]
                .setSkinStatusBarColorEnable(false)                     // 关闭状态栏换肤,默认打开[可选]
                .setSkinWindowBackgroundEnable(false)                   // 关闭windowBackground换肤,默认打开[可选]
                .loadSkin();
  1. 设置需要换肤的控件,我这里主要为toolbar换肤。
<skin.support.widget.SkinCompatToolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                android:minHeight="?attr/actionBarSize"
                android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
  1. 准备换肤的资源,我这里用的主题颜色以及颜色的名称,放入arrays.xml中。
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 默认主题颜色 -->
    <color name="theme_color">#000000</color>

    <!-- theme array -->
    <color name="theme_color_redbase">#FB5B81</color>
    <color name="theme_color_blue">#0077D9</color>
    <color name="theme_color_bluelight">#03A9F4</color>
    <color name="theme_color_balck">#000000</color>
    <color name="theme_color_teal">#009688</color>
    <color name="theme_color_brown">#795548</color>
    <color name="theme_color_green">#4CAF50</color>
    <color name="theme_color_red">#FF5252</color>

    <!-- 主题颜色, 用于换肤, 例如:@color/xx_redbase -->
    <string-array name="theme_colors">
        <item>@color/theme_color_redbase</item>
        <item>@color/theme_color_blue</item>
        <item>@color/theme_color_bluelight</item>
        <item>@color/theme_color_balck</item>
        <item>@color/theme_color_teal</item>
        <item>@color/theme_color_brown</item>
        <item>@color/theme_color_green</item>
        <item>@color/theme_color_red</item>
    </string-array>

    <!-- 主题名称, 用于换肤, 例如:@color/xx_redbase -->
    <string-array name="theme_names">
        <item>redbase</item>
        <item>blue</item>
        <item>bluelight</item>
        <item>balck</item>
        <item>teal</item>
        <item>brown</item>
        <item>green</item>
        <item>red</item>
    </string-array>
</resources>

  1. 换肤api调用, 这里传入了选中的主题颜色名称,以及换肤的加载方式(应用内换肤)
SkinCompatManager.getInstance().loadSkin(
 mThemeColorList.get(mThemeColorAdapter.getPosition()).getName(),
 null,SkinCompatManager.SKIN_LOADER_STRATEGY_BUILD_IN);

问题

  • 如何定位需要换肤的view,如何进行换肤操作?
  • 如何遍历每个activity中的需要换肤的view?

浅析

  1. 定位需要被换肤view的思路 主要通过LayoutInflaterFactory获取到当前activity中所有的组件,通过过滤定位到需要换肤的view。可以参考鸿洋的这篇文章 Android 探究 LayoutInflater setFactory
    SkinCompatDelegate类实现了LayoutInflaterFactory接口,并实现了它的createView()方法, 这里看SkinCompatViewInflater类的createView()代码如下:
            case "View":
                view = new SkinCompatView(context, attrs);
                break;
            case "LinearLayout":
                view = new SkinCompatLinearLayout(context, attrs);
                break;
            case "RelativeLayout":
                view = new SkinCompatRelativeLayout(context, attrs);
                break;
            case "FrameLayout":
                view = new SkinCompatFrameLayout(context, attrs);
                break;
            case "TextView":
                view = new SkinCompatTextView(context, attrs);
                break;
            case "ImageView":
                view = new SkinCompatImageView(context, attrs);
                break;

可以看到在createView遍历后将其替换了对应的Skin开头的对应的类。而Skin开头的类是什么呢, 来看SkinCompatView类。

public class SkinCompatView extends View implements SkinCompatSupportable {
    private SkinCompatBackgroundHelper mBackgroundTintHelper;
    ...
    @Override
    public void setBackgroundResource(int resId) {
        super.setBackgroundResource(resId);
        if (mBackgroundTintHelper != null) {
            mBackgroundTintHelper.onSetBackgroundResource(resId);
        }
    }
    @Override
    public void applySkin() {
        if (mBackgroundTintHelper != null) {
            mBackgroundTintHelper.applySkin();
        }
    }

}

可以看到它实现了SkinCompatSupportable接口以及其applySkin方法,该方法就是换肤的实现方法了。
接着来看SkinCompatDelegate.onCreateView()

@Override
    public View onCreateView(View parent, String name, Context context, AttributeSet attrs) {
        View view = createView(parent, name, context, attrs);
        if (view == null) {
            return null;
        }
        if (view instanceof SkinCompatSupportable) { 
            mSkinHelpers.add(new WeakReference<>((SkinCompatSupportable) view));
        }
        return view;
    }

上文已经将view转换为Skin开头的View(实现了SkinCompatSupportable的View)可以看到将其缓存到了mSkinHelpers数组中。再看SkinCompatDelegate.applySkin()

    public void applySkin() {
        if (mSkinHelpers != null && !mSkinHelpers.isEmpty()) {
            for (WeakReference ref : mSkinHelpers) {
                if (ref != null && ref.get() != null) {
                    ((SkinCompatSupportable) ref.get()).applySkin();
                }
            }
        }
    }

该方法就是换肤的操作了,遍历缓存中所有的view,执行其换肤方法applySkin。这里我们再看一下applySkin里面的实现,来看SkinBuildInLoader.getTargetResourceEntryName()

    @Override
    public String getTargetResourceEntryName(Context context, String skinName, int resId) {
        return context.getResources().getResourceEntryName(resId) + "_" + skinName;
    }
  1. 第二个问题,可以通过BaseActivity的方式来达到目的,但是有更好的方式。来看SkinActivityLifecycle的构造方法application.registerActivityLifecycleCallbacks(this);。注册之后没个activity的声明周期回调都会在该类中回调到, 如onActivityCreated()
@Override
    public void onActivityCreated(Activity activity, Bundle savedInstanceState) {
        if (isContextSkinEnable(activity)) {
            installLayoutFactory(activity);
            updateStatusBarColor(activity);
            updateWindowBackground(activity);
            if (activity instanceof SkinCompatSupportable) {
                ((SkinCompatSupportable) activity).applySkin();
            }
        }
    }

在每个activity创建后都会对应执行到installLayoutFactory(activity)方法,从而达到对每个activity 换肤view做收集换肤的目的。
到此,基本原理,都阐述完了,具体不懂的更详细的还要结合源码来看,如下:

Github

mp3剪切器项目

Android-skin-support

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,575评论 25 707
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,088评论 2 44
  • 原文链接:https://github.com/opendigg/awesome-github-android-u...
    IM魂影阅读 32,788评论 6 472
  • 喜欢多肉植物的花友们,大叔每天都会精选一款多肉植物,让大家了解,这样就会不断学习到多肉的知识,每天认识一款,一年也...
    多肉花客阅读 739评论 0 2
  • 我是一只无家可归的鸟, 昨天夜里,蹲在树上过夜, 刚一闭眼, 就遇到场暴雨, 淋成落汤鸟, 我又冷又饥, 我使劲地...
    旖旎i阅读 510评论 13 11